分享一款超棒的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>

Javascript代码

$(function() {

    $(".knob").knob({

        max: 940,

        min: 500,

        thickness: .3,

        fgColor: '#2B99E6',

        bgColor: '#303030',

        'release':function(e){

            $('#img').animate({width:e});

        }

    });

    

    $(".knob2").knob({

        'release':function(e){

            $('#img').animate({width:e});

        }

    });

});

CSS代码

body{

    background: #202020;

}

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;

    float: right;

    text-align: center;

}



#img{

    margin: 0 auto;

    width: 500px;

    border-radius: 5px 5px 5px 5px;

}



.clear{

    clear:both;



}

搞定！是不是很简单，使用这个插件可以方便的生成旋钮状的特效和图形效果，希望大家能够应用到自己的网站中，如果你喜欢我们的jQuery插件推荐，请给我们留言！