如何移動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移動滑塊控件的輸入字段？

回答

相關問題