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

转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html

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

分享一款超棒的jQuery旋钮插件 - jQuery knob
$(".knob").knob({
max: 940,
min: 500,
thickness: .3,
fgColor: '#2B99E6',
bgColor: '#303030',
'release':function(e){
$('#img').animate({width:e});
}
});
分享一款超棒的jQuery旋钮插件 - jQuery knob

当然,你也可以使用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代码

分享一款超棒的jQuery旋钮插件 - jQuery knob
<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>
分享一款超棒的jQuery旋钮插件 - jQuery knob

Javascript代码

分享一款超棒的jQuery旋钮插件 - jQuery knob
$(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});
}
});
});
分享一款超棒的jQuery旋钮插件 - jQuery knob

CSS代码

分享一款超棒的jQuery旋钮插件 - jQuery knob
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旋钮插件 - jQuery knob

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

欢迎访问GBin1.com
上一篇:嵌入式linux——点亮led灯(二)


下一篇:自动更新前加密:Clickonce用法