Question

我正在尝试将jQuery mobile的滑块的输入字段移动到控件的右侧，而不是左侧（默认）。我还想在滑块控件的两侧包含增加和减少按钮。所有这些都应该是内联的，即在一个跨越显示宽度的div中。

我正在执行以下操作来分离并附加输入字段：

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

但滑块控制被压扁到无法使用的程度。完整代码here或here

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

Answer 1

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

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

要覆盖滑块的宽度，您只需使用百分比值

即可

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

修改后的JSFiddle

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

Answer 2

检查此更新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');

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

2 个答案: