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)