插件描述：漂亮旋钮(knob)的jQuery插件
主要特性
支持只读模式
两个供选择的callback方法：change和release
支持自定义选项并且支持使用HTML5的data属性来配置插件选项
内建不同的主题
对于老的浏览器拥有不错的fallback机制
如何使用
导入jQuery和knob插件类库
1 | <script src="/"></script><br style="outline: none medium;"><script src="js/jquery.knob-1.0.1.js"></script> |
HTML代码
1 | <div id="knobwrapper"><br style="outline: none medium;"> <input class="knob" data-width="300" data-skin="tron" data-displayInput="true" value="200"><br style="outline: none medium;"> <div><br style="outline: none medium;"> <input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#303030" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200"><br style="outline: none medium;"> </div><br style="outline: none medium;"></div> |
Javascript代码
1 | $(function() {<br style="outline: none medium;"> $(".knob").knob({<br style="outline: none medium;"> max: 940,<br style="outline: none medium;"> min: 500,<br style="outline: none medium;"> thickness: .3,<br style="outline: none medium;"> fgColor: '#2B99E6',<br style="outline: none medium;"> bgColor: '#303030',<br style="outline: none medium;"> 'release':function(e){<br style="outline: none medium;"> $('#img').animate({width:e});<br style="outline: none medium;"> }<br style="outline: none medium;"> });<br style="outline: none medium;"> <br style="outline: none medium;"> $(".knob2").knob({<br style="outline: none medium;"> 'release':function(e){<br style="outline: none medium;"> $('#img').animate({width:e});<br style="outline: none medium;"> }<br style="outline: none medium;"> });<br style="outline: none medium;">}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 弹出层插件Avgrund
- 下一个特效： js敲击空格分割tag标签