插件--旋钮插件jQuery knob
来源:互联网 发布:foxtable建立数据库 编辑:程序博客网 时间:2024/05/02 04:27
插件描述:如果你也在寻找一款生成漂亮旋钮(knob)的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}); } });});
详解:
可如例子中在input中进行设置,加前缀data-
input中未进行的设置,可以在js里进行一一设置,类如最大、最小值,与value相对于,若value小于最小值,则旋转图标中心的文字以最小值为准。
thickness为圆圈的宽度
fgColor:前景色
bgColor:背景色
release:目前还不知主要的作用
0 0
- 插件--旋钮插件jQuery knob
- JQ插件:Knob旋钮按钮
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
- 滚动旋钮时禁止页面滚动-jquery.knob.js
- minimalcomps knob(旋钮)
- 关于knob.js进度插件的使用
- BeauGauge V2 “旋钮”演示程序 (Knob,旋转按钮)
- Unity3D 制作按钮开关,旋钮开关,摇杆手柄 插件
- jQuery插件 -- Cookie插件
- JQuery插件开发 + 插件
- jquery插件
- jquery 插件
- jQuery插件
- jquery 插件
- Jquery插件
- jquery 插件
- JQUERY 插件
- jquery 插件
- UNITY 文件路径整理(偷的)
- markdown怎么玩~
- 快速傅里叶变换FFT(一维)
- Hadoop、Spark、HBase与Redis的适用性见解
- 计算机组成原理3---I/O技术
- 插件--旋钮插件jQuery knob
- MyReport报表系统(三)
- shell 简单例子(五)
- IOS —— 判断设备屏幕尺寸、分辨率
- html字体代码
- 字符数组和字符串的相关函数
- 手机屏幕坐标获取方法
- MSTest.exe 命令行选项
- PL/SQL开发环境准备