当前位置:主页 > jquery插件 > 表单按钮 >

jQuery数字滑块选择插件sider.jquery.js

栏目分类:表单按钮   模板编号:JQ00077    发布日期:2017-08-22   来源:网络   浏览次数:次     在线预览
通过拖动滑块快速输入数值,并可以设置常用的数值快速选择

拖动滑块快速选择数字插件通过拖动滑块快速输入数值,并可以设置常用的数值快速选择,也可以设置回调函数

引用文件:

<link rel="stylesheet" href="style.css" />
<script src="jQuery-2.1.4.min.js"></script>
<script src="sider.jquery.min.js"></script>

调用代码:

<div class="widget-sider"></div>
<script type="text/javascript">
   $(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");
         }
      });
   })
</script>


在线演示 立即下载
打赏本站
云盘密码:n4hi

标签:

Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载