分享一款超棒的jQuery旋钮插件 - jQuery knob

最新推荐文章于 2024-08-15 09:30:48 发布

weixin_34254823

最新推荐文章于 2024-08-15 09:30:48 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/gbin1/blog/56791

本文介绍了一款基于jQuery的旋钮插件——jQuery Knob，该插件使用canvas技术生成美观的旋钮效果，支持多种自定义设置，并提供丰富的主题和回调方法，适用于现代网页设计。

为什么80%的码农都做不了架构师？>>>

日期：2012-5-8 来源：GBin1.com

分享一款超棒的jQuery旋钮插件 - jQuery knob

在线演示本地下载

如果你也在寻找一款生成漂亮旋钮(knob)的jQuery插件的话，那么今天我们介绍的jQuery knob肯定是一个不错的选择。它使用canvas帮助我们生成超酷的旋钮特效，你可以使用插件选项或者HTML5的data属性来自定义设置插件属性，方便简捷并且优雅，我相信大家肯定会喜欢这个超酷的jQuery插件，如果你有任何问题活着建议请给我们留言！

主要特性

支持只读模式
两个供选择的callback方法：change和release
支持自定义选项并且支持使用HTML5的data属性来配置插件选项
内建不同的主题
对于老的浏览器拥有不错的fallback机制

如何使用

导入jQuery和knob插件类库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="js/jquery.knob-1.0.1.js"></script>

设定参数和callback方法：

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

当然，你也可以使用HTML5的标签属性来设置参数，如下：

<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">

演示代码

HTML代码

<div id="knobwrapper">
    <input class="knob" data-width="300" data-skin="tron" data-displayInput="true" value="200">
    <div>
    <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">
    </div>
</div>