zoukankan      html  css  js  c++  java
  • 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({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初始化。

    效果图

    源码下载==》下载

  • 相关阅读:
    Redis学习之(一)
    SpringMVC之学习(0)
    Node.js之Express三
    Node.js之Express二
    Node.js之Express一
    Node.js进程管理之进程集群
    Node.js进程管理之子进程
    Node.js其他模块
    Node.js进程管理之Process模块
    Node.js HTTP Server对象及GET、POST请求
  • 原文地址:https://www.cnblogs.com/calamus/p/7283276.html
Copyright © 2011-2022 走看看