mirror of https://github.com/layui/layui
Merge branch 'main' into 2.x
贤心
commit
66adedff5a
|
|
@ -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(){
|
|||
<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>
|
||||
|
|
@ -182,7 +190,7 @@ layui.use(function(){
|
|||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<br><br>
|
||||
<br><br>
|
||||
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-1"></div>
|
||||
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-2"></div>
|
||||
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-3"></div>
|
||||
|
|
@ -276,4 +284,4 @@ layui.use(function(){
|
|||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
</pre>
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@
|
|||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>elem</td>
|
||||
<td>
|
||||
|
||||
|
||||
绑定元素选择器或 DOM 对象
|
||||
|
||||
</td>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<tr>
|
||||
<td>type</td>
|
||||
<td>
|
||||
|
||||
|
||||
滑块类型，可选值有：
|
||||
|
||||
- `default` 水平滑块（默认）
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<tr>
|
||||
<td>value</td>
|
||||
<td>
|
||||
|
||||
|
||||
滑块初始值。
|
||||
|
||||
- 默认可直接设置数值，如： `value: 50`
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
<tr>
|
||||
<td>range</td>
|
||||
<td>
|
||||
|
||||
|
||||
是否开启滑块的区间选择。若开启，则滑块将出现两个可拖拽的点。
|
||||
|
||||
</td>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
<tr>
|
||||
<td>min</td>
|
||||
<td>
|
||||
|
||||
|
||||
滑块的最小值
|
||||
|
||||
</td>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
<tr>
|
||||
<td>max</td>
|
||||
<td>
|
||||
|
||||
|
||||
滑块的最大值
|
||||
|
||||
</td>
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
<tr>
|
||||
<td>step</td>
|
||||
<td>
|
||||
|
||||
|
||||
滑块单次拖动的步长
|
||||
|
||||
</td>
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
<tr>
|
||||
<td>showstep</td>
|
||||
<td>
|
||||
|
||||
|
||||
是否显示间断点
|
||||
|
||||
</td>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<tr>
|
||||
<td>tips</td>
|
||||
<td>
|
||||
|
||||
|
||||
鼠标移入当前圆点，是否显示当前值
|
||||
|
||||
</td>
|
||||
|
|
@ -135,12 +135,26 @@
|
|||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tipsAlways <sup>2.9.3+</sup></td>
|
||||
<td>
|
||||
|
||||
是否始终显示提示文本，要开启此功能，tips 必须设置为 `true` 才能生效
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>input</td>
|
||||
<td>
|
||||
|
||||
|
||||
是否显示滑块的数字输入框。 注：若设置 `range: true` 则该属性强制无效。
|
||||
|
||||
</td>
|
||||
|
|
@ -154,7 +168,7 @@
|
|||
<tr>
|
||||
<td>height</td>
|
||||
<td>
|
||||
|
||||
|
||||
滑动条高度。 必须设置 `type: 'vertical'` 属性，即垂直滑块时有效。
|
||||
|
||||
</td>
|
||||
|
|
@ -168,7 +182,7 @@
|
|||
<tr>
|
||||
<td>theme</td>
|
||||
<td>
|
||||
|
||||
|
||||
滑块的主题色。
|
||||
|
||||
</td>
|
||||
|
|
@ -178,7 +192,7 @@
|
|||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>
|
||||
|
||||
|
||||
是否禁用滑块
|
||||
|
||||
</td>
|
||||
|
|
@ -192,13 +206,13 @@
|
|||
<tr>
|
||||
<td>setTips</td>
|
||||
<td colspan="3">
|
||||
|
||||
|
||||
滑块拖拽时设置提示文本的回调函数。并返回当前的 `value` 参数。用法详见：[#设置提示文本](#demo-setTips)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" lay-pid="options" class="ws-anchor">
|
||||
|
|
@ -212,7 +226,7 @@
|
|||
<tr>
|
||||
<td>change</td>
|
||||
<td colspan="3">
|
||||
|
||||
|
||||
滑块数值发生改变的回调函数。并返回当前的 `value` 参数。
|
||||
|
||||
```
|
||||
|
|
@ -232,7 +246,7 @@ slider.render({
|
|||
<tr>
|
||||
<td>done <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
|
||||
滑块拖拽完毕的回调函数。并返回当前的 `value` 参数。滑块拖动过程中不会触发。
|
||||
|
||||
```
|
||||
|
|
@ -250,4 +264,4 @@ slider.render({
|
|||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -1539,9 +1539,10 @@
|
|||
});
|
||||
});
|
||||
|
||||
if(lay.touchEventsSupported()){
|
||||
olElem.on('touchstart', function(){
|
||||
this.style['overflow-y'] = 'auto';
|
||||
if(layui.device().mobile){
|
||||
olElem.css({
|
||||
overflowY: 'auto',
|
||||
touchAction: 'pan-y'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
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 left = tipsLeft / sliderWidth * 100;
|
||||
var value = $(this).parent().data('value');
|
||||
/**
|
||||
* @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);
|
||||
}
|
||||
|
||||
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 {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 - sliderWrapBtnElem.parent()[0].offsetTop - sliderWrap.height()) : sliderWrapBtnElem.parent()[0].offsetLeft;
|
||||
var left = tipsLeft / sliderWidth * 100;
|
||||
return left
|
||||
}
|
||||
|
||||
/**
|
||||
* @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)
|
||||
|
|
|
|||
|
|
@ -2585,6 +2585,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
|||
});
|
||||
});
|
||||
$this.remove();
|
||||
// 重置单元格滚动条位置
|
||||
elemCell.scrollTop(0);
|
||||
elemCell.scrollLeft(0);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue