020-滑块
1. 作為一個拖拽式的交互性組件, 滑塊往往能給產品帶來更好的操作體驗。slider模塊包含了你能想到的大部分功能, 盡管它可以作為一個獨立的個體, 但很多時候它往往會出現form元素中。
2. 模塊加載名稱：slider。
3. 基礎參數
3.1. slider組件支持以下參數:
4. 自定義提示文本方法 - setTips
4.1. 當鼠標放在圓點和滑塊拖拽時均會觸發提示層。其默認顯示的文本是它的對應數值, 你也可以自定義提示內容:
<script type="text/javascript">layui.use(['slider'], function() {var slider = layui.slider;// 渲染slider.render({elem: '#test2' // 指向容器選擇器,setTips: function(value){ //自定義提示文本return value + '%';}});}); </script>5. 數值改變的回調函數 - change
5.1. 在滑塊數值被改變時觸發。該回調非常重要, 可動態獲得滑塊當前的數值:
<script type="text/javascript">layui.use(['slider'], function() {var slider = layui.slider;// 渲染slider.render({elem: '#test2' // 指向容器選擇器,change: function(value){console.log(value[0]) //得到開始值console.log(value[1]) //得到結尾值}});}); </script>6. 實例方法
6.1. 執行slider實例時, 會返回一個當前實例的對象, 里面包含針對當前實例的方法和屬性。
6.2. 語法: var ins = slider.render(options);
var ins = slider.render(options); // 獲得實例對象ins.config // 獲得當前實例的配置項7. 動態改變滑塊數值 - setValue
7.1. 你可以通過外部方法動態改變滑塊數值:
<script type="text/javascript">layui.use(['slider'], function() {var slider = layui.slider;// 渲染var ins = slider.render({elem: '#test1' // 指向容器選擇器});// 改變指定滑塊實例的數值ins.setValue(20);// 渲染var ins1 = slider.render({elem: '#test2' // 指向容器選擇器,range: true // 是否開啟滑塊的范圍拖拽, 若設為true, 則滑塊將出現兩個可拖拽的環});// 若滑塊開啟了范圍range: trueins1.setValue(1, 0) // 設置開始值ins1.setValue(6, 1) // 設置結尾值}); </script>8. 例子
8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>滑塊 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div style="margin-top: 60px;" id="test1"></div> <br /><div id="test2"></div><script type="text/javascript">layui.use(['slider'], function() {var slider = layui.slider;// 渲染var ins = slider.render({elem: '#test1' // 指向容器選擇器,type: 'vertical' // 滑塊類型, 可選值有: default(水平滑塊)、vertical(垂直滑塊),input: true // 是否顯示輸入框,height: 300 // 滑動條高度,theme: '#000000' // 主題顏色});// 改變指定滑塊實例的數值ins.setValue(20);// 渲染var ins1 = slider.render({elem: '#test2' // 指向容器選擇器,type: 'default' // 滑塊類型, 可選值有: default(水平滑塊)、vertical(垂直滑塊),min: 0 // 滑動條最小值, 正整數, 默認為0,max: 100 // 滑動條最大值,range: true // 是否開啟滑塊的范圍拖拽, 若設為true, 則滑塊將出現兩個可拖拽的環,value: [30, 60] // 滑塊初始值,step: 10 // 拖動的步長,showstep: true // 是否顯示間斷點,tips: true // 是否顯示文字提示,setTips: function(value){ //自定義提示文本return value + '%';},change: function(value){console.log(value[0]) //得到開始值console.log(value[1]) //得到結尾值}});// 若滑塊開啟了范圍range: trueins1.setValue(1, 0) // 設置開始值ins1.setValue(6, 1) // 設置結尾值}); </script></body> </html>8.2. 效果圖
總結
