diff --git a/docs/slider/detail/demo.md b/docs/slider/detail/demo.md index 493f96d9..1fabec42 100644 --- a/docs/slider/detail/demo.md +++ b/docs/slider/detail/demo.md @@ -77,7 +77,7 @@ layui.use(function(){ elem: '#ID-slider-demo-step-1', step: 10 // 步长 }); - + slider.render({ elem: '#ID-slider-demo-step-2', step: 10, // 步长 @@ -96,6 +96,9 @@ layui.use(function(){
+
+
+
@@ -182,7 +190,7 @@ layui.use(function(){
   
-
\ No newline at end of file + diff --git a/docs/slider/detail/options.md b/docs/slider/detail/options.md index 3d781188..02f061e0 100644 --- a/docs/slider/detail/options.md +++ b/docs/slider/detail/options.md @@ -11,13 +11,13 @@ 描述 类型 默认值 - + elem - + 绑定元素选择器或 DOM 对象 @@ -26,7 +26,7 @@ type - + 滑块类型,可选值有: - `default` 水平滑块(默认) @@ -43,7 +43,7 @@ value - + 滑块初始值。 - 默认可直接设置数值,如: `value: 50` @@ -56,7 +56,7 @@ range - + 是否开启滑块的区间选择。若开启,则滑块将出现两个可拖拽的点。 @@ -70,7 +70,7 @@ min - + 滑块的最小值 @@ -84,7 +84,7 @@ max - + 滑块的最大值 @@ -98,7 +98,7 @@ step - + 滑块单次拖动的步长 @@ -112,7 +112,7 @@ showstep - + 是否显示间断点 @@ -126,7 +126,7 @@ tips - + 鼠标移入当前圆点,是否显示当前值 @@ -135,12 +135,26 @@ `true` + + + +tipsAlways 2.9.3+ + + +是否始终显示提示文本,要开启此功能,tips 必须设置为 `true` 才能生效 + + +boolean + + +`false` + input - + 是否显示滑块的数字输入框。 注:若设置 `range: true` 则该属性强制无效。 @@ -154,7 +168,7 @@ height - + 滑动条高度。 必须设置 `type: 'vertical'` 属性,即垂直滑块时有效。 @@ -168,7 +182,7 @@ theme - + 滑块的主题色。 @@ -178,7 +192,7 @@ disabled - + 是否禁用滑块 @@ -192,13 +206,13 @@ setTips - + 滑块拖拽时设置提示文本的回调函数。并返回当前的 `value` 参数。用法详见:[#设置提示文本](#demo-setTips) - +
@@ -212,7 +226,7 @@ change - + 滑块数值发生改变的回调函数。并返回当前的 `value` 参数。 ``` @@ -232,7 +246,7 @@ slider.render({ done 2.8+ - + 滑块拖拽完毕的回调函数。并返回当前的 `value` 参数。滑块拖动过程中不会触发。 ``` @@ -250,4 +264,4 @@ slider.render({ - \ No newline at end of file + diff --git a/examples/slider.html b/examples/slider.html index 72556009..8fd2b671 100644 --- a/examples/slider.html +++ b/examples/slider.html @@ -23,7 +23,7 @@ layui.use('slider', function(){ var slider = layui.slider; - + var sliderInst = slider.render({ elem: '#slideTest1' //,type: 'vertical' @@ -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' @@ -52,7 +53,7 @@ layui.use('slider', function(){ //,disabled: true //禁用滑块 //,theme: '#c00' //主题色 }); - + //sliderInst.setValue(30); diff --git a/src/css/layui.css b/src/css/layui.css index 8622f364..ba98c4ac 100644 --- a/src/css/layui.css +++ b/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;} diff --git a/src/modules/slider.js b/src/modules/slider.js index 93455543..aaaf7542 100644 --- a/src/modules/slider.js +++ b/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 = '
'+ (options.tips ? '
' : '') + + var temp = '
'+ (options.tips ? '
' : '') + '
' + '
'+ (options.range ? '
' : '') +'
'; @@ -201,36 +202,72 @@ layui.define(['jquery', 'lay'], function(exports){ that.elemTemp.find('.' + SLIDER_WRAP_BTN).addClass(DISABLED); } - //划过滑块显示数值 - var timer; - that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){ + /** + * @description 设置提示文本内容 + * @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'); - var tipsTxt = options.setTips ? options.setTips(value) : value; - that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt); + return left + } - clearTimeout(timer); - timer = setTimeout(function(){ - if(options.type === 'vertical'){ - that.elemTemp.find('.' + SLIDER_TIPS).css({ - "bottom": left + '%', - "margin-bottom": "20px", - "display": "inline-block" - }); - } else { - that.elemTemp.find('.' + SLIDER_TIPS).css({ - "left": left + '%', - "display": "inline-block" - }); - } - }, 300); - }).on('mouseout', function(){ - clearTimeout(timer); - that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none"); - }); + /** + * @description 设置提示文本元素的 position left + * @param {number} left 要设置的 left 的大小 + */ + function setSliderTipsLeft(left) { + if(options.type === 'vertical'){ + that.elemTemp.find('.' + SLIDER_TIPS).css({ + "bottom": left + '%', + "margin-bottom": "20px", + "display": "inline-block" + }); + } else { + that.elemTemp.find('.' + SLIDER_TIPS).css({ + "left": left + '%', + "display": "inline-block" + }); + } + } + + //判断是否要始终显示提示文本 + 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(){ - sliderAct.find('.' + SLIDER_TIPS).hide(); - }, delay); + if(!options.tipsAlways){ + setTimeout(function(){ + sliderAct.find('.' + SLIDER_TIPS).hide(); + }, delay); + } }; createMoveElem(othis, move, up)