jquery.knob.js是一款基于canvas的旋转输入插件-BFW插件库

jquery.knob.js是一款基于canvas的旋转输入插件

jquery.knob.js是一款基于canvas的旋转输入插件，可以通过拖动圆环来改变值。

主要特性:

支持只读模式

两个供选择的callback方法：change和release

支持自定义选项并且支持使用HTML5的data属性来配置插件选项

内建不同的主题

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件

第三步配置参数

$(".knob").knob({
  max: 940,
  min: 500,
  thickness: .3,
  fgColor: '#2B99E6',
  bgColor: '#303030',
  'release':function(e){
   console.log(e);
  }
});

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.knob"], function() {
                $(".knob").knob({
                    max: 940,
                    min: 500,
                    thickness: .3,
                    fgColor: '#2B99E6',
                    bgColor: '#303030',
                    'release':function(e) {
                        console.log(e);
                    }
                });
            });
        });
    </script>
    <style>
        body {
            background: #202020;
            padding: 100px 0;
        }
        header {
            margin: 0 auto;
            width: 960px;
            color: #808080;
            font-weight: bold;
            font-family: Arial;
        }

        header h1 {
            font-size: 44px;
        }

        #container {
            margin: 0 auto;
            padding: 0;
            width: 960px;
            border: 10px solid #303030;
            border-radius: 5px 5px 5px 5px;
            background: #000;
            box-shadow: 0px 0px 30px #2B99E6;
        }

        #imgwrapper {
            width: 460px;
            float: left;
            text-align: center;
            padding: 0;
            margin: 0;
        }

        #knobwrapper {
            width: 300px;

            margin: 0 auto;
        }

        #img {
            margin: 0 auto;
            width: 500px;
            border-radius: 5px 5px 5px 5px;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="knobwrapper">
        <input class="knob" data-width="300" data-height="300" data-skin="tron" data-displayInput="true" value="200">


    </div>
</body>
</html>