-
3.12 滑块插件
-
作为一个拖拽式的交互性组件,滑块往往能给产品带来更好的操作体验。layui 深以为然,slider 模块包含了你能想到的大部分功能,尽管它可以作为一个独立的个体,但很多时候它往往会出现 form 元素中,想象一下吧。
模块加载名称:slider
注意:slider 为 layui 2.4.0 新增模块
使用
通过对 slider 模块的使用,你可以在页面构建出可拖动的滑动元素,如下是一个最基本的用法:
小例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滑块</title> <link rel="stylesheet" href="../src/css/layui.css"> </head> <body> <div id="slideTest1"></div> <script src="../src/layui.js"></script> <script> layui.use('slider', function(){ var slider = layui.slider; //渲染 slider.render({ elem: '#slideTest1' //绑定元素 }); }); </script> </body> </html>
基础参数
slider 组件支持以下参数参数选项 说明 类型 默认值 elem 指向容器选择器 string/object - type 滑块类型,可选值有:default(水平滑块)、vertical(垂直滑块) string default min 滑动条最小值,正整数,默认为 0 number 0 max 滑动条最大值 number 100 range 是否开启滑块的范围拖拽,若设为 true,则滑块将出现两个可拖拽的环 boolean false value 滑块初始值,默认为数字,若开启了滑块为范围拖拽(即 range: true),则需赋值数组,异表示开始和结尾的区间,如:value: [30, 60] number/Array 0 step 拖动的步长 number 1 showstep 是否显示间断点 boolean false tips 是否显示文字提示 boolean true input 是否显示输入框(注意:若 range 参数为 true 则强制无效)
点击输入框的上下按钮,以及输入任意数字后回车或失去焦点,均可动态改变滑块boolean false height 滑动条高度,需配合 type:"vertical" 参数使用 number 200 disabled 是否将滑块禁用拖拽 boolean false theme 主题颜色,以便用在不同的主题风格下 string #009688 自定义提示文本
当鼠标放在圆点和滑块拖拽时均会触发提示层。其默认显示的文本是它的对应数值,你也可以自定义提示内容:
例子
slider.render({ elem: '#slideTest1' ,setTips: function(value){ //自定义提示文本 return value + '%'; } });
数值改变的回调
在滑块数值被改变时触发。该回调非常重要,可动态获得滑块当前的数值。你可以将得到的数值,赋值给隐藏域,或者进行一些其它操作。
小例子
//当滑块为普通模式,回调返回的 value 是一个数值 slider.render({ elem: '#slideTest1' ,change: function(value){ console.log(value) //动态获取滑块数值 //do something } }); //当滑块为范围模式,回调返回的 value 是一个数组,包含开始和结尾 slider.render({ elem: '#slideTest1' ,range: true ,change: function(value){ console.log(value[0]) //得到开始值 console.log(value[1]) //得到结尾值 //do something } });
实例方法
执行 slider 实例时,会返回一个当前实例的对象,里面包含针对当前实例的方法和属性。
语法:var ins1 = slider.render(options);
实例方法和属性
var ins1 = slider.render(options); //获得实例对象 ins1.config //获得当前实例的配置项 ins1.setValue(nums); //动态给滑块赋值
动态改变滑块数值
你可以通过外部方法动态改变滑块数值,如:
var ins1 = slider.render({ elem: '#test1' //… }); //改变指定滑块实例的数值 ins1.setValue(20) //若滑块开启了范围(range: true) ins1.setValue(20, 0) //设置开始值 ins1.setValue(60, 1) //设置结尾值
结语
layui.slider 可以大幅度提升你 Web 应用中的很多操作体验,可尽情发挥。
- 留下你的读书笔记
- 你还没登录,点击这里
-
用户笔记留言