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);
　　});
});

?

轉載于:https://www.cnblogs.com/edit/p/5730351.html

總結

以上是生活随笔為你收集整理的jQuery Mobile Slider Widget 使用js控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。