滑动条 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");  
实现代码如下:

  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页面代码:
发现经过修饰之后代码如下:
  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如下:
  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>

脚本如下:

  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如下:
  1. <!-- 编码式编订 -->
  2. <div id="slider_range"  > </div>

js脚本如下:

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

关于JQueryMobile中Slider的一点研究的更多相关文章

  1. C# 中枚举的一点研究(跳过一些net坑的研究而已)

    之前一直使用Enum.Parse()将字符串转为枚举,没有深究,后面发现一个问题后对下面的Enum有了一个初步研究(.net 4.0).看下面代码. (留意,枚举类型是值类型,其值不能为Null,所以 ...

  2. 关于C#中readonly的一点小研究

    可能园子里有不少文章已经说明了这个问题了,但是我在这里写这篇博客只是写写自己的一些体会,也权当是整理归纳,高手莫见笑. ===============正文分割线================== 现 ...

  3. Python_关于多线程下变量赋值取值的一点研究

    关于多线程下变量赋值取值的一点研究 by:授客 QQ:1033553122 1.代码实践1 #!/usr/bin/env python # -*- coding:utf-8 -*- __author_ ...

  4. SQL中的Null深入研究分析

    SQL中的Null深入研究分析 虽然熟练掌握SQL的人对于Null不会有什么疑问,但总结得很全的文章还是很难找,看到一篇英文版的, 感觉还不错. Tony Hoare 在1965年发明了 null 引 ...

  5. OD提示 "为了执行系统不支持的动作, OllyICE 在这个被调试的程序中注入了一点代码, 但是经过5秒仍未收到响应..." 解决办法

    别的OD就可以,我自己整合过的一个很顺手的OD就是不行,最后找到了解决办法: 转自:http://bbs.pediy.com/showthread.PHP?t=97629 -------------- ...

  6. JMeter 关于JMeter 正则表达式提取器的一点研究

    关于JMeter 正则表达式提取器的一点研究   by:授客 QQ:1033553122 1.   实验环境: JMeter 2.13 2.   添加正则表达式提取器 右键线程组->添加-> ...

  7. 直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章

    直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章_e-works数字化企业网 http://articles.e-works.net.cn/Component/Article ...

  8. 无线物联网中CoAP协议的研究与实现【转】

    无线物联网中CoAP协议的研究与实现 时间:2013-04-09 来源:电子科技 作者:汤春明,张 荧,吴宇平 关键字:CoAP   无线   物联网   协议 摘要:由于物联网中的很多设备都是资源受 ...

  9. js中for循环的研究

    转自:http://blog.csdn.net/lushuaiyin/article/details/8541500 <html> <body> <b><ce ...

随机推荐

  1. C#应用视频教程2.2 OPENGL虚拟仿真介绍

    三维在理解了如何绘制2D元素之后,我们尝试绘制3D元素. 其实多个三角形也能够成四面体,多个长方形也能够成六面体,所以绘制3D元素的时候,只要顶点数量匹配就行了   这里我们尤其注意,我把绘制之前的三 ...

  2. 【Oracle】Oracle常用语句集合

    表相关 1.快速统计大表记录数 select table_name, t.num_rows, t.last_analyzed  from tabs t WHERE table_name='TABLE_ ...

  3. 查看tomcat启动文件都干点啥

    以下所写的都是基于Windows 操作系统,tomcat7.0版本.一直在使用tomcat但是老实说对于tomcat本身并没有一个系统的掌握,今天饶有兴致的随便看了看,做了一点笔记,写一点心得,我本人 ...

  4. 通过CSS3,实现元素覆盖效果

    在非常多站点中,我们都能够看到这种效果.当用户鼠标进入某一个元素后,下方就会有遮罩层上浮动画,如图: 今天我们就用hover伪类加上css3实现,没有使用不论什么JS <!DOCTYPE htm ...

  5. eclipse中查看某个方法(函数)被谁调用

    用了好久一直不知道eclipse中怎样实现vs中查找全部引用的功能,今天最终发现了哈哈 选中要查找的方法名,右键->References->Workspace 能够定位到详细的调用位置,快 ...

  6. 和求余运算巧妙结合的jns指令

    .text:004A78B1  and eax, 80000001h.text:004A78B6  jns short loc_4A78BD.text:004A78B8 dec eax.text:00 ...

  7. 自己工作之余做的OSX小软件

    ShareSDK是为iOS.Android.WindowsPhone提供社会功能的一个组件,开发者只需10分钟即可集成到自己的APP中,它不仅支持分享给QQ好友.微信好友.微信朋友圈.新浪微博.腾迅微 ...

  8. JUC组件扩展(三):BlockingQueue(阻塞队列)详解

    一. 前言 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大 ...

  9. 非常简单的一个函数 竟然一直没有使用 find()

    find: 在非string类型的容器里,可以直接找出所对应的元素. find函数需要几个参数:迭代器,下标值,所要找的元素 vector<int> a; find(a.begin(),a ...

  10. ubuntu获取root权限

    1.先在Terminal下设置root密码 执行 sudo passwd root 2.执行sudo su,然后根据提示来即可.