分享一款超棒的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});
        }
    });
});

CSS代碼

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;

}

搞定！是不是很簡單，使用這個插件可以方便的生成旋鈕狀的特效和圖形效果，希望大家能夠應用到自己的網站中，如果你喜歡我們的jQuery插件推薦，請給我們留言！