github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

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

* fix(silder): 修改提示文本相关方法的变量命名，增加部分方法的 jsdoc
pull/1536/head
yxb94616 11 months ago committed by GitHub
parent 9914a99ebd
commit 2a1bb0e985
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 118 additions and 56 deletions
Show Stats Download Patch File Download Diff File

8
docs/slider/detail/demo.md
Unescape View File

@ -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>

14
docs/slider/detail/options.md
Unescape View File

@ -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>

3
examples/slider.html
Unescape View File

@ -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'

2
src/css/layui.css
Unescape View File

@ -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;}

99
src/modules/slider.js
Unescape View File

@ -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;
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)

Write Preview
Loading…
Cancel
Save