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

Question

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

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

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

但是滑块控件被压扁到无法使用的地步。完整代码在这里或这里

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

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

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