jquery knob旋钮插件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>jQuery Knob 尝试</title>
 5         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 6         <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
 7         <script src="dist/jquery.knob.min.js"></script>
 8         <script>
 9             $(function() {
10                 $(".knob").knob({
11                     max: 940,
12                     min: 500,
13                     thickness: .3,
14                     fgColor: '#2B99E6',
15                     bgColor: '#303030',
16                 //    "cursor":true,
17                     'release':function(e){
18                         console.log("release : " + value);
19                     }
20                 });
21      
22                 $(".knob2").knob({
23                     'release':function(e){
24                     //    $('#img').animate({width:e});
25                     console.log("release : " + value);
26                     }
27                 });
28             });
29         </script>
30 
31     </head>
32     <body>
33 
34     <div >
35         <input class="knob" data-width="200" data-skin="tron" data-displayInput="true" value="200">
36         
37         <input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#ffec03" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200">
38         
39     </div>
40     
41 
42     </body>
43 </html>

参数设置可以在input里直接设置也可以用js初始化。

效果图

源码下载==》下载

posted on 2017-08-04 09:26 calamus 阅读(520) 评论(0) 编辑收藏举报