关于JQueryMobile中Slider的一点研究 博客分类：

关于JQueryMobile中Slider的一点研究

• 博客分类：
• 移动开发框架(Titanium和Phonegap)学习和总结

滑动条 Slider

       

        给input的设置一个新的HTML5属性为type="range"，可以给页面添加滑动条组件，可以指定它的value值（当前值），min和max属性的值配置滑动条。Jquery Mobile会解析这些属性来配置滑动条。当你滑动滑动条时，input会随之更新数值，反之亦然，使你能够很简单的在表单里提交数值。注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性

HTML 代码:

<div data-role="fieldcontain">
	<label for="slider">Input slider:</label>
 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

      设置min和max属性的值你可以配置滑动条上下能取到的值，而value值是用来指定滑动条初始的位置和input框内的值滑动杆同样对键盘有响应。右箭头，上箭头，Page Up 键可以用来增加当前值，左箭头，下箭头 ，Page Down键则减少当前值。Home 键和 End 键则可以分别调到滑动条的最小值和最大值。

刷新滑动条 Refreshing a slider

如果你想通过js手动控制滑动条，务必调用 refresh 方法刷新滑动条的样式

  $("input[type=range]").val(60).slider("refresh");  

实现代码如下：

 

Java代码  

1. <div data-role="fieldcontain">    <label for="slider">Input slider:</label>   <input type="range" name="slider" id="slider" value="0" min="0" max="100"  /></div>  

 

 在firefox或者chrome中查看html页面代码：

发现经过修饰之后代码如下：

Html代码  

1. <div class="ui-field-contain ui-body ui-br" data-role="fieldcontain">  
2. <label for="slider">Slider3:</label>  
3. <input id="kk" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-slider-input" type="number" data-type="range" max="100" min="0" value="0" name="slider">  
4. <div class="ui-slider ui-btn-down-c ui-btn-corner-all" role="application">  
5. <a class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="34" aria-valuetext="34" title="34" aria-labelledby="kk-label" style="left: 34%;">  
6. <span class="ui-btn-inner ui-btn-corner-all">  
7. <span class="ui-btn-text"></span>  
8. </span>  
9. </a>  
10. </div>  
11. </div>  

  

可以发现：

  滑块移动的时候，滑块条为a标签实现的，那个输入框为input 类型为number标签。

在网上有哥们咨询怎么实现jquerymobile 的滑块不要那个input输入框。有以下几种方法。

第一种总简单直接隐藏的slider 实现。

如上分析直接使用：$("#kk").hide();

第二种：给一个a标签添加相关的样式实现。

方法一：

html如下：

Java代码  

1. <!-- slider 1 -->  
2. <div class="slider range-slide">  
3.     <b>A range slider:</b>  
4.     <span class="amount"></span>  
5.     <div id="mm" class="slide" value="30,60" max="100" min="10"></div>   
6. </div>   

 脚本如下：

Java代码  

1. $(function(){  
2.     $(".range-slide").each(function() {  
3.         var $this = $(this);   
4.         $(".slide", $this).slider({       
5.             values: [30, 60],       
6.             min: 0,       
7.             max: 100,       
8.             range: true,       
9.             slide: function(event, ui) {           
10.                 $("span.amount", $this).html("" + ui.values[0] + " - " + ui.values[1]);       
11.             }   
12.         });   
13.     });   
14. );  

 

方法二：html如下：

Java代码  

1. <!-- 编码式编订 -->  
2.     <div id="slider_range"  > </div>  

 js脚本如下：

 

Html代码  

1. $(function(){  
2.     
3.   //编码式实现相关的限制  
4.      $("#slider_range").slider({  
5.          range: 'min',                                           
6.          min: 0,                                           
7.          max: 40,                                           
8.          value: 1,                                           
9.          step: 10,                                           
10.          slide : function(event, ui){                                                   
11.              alert("previous value:"+ $(this).val());                                           
12.          },  
13.          stop: function(event, ui){                                                   
14.              alert("Current value:"+ $(this).val());                                           
15.          }                           
16.       });   
17.     
18.     
19.      //$("#kk").hide();  
20.     
21.  });