jQuery Mobile Slider Widget 使用js控制

jQuery Mobile 滑動條控件

 

基本用法不用多說了，看這裏：

http://www.runoob.com/jquerymobile/jquerymobile-form-sliders.html

 

建立方法仍是很簡單的，runnoob裏面還特意給出了四種不一樣的滑動條樣式。

可是，惟獨少了一種效果，就是去除旁邊的輸入框 （input 類型爲number）。

一開始我用的方法是css修改法：

#slider{display:none;float:left} 

這裏的#slider是你建立的Slider Widget 的id。

隱藏完後再設置滑動條 .ui-slider-track 的css。

（主要是修改margin、pading之類的，這個打開chrome，按下F12對着改就好）。

後來發現不用這麼麻煩，給它添加個 class="ui-hidden-accessible" 就能完美隱藏了。

 

還有就是用js代碼控制它：

設置value的值
$("#slider").val(80).slider("refresh");

設置Min、Max的值
$("#slider").prop("min", 1).slider("refresh");
$("#slider").prop("max", 100).slider("refresh");

監聽改變:$(document).ready(function(){　　$( "#slider" ).on( 'slidestop', function( event ) { 　　var slider_value = $("#slider").val();　　alert (slider_value); 　　});});