jQuery拖动滑块选择数字插件代码



65 259 87



特效描述: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

加群请备注:从官网了解到