jQuery Mobile 滑動(dòng)條控件

?

基本用法不用多說(shuō)了，看這里：

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

?

創(chuàng)建方法還是很簡(jiǎn)單的，runnoob里面還特地給出了四種不同的滑動(dòng)條樣式。

但是，唯獨(dú)少了一種效果，就是去除旁邊的輸入框 （input 類型為number）。

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

#slider{display:none;float:left}?

這里的#slider是你創(chuàng)建的Slider Widget 的id。

隱藏完后再設(shè)置滑動(dòng)條?.ui-slider-track 的css。

（主要是修改margin、pading之類的，這個(gè)打開chrome，按下F12對(duì)著改就好）。

后來(lái)發(fā)現(xiàn)不用這么麻煩，給它添加個(gè)?class="ui-hidden-accessible" 就能完美隱藏了。

?

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

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

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/edit/p/5730351.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。