首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 移动开发 > 移动开发 >

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

2012-07-30 
分享一款超棒的jQuery旋钮插件 - jQuery knob日期:2012-5-8??来源:GBin1.com在线演示? 本地下载 如果你也

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

日期: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 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 data-width="300" data-skin="tron" data-displayInput="true" value="200">?? ?<div>?? ?<input 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代码

....

....

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

热点排行