Heim >php教程 >php手册 >数值范围选择控件、鼠标拖动数值范围

数值范围选择控件、鼠标拖动数值范围

WBOY
WBOYOriginal
2016-06-07 11:39:061233Durchsuche

本文用两个例子向大家介绍一款范围选择器插件jRange。
数值范围选择控件、鼠标拖动数值范围

若是想看更多js特效网站源码js教程 请访问http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、<br> 老惯例引入jQuery库文件及jRange插件。<br> <link>  <br> <script></script>  <br> <script></script><br> 2、<br> 接着我们调用jRange获取选取的范围值:<br> $(function() { <br>     $('.single-slider').jRange({ <br>         from: 0, //滑动范围的最小值,数字,如0 <br>         to: 100, //滑动范围的最大值,数字,如100 <br>         step: 1,//步长值,每次滑动大小 <br>         scale: [0, 25, 50, 75, 100],//滑动条下方的尺度标签,数组类型,如[0,50,100] <br>         format: '%s',//数值格式 <br>         width: 300, //滑动条宽度 <br>         showLabels: true,// 是否显示滑动条下方的尺寸标签 <br>         showScale: true //是否显示滑块上方的数值标签 <br>     }); <br>     $('.range-slider').jRange({ <br>         from: 0, <br>         to: 100, <br>         step: 1, <br>         scale: [0, 25, 50, 75, 100], <br>         format: '%s', <br>         width: 300, <br>         showLabels: true, <br>         isRange: true <br>     }); <br>  <br>     $("#g1").click(function() { <br>         var aa = $(".single-slider").val(); <br>         alert(aa); <br>     }); <br>     $("#g2").click(function() { <br>         var aa = $(".range-slider").val(); <br>         alert(aa); <br>     }); <br> });查看该特效演示及免费下载,请访问 http://www.sucaihuo.com/js/42.html

AD:真正免费,域名+虚机+企业邮箱=0元

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn