jQuery拖動滑塊選擇數字插件代碼



70 277 93



特效描述:jQuery 拖動滑塊 選擇數字插件,jQuery拖動滑塊選擇數字插件代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="style.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/sider.jquery.min.js"></script>

3. HTML代碼

<h1>拖動滑塊快速選擇數字插件</h1>
<p>
	通過拖動滑塊快速輸入數值,并可以設置常用的數值快速選擇
</p>
<h2>案例一:默認無參數</h2>
<div class="case">
	 <div class="widget-sider" id='case1'></div>
<pre>
$("#case1").sider();</pre>
</div>	 
</div>
<h2>案例二:自定義參數</h2>
<div class="case">
	 <div class="widget-sider" id='case2'></div>
	 <pre>
$("#case2").sider({min:10,max:50,step:5,quick:[5,25,45,50],value:20});</pre>
</div>
<h2>案例三:回調函數</h2>
<div class="case" style="height:50px;">
	 <div class="widget-sider" id='case3'  style="float:left"></div>
	 <div id="callback">
	 </div>
</div>
<pre>
$("#case3").sider({
   callback:function(_this,value,status)
   {
      $("#callback").text(value);
      if(status) 
         $("#callback").css("border","1px solid #f60");
      else
         $("#callback").css("border","1px solid #d7d7d7");
   }
});			
</pre>
<h2>引用文件:</h2>
	<pre>
&lt;link rel="stylesheet" href="style.css" /&gt;
&lt;script src="jQuery-2.1.4.min.js"&gt;&lt;/script&gt;
&lt;script src="sider.jquery.min.js"&gt;&lt;/script&gt;
	</pre>
	<h2>調用代碼:</h2>
	<pre>
&lt;div class="widget-sider"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
   $(function(){
      $(".widget-sider").sider({
         min:0, //最小值
         max:50, //最大值
         step:5, //拖動步長
         quick:[5,25,45,50], //快速選擇列表
         value:20, //默認值
         callback:function(_this,value,status){ 
            //回調函數, 反回3個參數,
            //_this : 當前元素
            //value : 選取的值
            //status : 是否選擇完畢
            $("#callback").text(value);
            if(status) 
               $("#callback").css("border","1px solid #f60");
            else
               $("#callback").css("border","1px solid #d7d7d7");
         }
      });
   })
&lt;/script&gt;</pre>	  
<script>
	$(function(){
		$("#case1").sider(); 
		$("#case2").sider({
			min:10,
			max:50,
			step:5,
			quick:[5,25,45,50],
			value:40
		});
		$("#case3").sider({
			callback:function(_this,value,status){
				$("#callback").text(value);
				if(status) 
					$("#callback").css("border","1px solid #f60");
				else
					$("#callback").css("border","1px solid #d7d7d7");
			}
		});		
	})
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片拖動 圖片拖拽 文本框 text文本框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子