插件--旋鈕插件jQuery knob

插件描述：如果你也在尋找一款生成漂亮旋鈕(knob)的jQuery插件的話，那麼今天我們介紹的jQuery knob肯定是一個不錯的選擇。

如果你也在尋找一款生成漂亮旋鈕(knob)的jQuery插件的話，那麼今天我們介紹的jQuery knob肯定是一個不錯的選擇。它使用canvas幫助我們生成超酷的旋鈕特效，你可以使用插件選項或者HTML5的data屬性來自定義設置插件屬性，方便簡捷並且優雅，我相信大家肯定會喜歡這個超酷的jQuery插件，如果你有任何問題活着建議請給我們留言！

主要特性

支持只讀模式

兩個供選擇的callback方法：change和release

支持自定義選項並且支持使用HTML5的data屬性來配置插件選項

內建不同的主題

對於老的瀏覽器擁有不錯的fallback機制

如何使用

導入jQuery和knob插件類庫：

<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>

設定參數和callback方法：

$(".knob").knob({
    max: 940,
    min: 500,
    thickness: .3,
    fgColor: '#2B99E6',
    bgColor: '#303030',
    'release':function(e){
        $('#img').animate({width:e});
    }
});

當然，你也可以使用HTML5的標籤屬性來設置參數，如下：

<input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#303030" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200">

HTML代碼

<div id="knobwrapper">
    <input class="knob" data-width="300" data-skin="tron" data-displayInput="true" value="200">
    <div>
    <input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#303030" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200">
    </div>
</div>

Javascript代碼

$(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});
        }
    });
});

詳解：

可如例子中在input中進行設置，加前綴data-

input中未進行的設置，可以在js裏進行一一設置，類如最大、最小值，與value相對於，若value小於最小值，則旋轉圖標中心的文字以最小值爲準。

thickness爲圓圈的寬度

fgColor：前景色

bgColor：背景色

release：目前還不知主要的作用