分享一款超棒的jQuery旋钮插件 - jQuery knob
来源:互联网 发布:小李淘宝直播开通 编辑:程序博客网 时间:2024/05/02 03:44
在线演示 本地下载
如果你也在寻找一款生成漂亮旋钮(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插件推荐,请给我们留言!
来源:分享一款超棒的jQuery旋钮插件 - jQuery knob
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
- 插件--旋钮插件jQuery knob
- 分享一款超棒的jQuery Google地图插件:Gmaps
- 滚动旋钮时禁止页面滚动-jquery.knob.js
- JQ插件:Knob旋钮按钮
- JQuery---分享13款最新的超棒jQuery插件
- 分享一款jQuery的UI插件:Ninja UI
- 分享一款基于jQuery的QQ表情插件
- 分享一款基于jQuery的QQ表情插件
- 另外一款超棒的响应式布局jQuery插件 - Freetile.js
- 分享一个jQuery的超酷分页插件 - jPages
- 分享一款jquery日历控件(超赞)
- minimalcomps knob(旋钮)
- 分享一个超棒的免费jQuery幻灯插件:Nivo Slider
- 分享一个超棒的响应式幻灯jQuery插件 - refineslide
- 分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav
- 【简报】一款超灵活的jQuery幻灯插件: Really Simple Slideshow
- 分享另外一个jQuery的超酷幻灯插件:jQuery Chop Slider
- w7、ubuntu双系统
- 再牛逼的伟人,也有苦逼的青春之物理版【转载】
- MyEclipse 6.5添加JRE
- QtCreator是个很不错的IDE
- warning C4305: 'initializing' : truncation from 'const double' to 'float'
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
- Program received signal SIGPIPE, Broken pipe
- FLEX某些components工作不正常
- Flex两种与后台JAVA交互的方式 .
- domino中上传控件文件拆离的LS代码
- struts2 message 页面输出
- Visual Studio 2010 简体中文版上Windows项目包含本地系统必备组件发布失败处理方法
- vi编辑器命令大全
- Ubuntu下怎么搭载Android NDK开发环境详解