在線演示 本地下載

如果你也在尋找一款生成漂亮旋鈕(knob)的jQuery插件的話，那么今天我們介紹的 jQuery knob 肯定是一個(gè)不錯(cuò)的選擇。它使用canvas幫助我們生成超酷的旋鈕特效，你可以使用插件選項(xiàng)或者HTML5的data屬性來(lái)自定義設(shè)置插件屬性，方便簡(jiǎn)捷并且優(yōu)雅，我相信大家肯定會(huì)喜歡這個(gè)超酷的jQuery插件，如果你有任何問(wèn)題活著建議請(qǐng)給我們留言！

主要特性

• 支持只讀模式
• 兩個(gè)供選擇的callback方法：change和release
• 支持自定義選項(xiàng)并且支持使用HTML5的data屬性來(lái)配置插件選項(xiàng)
• 內(nèi)建不同的主題
• 對(duì)于老的瀏覽器擁有不錯(cuò)的fallback機(jī)制

如何使用

導(dǎo)入jQuery和knob插件類(lèi)庫(kù)：

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

設(shè)定參數(shù)和callback方法：

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

當(dāng)然，你也可以使用HTML5的標(biāo)簽屬性來(lái)設(shè)置參數(shù)，如下：

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

  

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

來(lái)源： 分享一款超棒的jQuery旋鈕插件 - jQuery knob

分享一款超棒的jQuery旋鈕插件 - jQuery knob