feat(silder): 新增提示文本始终显示控制属性 (#1520)

* feat(silder): 新增提示文本始终显示控制属性

* fix(silder): 修改提示文本相关方法的变量命名，增加部分方法的 jsdoc

docs/slider/detail/demo.md

@@ -96,6 +96,9 @@ layui.use(function(){
 <hr class="ws-space-16">
 <div id="ID-slider-demo-setTips-2"></div>
 <div id="ID-slider-demo-setTips-result"></div>
+<hr class="ws-space-16">
+<hr class="ws-space-16">
+<div id="ID-slider-demo-setTips-tipsAlways"></div>
 
 <!-- import layui -->
 <script>
@@ -119,6 +122,11 @@ layui.use(function(){
       $('#ID-slider-demo-setTips-result').html('当前数值：'+ value);
     }
   });
+  slider.render({
+    elem: '#ID-slider-demo-setTips-tipsAlways',
+    tips: true, // 开启提示文本
+    tipsAlways: true // 开启始终显示提示文本
+  });
 });
 </script>
   </textarea>

docs/slider/detail/options.md

@@ -135,6 +135,20 @@
 
 `true`
 
+</td>
+    </tr>
+    <tr>
+<td>tipsAlways <sup>2.9.3+</sup></td>
+<td>
+
+是否始终显示提示文本，要开启此功能，tips 必须设置为 `true` 才能生效
+
+</td>
+<td>boolean</td>
+<td>
+
+`false`
+
 </td>
     </tr>
     <tr>

examples/slider.html

