<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 滑塊文檔 - layui.slider

      作為一個拖拽式的交互性組件,滑塊往往能給產品帶來更好的操作體驗。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 應用中的很多操作體驗,可盡情發揮。

      layui - 用心與你溝通

      亚洲图色