jquery knob旋钮插件
<!DOCTYPE html>
<html>
<head>
<title>jQuery Knob 尝试</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="dist/jquery.knob.min.js"></script>
<script>
$(function() {
$(".knob").knob({
max: 940,
min: 500,
thickness: .3,
fgColor: '#2B99E6',
bgColor: '#303030',
// "cursor":true,
'release':function(e){
console.log("release : " + value);
}
}); $(".knob2").knob({
'release':function(e){
// $('#img').animate({width:e});
console.log("release : " + value);
}
});
});
</script> </head>
<body> <div >
<input class="knob" data-width="200" data-skin="tron" data-displayInput="true" value="200"> <input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#ffec03" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200"> </div> </body>
</html>
参数设置可以在input里直接设置也可以用js初始化。
效果图

源码下载==》下载
jquery knob旋钮插件的更多相关文章
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示 本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- 提升用户体验的最佳免费 jQuery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery 人脸识别插件,支持图片和视频
jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- 推荐15款最佳的 jQuery 分步引导插件
当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
随机推荐
- GET_DDL提取建表语句:ddl
创建对象的语句就是了 提取表 set line 200 pages 50000 wrap on long 999999 serveroutput on SQL> select dbms_meta ...
- Qt QML referenceexamples attached Demo hacking
/********************************************************************************************* * Qt ...
- 【opencv基础】imread-第二个参数
问题1: 显示的是灰色的界面,不能正常显示图像. 解决方法:在imshow之后加上waitKey即可.原因here: Note:This function should be followed by ...
- Photoshop通道抠出散乱的儿童头发
抠图之前仔细分析是必不可少的.要了解清楚需要抠取部分的构成,然后选择最快捷的方法.教程素材图片人物头发色调比较单一,背景色也比较单一,用通道抠图是非常快捷的. 最终效果1 最终效果2 原图 一.复制图 ...
- 重写equal()时为什么也得重写hashCode()之深度解读equal方法与hashCode方法渊源
今天这篇文章我们打算来深度解读一下equal方法以及其关联方法hashCode(),我们准备从以下几点入手分析: 1.equals()的所属以及内部原理(即Object中equals方法的实现原理) ...
- window.open()与window.showModalDialog
弹出窗口两种方式: 1.window.showModalDialog: var feature = "dialogWidth:615px;dialogHeight:505px ...
- PHP中数组的各种用法
$a = 'false';if($a){ echo '好坑';}输出好坑,得转换成布尔值才行哦. in_array $people = array("Bill", "St ...
- TweenMax.allTo
需要多个MC进行相同的缓动.比如下面这个游戏菜单.三个按钮的缓动是相同的,都缓动到同一个x坐标位置.然后同时有缓动出舞台. 如果有TweenLite实现的话,需要 if (is ...
- 【转】每天一个linux命令(49):at命令
原文网址:http://www.cnblogs.com/peida/archive/2013/01/05/2846152.html 在windows系统中,windows提供了计划任务这一功能,在控制 ...
- Angularjs 事件指令
1. 点击事件 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...