关于JQueryMobile中Slider的一点研究
滑动条 Slider
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>
刷新滑动条 Refreshing a slider
$("input[type=range]").val(60).slider("refresh");
- <div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /></div>
- <div class="ui-field-contain ui-body ui-br" data-role="fieldcontain">
- <label for="slider">Slider3:</label>
- <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">
- <div class="ui-slider ui-btn-down-c ui-btn-corner-all" role="application">
- <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%;">
- <span class="ui-btn-inner ui-btn-corner-all">
- <span class="ui-btn-text"></span>
- </span>
- </a>
- </div>
- </div>
- <!-- slider 1 -->
- <div class="slider range-slide">
- <b>A range slider:</b>
- <span class="amount"></span>
- <div id="mm" class="slide" value="30,60" max="100" min="10"></div>
- </div>
脚本如下:
- $(function(){
- $(".range-slide").each(function() {
- var $this = $(this);
- $(".slide", $this).slider({
- values: [30, 60],
- min: 0,
- max: 100,
- range: true,
- slide: function(event, ui) {
- $("span.amount", $this).html("" + ui.values[0] + " - " + ui.values[1]);
- }
- });
- });
- );
- <!-- 编码式编订 -->
- <div id="slider_range" > </div>
js脚本如下:
- $(function(){
- //编码式实现相关的限制
- $("#slider_range").slider({
- range: 'min',
- min: 0,
- max: 40,
- value: 1,
- step: 10,
- slide : function(event, ui){
- alert("previous value:"+ $(this).val());
- },
- stop: function(event, ui){
- alert("Current value:"+ $(this).val());
- }
- });
- //$("#kk").hide();
- });
关于JQueryMobile中Slider的一点研究的更多相关文章
- C# 中枚举的一点研究(跳过一些net坑的研究而已)
之前一直使用Enum.Parse()将字符串转为枚举,没有深究,后面发现一个问题后对下面的Enum有了一个初步研究(.net 4.0).看下面代码. (留意,枚举类型是值类型,其值不能为Null,所以 ...
- 关于C#中readonly的一点小研究
可能园子里有不少文章已经说明了这个问题了,但是我在这里写这篇博客只是写写自己的一些体会,也权当是整理归纳,高手莫见笑. ===============正文分割线================== 现 ...
- Python_关于多线程下变量赋值取值的一点研究
关于多线程下变量赋值取值的一点研究 by:授客 QQ:1033553122 1.代码实践1 #!/usr/bin/env python # -*- coding:utf-8 -*- __author_ ...
- SQL中的Null深入研究分析
SQL中的Null深入研究分析 虽然熟练掌握SQL的人对于Null不会有什么疑问,但总结得很全的文章还是很难找,看到一篇英文版的, 感觉还不错. Tony Hoare 在1965年发明了 null 引 ...
- OD提示 "为了执行系统不支持的动作, OllyICE 在这个被调试的程序中注入了一点代码, 但是经过5秒仍未收到响应..." 解决办法
别的OD就可以,我自己整合过的一个很顺手的OD就是不行,最后找到了解决办法: 转自:http://bbs.pediy.com/showthread.PHP?t=97629 -------------- ...
- JMeter 关于JMeter 正则表达式提取器的一点研究
关于JMeter 正则表达式提取器的一点研究 by:授客 QQ:1033553122 1. 实验环境: JMeter 2.13 2. 添加正则表达式提取器 右键线程组->添加-> ...
- 直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章
直流电机PWM调速系统中控制电压非线性研究_控制元件_工业自动化控制_文章_e-works数字化企业网 http://articles.e-works.net.cn/Component/Article ...
- 无线物联网中CoAP协议的研究与实现【转】
无线物联网中CoAP协议的研究与实现 时间:2013-04-09 来源:电子科技 作者:汤春明,张 荧,吴宇平 关键字:CoAP 无线 物联网 协议 摘要:由于物联网中的很多设备都是资源受 ...
- js中for循环的研究
转自:http://blog.csdn.net/lushuaiyin/article/details/8541500 <html> <body> <b><ce ...
随机推荐
- UNIX网络编程读书笔记:套接口选项
概述 有很多方法来获取和设置影响套接口的选项: getsockopt和setsockopt函数 fcntl函数 ioctl函数 getsockopt和setsockopt函数 这两个函数仅用于套接口. ...
- Unity for Windows: III–Publishing your unity game to Windows Phone Store
原地址:http://digitalerr0r.wordpress.com/2013/08/27/unity-for-windows-iiipublishing-to-windows-phone-st ...
- 河流Shader
原地址:http://www.unity蛮牛.com/blog-2321-336.html Shader "Custom/TextureEffect" { Properties { ...
- 视频编码格式转换 MP4
视频工具有很多,如专业的premiere,但是我们只要涉及后期转换,不涉及制作,所以用不到这末专业的工具. 一般来说,使用暴风转码或者qq影音工具就足以应付我们的日常转换需求,下面以qq影音软件做说明 ...
- MSSQL查找前一天,前一月,前一年的数据,对比当前时间记录查找超过一年,一月,一天的数据
,') ,GETDATE()) ,') ,GETDATE()) ,') ,GETDATE()) ,GETDATE())) ,GETDATE())) ,GETDATE()))
- Native App、Web App 还是Hybrid App
Native App.Web App 还是Hybrid App? 技术 标点符 1年前 (2014-05-09) 3036℃ 0评论 一.什么是Native App? Native App即原生应用, ...
- 【APP接口开发】php输出json格式数据
请一定配合使用null转空字符的方法一起使用:(_unsetNull() 和 _json() 配合使用) 在一些接口的调用中,直接查询数据库出来的字段可能为null字段,但是为了简便前端的判断,需要把 ...
- 对Ubuntu操作系统进行彻底优化
在安装Linux系统之初,就应该考虑怎样使Linux系统得到最好的性能.Linux本身也设计成可以良好扩展的形态,比如在Linux系统中,我们可以随心所欲地组织磁盘分区,有些朋友喜欢一个/,一个swa ...
- angularjs-1
1.属性表达式 属性表达式计算是发生在作用域中的.Javascript默认是以window为作用域的.AngularJS要使用window作用域的话得用$window来指向全局window对象. 比如 ...
- python --对象的属性
转自:http://www.cnblogs.com/vamei/archive/2012/12/11/2772448.html Python一切皆对象(object),每个对象都可能有多个属性(att ...