Transferred from: http://www.cnblogs.com/gbin1/archive/2012/05/08/2489908.html
Online Demo Local Download
If you're looking for a jquery plugin that generates beautiful knobs (knob), the jquery Knob we're introducing today is definitely a good choice. It uses canvas to help us generate cool knob effects, you can use the plug-in option or the HTML5 Data property to customize the settings plug-in properties, convenient and elegant, I am sure you will love this cool jquery plugin, if you have any questions live suggestions please leave us a message!
Key Features
- Supports read-only mode
- Two alternative callback methods: Change and release
- Support for custom options and support for configuring plug-in options using the HTML5 Data property
- Built-in different themes
- Has a good fallback mechanism for older browsers
How to use
Import the jquery and knob plugin class libraries:
<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>
Set parameters and callback methods:
$ (". Knob"). Knob ({ max:940, min:500, thickness:. 3, fgcolor: ' #2B99E6 ', bgColor: ' #303030 ', ' Release ': function (e) { $ (' #img '). Animate ({width:e});} );
Of course, you can also use the HTML5 Tag property to set the parameters as follows:
<input class= "Knob2" data-width= "All" data-fgcolor= "green" data-bgcolor= "#303030" data-skin= "Tron" data-thickness = ". 3" data-min= "data-max=" "value=" >
Demo Code HTML code
<div id= "Knobwrapper" > <input class= "knob" data-width= "+" data-skin= "Tron" data-displayinput= "true" Value= "$" > <div> <input class= "knob2" data-width= "data-fgcolor=" and "Green" data-bgcolor= " #303030 "data-skin=" Tron "data-thickness=". 3 "data-min=" "data-max="/"value=" > </div></ Div>
JavaScript code
$ (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 Code
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;}
Share an awesome jquery knob plugin-jquery Knob