<!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. 原生JS 的cookie和jq的cookie,

    COOKIE基础及应用:1.什么是COOKIE==>页面用来保存信息,比如:自动登录,记住用户名2.COOKIE的特性:  --同一个网站中,所有的页面共享同一套cookie  --数量,大小有 ...

  2. 51Nod 1002:数塔取数问题(DP)

    1002 数塔取数问题  基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 一个高度为N的由正整数组成的三角形,从上走到下,求经过的数字和的最大值. 每 ...

  3. POJ 3617:Best Cow Line(贪心,字典序)

    Best Cow Line Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 30684   Accepted: 8185 De ...

  4. C# NPOI导出Excel和EPPlus导出Excel

    转自:http://www.cnblogs.com/tanpeng/p/6155749.html 系统中经常会使用导出Excel的功能.之前使用的是NPOI,但是导出数据行数多就报内存溢出. 最近看到 ...

  5. 海思3518EV200 SDK中获取和保存H.264码流详解

    /****************************************** step 2: Start to get streams of each channel. ********** ...

  6. 【柚子木字幕組】【BBC】 Are Our Kids Tough Enough? Chinese School 英國的孩子足夠堅強嗎?中式教學

    https://www.youtube.com/watch?v=ypT6c4NZ6jk 最近很火的一个bbc纪录片 讲的是英国学校请几个中国老师到他们那里试行中国教育的故事 作为学习英文的素材很不错

  7. 【转】每天一个linux命令(41):ps命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/19/2824418.html Linux中的ps命令是Process Status的缩写.ps命令 ...

  8. HBase常用指令

    disable 'smsFlow'drop 'smsFlow'create 'smsFlow','info','partition'count 'smsFlow'scan 'smsFlow' trun ...

  9. bzoj 3277 串 && bzoj 3473 字符串 && bzoj 2780 [Spoj]8093 Sevenk Love Oimaster——广义后缀自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3277 https://www.lydsy.com/JudgeOnline/problem.p ...

  10. java初始化块执行顺序

    java中初始化块的执行顺序在构造器之前,多个初始化块之间定义在前的先执行.如下: public class InitialBlockTest { // The first one { System. ...