<!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旋钮插件的更多相关文章

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

    转自:http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html 在线演示  本地下载 如果你也在寻找一款生成漂亮旋钮(knob)的jQu ...

  2. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  3. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  4. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  5. jQuery 人脸识别插件，支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  6. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  7. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  8. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  9. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

随机推荐

  1. iOS-----使用CFNetwork实现TCP协议的通信

    使用CFNetwork实现TCP协议的通信 TCP/IP通信协议是一种可靠的网络协议,它在通信的两端各建立一个通信接口,从而在通信的两端之间形成网络虚拟链路.一旦建立了虚拟的网络链路,两端的程序就可以 ...

  2. matlab max()

    max()函数 (1)可以找出矩阵元素中每列的最大值 max(A) ,max(A,[],dim ),带返回值的[C,I]=max(A).[C,I]=max(A,[],dim) max(A,[],dim ...

  3. 一致性哈希算法(Consistent Hashing Algorithm)

    一致性哈希算法(Consistent Hashing Algorithm) 浅谈一致性Hash原理及应用   在讲一致性Hash之前我们先来讨论一个问题. 问题:现在有亿级用户,每日产生千万级订单,如 ...

  4. 放苹果问题 DP计数 m个苹果放在n个盘子里，苹果，盘子相同，盘子可为空

    详细的解释放苹果问题的链接:苹果可相同可不同,盘子可相同可不同,盘子可空和不可空,都有详细的说明··· http://www.cnblogs.com/celia01/archive/2012/02/1 ...

  5. hdu 5182 结构体排序

    BC # 32 : 打 BC 的时候没看全三个关键字,WA 了五发,花了近一小时,问了一下才发现少看一个条件,于是顺利给跪. 题意:给出若干城市的两次空气质量,首先按空气质量差排序,若相等则按第二次排 ...

  6. 【BZOJ1703】【usaco2007margold】ranking the cows 奶牛的魅力排名

    想的时间比较长所以看题解了= = 原题: Fj有N(N<=1000)头牛,每头牛都有独一无二的正整数 魅力值,Fj想让他们按 魅力值排序. Fj已经知道M(1<=M<=10000)对 ...

  7. java泛型（一）、泛型的基本介绍和使用

    现在开始深入学习java的泛型了,以前一直只是在集合中简单的使用泛型,根本就不明白泛型的原理和作用.泛型在java中,是一个十分重要的特性,所以要好好的研究下. 泛 型的定义:泛型是JDK 1.5的一 ...

  8. 【python】面试常考数据结构算法

    这里整理的都是基础的不能再基础的算法,目的就是进行一个回忆,同时作为剑指offer的一个补充~嘿嘿~ 查找算法二分查找# 实现一个二分查找# 输入:一个顺序list# 输出: 待查找的元素的位置def ...

  9. day7 python学习

    今日内容# 枚举 此代码可以用于对有一定值的列表进行按带序列号的方式打印出来 lis=['手机','电脑','潜艇','手表'] for index,i in enumerate(lis,1): pr ...

  10. linux 查看文件夹大小 du -h --max-depth=1 ./

    du:查询文件或文件夹的磁盘使用空间 如果当前目录下文件和文件夹很多,使用不带参数du的命令,可以循环列出所有文件和文件夹所使用的空间.这对查看究竟是那个地方过大是不利的,所以得指定深入目录的层数,参 ...