如何移动jQuery移动滑块控件的输入字段？

我试图将jQuery移动滑块的输入字段移动到控件的右侧，而不是左侧（默认）。我还想在滑块控件的两侧包括增加和减少按钮。所有这些应该以内联方式出现，即跨越显示宽度的一个div内。如何移动jQuery移动滑块控件的输入字段？

我做以下分离并追加输入字段：

var inputField = $('input#slider-1').detach(); 
inputField.appendTo('#more');

但滑块控件被挤压到不可用的程度。完整代码here或here

如何在不使用固定像素值的情况下覆盖滑块的宽度？

来源

2013-01-22 codecowboy

我看过一个JQM页面，在这里可以设置一个选项，现在正在寻找它......如果我找到了，我会发布。 – frequent

在在右侧定位输入的主要点是选择在滑块正确

$('#control div.ui-slider').insertBefore('#slider-1');

用于覆盖滑块的宽度，就可以只使用一个百分比值

#less { float:left; } 
#control { float:left; width: 50%; } 
#more { float:left; }

改性JSFiddle

此外，您可以删除#inner-div和#test。如果没有这些，它仍然会工作。

来源

2013-01-22 17:02:18

谢谢。你已经回答了主要问题，但没有真正解决增加/减少按钮的问题。 insertBefore（）看起来很干净！ – codecowboy

入住此更新DEMO http://jsfiddle.net/yeyene/Bq2dn/99/

我加入了脚本移动根据增大/减小按钮滑块处理程序。

$('#increase').live('tap',function(e){ 
    var slider = $("#slider-1"); 
    value = parseInt(slider.val(),10);    
    slider.val(value+1); 
    slider.slider('refresh'); 
    slider.attr('style', 'left:'+(value+1)+'%;'); 
}); 

$('#decrease').live('tap',function(e){ 
    var slider = $("#slider-1"); 
    value = parseInt(slider.val(),10); 
    slider.val(value-1); 
    slider.slider('refresh');   
    slider.attr('style', 'left:'+(value-1)+'%;'); 
}); 

$('#control div.ui-slider').insertBefore('#slider-1');

来源

2013-06-20 06:55:33 yeyene

如何移动jQuery移动滑块控件的输入字段？

回答

相关问题