Share an awesome jquery knob plugin-jquery Knob

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