@@ -32,7 +32,8 @@ layui.use('slider', function(){
     //,value: 11 //[40, 60] //初始值
     //,step: 1 //间隔值
     //,showstep: true //间隔点
-    //,tips: false //关闭提示文本
+    ,tips: true //开启提示文本
+    ,tipsAlways: true //开启提示文本始终显示
     ,input: true //输入框
     //,range: true //范围选择
     //,theme: '#FF5722'

src/css/layui.css

@@ -1569,7 +1569,7 @@ body .layui-util-face  .layui-layer-content{padding:0; background-color:#fff; co
 .layui-slider-wrap-btn:hover,
 .layui-slider-wrap-btn.layui-slider-hover{transform: scale(1.2);}
 .layui-slider-wrap-btn.layui-disabled:hover{transform: scale(1) !important;}
-.layui-slider-tips{position: absolute; top: -42px; z-index: 77777777; white-space:nowrap; display: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;}
+.layui-slider-tips{position: absolute; top: -42px; z-index: 77777777; white-space:nowrap; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;}
 .layui-slider-tips:after{content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #000 transparent transparent transparent;}
 .layui-slider-input{width: 70px; height: 32px; border: 1px solid #eee; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -14px; box-sizing: border-box;}
 .layui-slider-input-btn{position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #eee;}

src/modules/slider.js

@@ -72,6 +72,7 @@ layui.define(['jquery', 'lay'], function(exports){
     step: 1, //间隔值
     showstep: false, //间隔点开启
     tips: true, //文字提示，开启
+    tipsAlways: false, //文字提示，始终开启
     input: false, //输入框，关闭
     range: false, //范围选择，与输入框不能同时开启，默认关闭
     height: 200, //配合 type:"vertical" 使用，默认200px
@@ -139,7 +140,7 @@ layui.define(['jquery', 'lay'], function(exports){
     var theme = options.disabled ? '#c2c2c2' : options.theme;
 
     //滑块
-    var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="'+ SLIDER_TIPS +'"></div>' : '') +
+    var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="'+ SLIDER_TIPS +'" '+ (options.tipsAlways ? '' : 'style="display:none;"') +'></div>' : '') +
     '<div class="layui-slider-bar" style="background:'+ theme +'; '+ (options.type === 'vertical' ? 'height' : 'width') +':'+ scale +';'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
     '<div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>' : '') +'</div>';
 
@@ -201,36 +202,72 @@ layui.define(['jquery', 'lay'], function(exports){
       that.elemTemp.find('.' + SLIDER_WRAP_BTN).addClass(DISABLED);
     }
 
-    //划过滑块显示数值
+    /**
-    var timer;
+     * @description 设置提示文本内容
-    that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
+     * @param {Element} sliderWrapBtnElem 提示文本节点元素
+     */
+    function setSliderTipsTxt(sliderWrapBtnElem) {
+      var value = sliderWrapBtnElem.parent().data('value');
+      var tipsTxt = options.setTips ? options.setTips(value) : value;
+      that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
+    }
+
+    /**
+     * @description 计算提示文本元素的 position left
+     * @param {Element} sliderWrapBtnElem 提示文本节点元素
+     */
+    function calcSliderTipsLeft(sliderWrapBtnElem){
       var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth;
       var sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP);
-      var tipsLeft = options.type === 'vertical' ? (sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()) : $(this).parent()[0].offsetLeft;
+      var tipsLeft = options.type === 'vertical' ? (sliderWidth - sliderWrapBtnElem.parent()[0].offsetTop - sliderWrap.height()) : sliderWrapBtnElem.parent()[0].offsetLeft;
       var left = tipsLeft / sliderWidth * 100;
-      var value = $(this).parent().data('value');
+      return left
-      var tipsTxt = options.setTips ? options.setTips(value) : value;
+    }
-      that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
 
-      clearTimeout(timer);
+    /**
-      timer = setTimeout(function(){
+     * @description 设置提示文本元素的 position left
-        if(options.type === 'vertical'){
+     * @param {number} left 要设置的 left 的大小
-          that.elemTemp.find('.' + SLIDER_TIPS).css({
+     */
-            "bottom": left + '%',
+    function setSliderTipsLeft(left) {
-            "margin-bottom": "20px",
+      if(options.type === 'vertical'){
-            "display": "inline-block"
+        that.elemTemp.find('.' + SLIDER_TIPS).css({
-          });
+          "bottom": left + '%',
-        } else {
+          "margin-bottom": "20px",
-          that.elemTemp.find('.' + SLIDER_TIPS).css({
+          "display": "inline-block"
-            "left": left + '%',
+        });
-            "display": "inline-block"
+      } else {
-          });
+        that.elemTemp.find('.' + SLIDER_TIPS).css({
-        }
+          "left": left + '%',
-      }, 300);
+          "display": "inline-block"
-    }).on('mouseout', function(){
+        });
-      clearTimeout(timer);
+      }
-      that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
+    }
-    });
+
+    //判断是否要始终显示提示文本
+    if(options.tips){
+      if(options.tipsAlways){
+        var sliderWrapBtnElem = that.elemTemp.find('.' + SLIDER_WRAP_BTN);
+        setSliderTipsTxt(sliderWrapBtnElem)
+        var left = calcSliderTipsLeft(sliderWrapBtnElem);
+        setSliderTipsLeft(left)
+      }else{
+        //划过滑块显示数值
+        var timer;
+        that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
+          setSliderTipsTxt($(this))
+          var left = calcSliderTipsLeft($(this));
+          clearTimeout(timer);
+          timer = setTimeout(function(){
+            setSliderTipsLeft(left)
+          }, 300);
+        }).on('mouseout', function(){
+          clearTimeout(timer);
+          if(!options.tipsAlways){
+            that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
+          }
+        });
+      }
+    }
   };
 
   //滑块滑动
@@ -366,9 +403,11 @@ layui.define(['jquery', 'lay'], function(exports){
 
         var up = function(delay){
           othis.removeClass(ELEM_HOVER);
-          setTimeout(function(){
+          if(!options.tipsAlways){
-            sliderAct.find('.' + SLIDER_TIPS).hide();
+            setTimeout(function(){
-          }, delay);
+              sliderAct.find('.' + SLIDER_TIPS).hide();
+            }, delay);
+          }
         };
 
         createMoveElem(othis, move, up)