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

Merge 11d5ed4800 into 71c6239e55

pull/2781/merge
morning-star 2025-08-05 12:55:59 +00:00 committed by GitHub
parent 71c6239e55 11d5ed4800
commit 6f9da35534
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 232 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
src/modules/slider.js
View File

@ -2,69 +2,15 @@
* slider 滑块组件 * slider 滑块组件
*/ */
layui.define(['jquery', 'lay'], function(exports) { layui.define(['component', 'jquery', 'lay'], function(exports) {
'use strict'; 'use strict';
var $ = layui.$; var $ = layui.$;
var lay = layui.lay; var lay = layui.lay;
// 外部接口 var component = layui.component({
var slider = { name: 'slider',
config: {}, config: {
index: layui.slider ? (layui.slider.index + 10000) : 0,
// 设置全局项
set: function(options) {
var that = this;
that.config = $.extend({}, that.config, options);
return that;
},
// 事件
on: function(events, callback) {
return layui.onevent.call(this, MOD_NAME, events, callback);
}
};
// 操作当前实例
var thisSlider = function(){
var that = this;
var options = that.config;
return {
setValue: function(value, index){ // 设置值
value = value > options.max ? options.max : value;
value = value < options.min ? options.min : value;
options.value = value;
return that.slide('set', value, index || 0);
},
config: options
}
};
// 字符常量
var MOD_NAME = 'slider';
var DISABLED = 'layui-disabled';
var ELEM_VIEW = 'layui-slider';
var SLIDER_BAR = 'layui-slider-bar';
var SLIDER_WRAP = 'layui-slider-wrap';
var SLIDER_WRAP_BTN = 'layui-slider-wrap-btn';
var SLIDER_TIPS = 'layui-slider-tips';
var SLIDER_INPUT = 'layui-slider-input';
var SLIDER_INPUT_TXT = 'layui-slider-input-txt';
var SLIDER_INPUT_BTN = 'layui-slider-input-btn';
var ELEM_HOVER = 'layui-slider-hover';
// 构造器
var Class = function(options){
var that = this;
that.index = ++slider.index;
that.config = $.extend({}, that.config, slider.config, options);
that.render();
};
// 默认配置
Class.prototype.config = {
type: 'default', //滑块类型，垂直：vertical type: 'default', //滑块类型，垂直：vertical
min: 0, //最小值 min: 0, //最小值
max: 100, //最大值，默认100 max: 100, //最大值，默认100
@ -78,37 +24,21 @@ layui.define(['jquery', 'lay'], function(exports) {
height: 200, //配合 type:"vertical" 使用，默认200px height: 200, //配合 type:"vertical" 使用，默认200px
disabled: false, //滑块禁用，默认关闭 disabled: false, //滑块禁用，默认关闭
theme: '#16baaa' //主题颜色 theme: '#16baaa' //主题颜色
}; },
CONST: {
// 数值精度 ELEM_VIEW: 'layui-slider',
Class.prototype.precision = function(){ SLIDER_BAR: 'layui-slider-bar',
SLIDER_WRAP: 'layui-slider-wrap',
SLIDER_WRAP_BTN: 'layui-slider-wrap-btn',
SLIDER_TIPS: 'layui-slider-tips',
SLIDER_INPUT: 'layui-slider-input',
SLIDER_INPUT_TXT: 'layui-slider-input-txt',
SLIDER_INPUT_BTN: 'layui-slider-input-btn',
ELEM_HOVER: 'layui-slider-hover',
},
render: function (rerender) {
var that = this; var that = this;
var options = that.config; var options = that.config;
var precisions = $.map([options.min, options.max, options.step], function(v, i){
var decimalArr = String(v).split('.');
return decimalArr[1] ? decimalArr[1].length : 0;
})
return Math.max.apply(null, precisions);
}
//滑块渲染
Class.prototype.render = function(){
var that = this;
var options = that.config;
// 若 elem 非唯一，则拆分为多个实例
var elem = $(options.elem);
if(elem.length > 1){
layui.each(elem, function(){
slider.render($.extend({}, options, {
elem: this
}));
});
return that;
}
// 合并 lay-options 属性上的配置信息
$.extend(options, lay.options(elem[0]));
//间隔值不能小于等于 0 //间隔值不能小于等于 0
if (options.step <= 0) options.step = 1; if (options.step <= 0) options.step = 1;
@ -116,8 +46,6 @@ layui.define(['jquery', 'lay'], function(exports) {
//最大值不能小于最小值 //最大值不能小于最小值
if (options.max < options.min) options.max = options.min + options.step; if (options.max < options.min) options.max = options.min + options.step;
//判断是否开启双滑块 //判断是否开启双滑块
if (options.range) { if (options.range) {
options.value = typeof (options.value) == 'object' ? options.value : [options.min, options.value]; options.value = typeof (options.value) == 'object' ? options.value : [options.min, options.value];
@ -151,22 +79,22 @@ layui.define(['jquery', 'lay'], function(exports) {
var theme = options.disabled ? '#c2c2c2' : options.theme; 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 +'" '+ (options.tipsAlways ? '' : 'style="display:none;"') +'></div>' : '') + var temp = '<div class="layui-slider ' + (options.type === 'vertical' ? 'layui-slider-vertical' : '') + '">' + (options.tips ? '<div class="' + CONST.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-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>'; '<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>';
var othis = $(options.elem); var othis = $(options.elem);
var hasRender = othis.next('.' + ELEM_VIEW); var hasRender = othis.next('.' + CONST.ELEM_VIEW);
//生成替代元素 //生成替代元素
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
that.elemTemp = $(temp); that.elemTemp = $(temp);
//把数据缓存到滑块上 //把数据缓存到滑块上
if (options.range) { if (options.range) {
that.elemTemp.find('.' + SLIDER_WRAP).eq(0).data('value', options.value[0]); that.elemTemp.find('.' + CONST.SLIDER_WRAP).eq(0).data('value', options.value[0]);
that.elemTemp.find('.' + SLIDER_WRAP).eq(1).data('value', options.value[1]); that.elemTemp.find('.' + CONST.SLIDER_WRAP).eq(1).data('value', options.value[1]);
} else { } else {
that.elemTemp.find('.' + SLIDER_WRAP).data('value', options.value); that.elemTemp.find('.' + CONST.SLIDER_WRAP).data('value', options.value);
} }
//插入替代元素 //插入替代元素
@ -194,7 +122,7 @@ layui.define(['jquery', 'lay'], function(exports) {
var elemInput = $('<div class="layui-slider-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div>'); var elemInput = $('<div class="layui-slider-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div>');
othis.css("position", "relative"); othis.css("position", "relative");
othis.append(elemInput); othis.append(elemInput);
othis.find('.' + SLIDER_INPUT_TXT).children('input').val(options.value); othis.find('.' + CONST.SLIDER_INPUT_TXT).children('input').val(options.value);
if (options.type === 'vertical') { if (options.type === 'vertical') {
elemInput.css({ elemInput.css({
left: 0 left: 0
@ -209,8 +137,8 @@ layui.define(['jquery', 'lay'], function(exports) {
if (!options.disabled) { if (!options.disabled) {
that.slide(); that.slide();
} else { } else {
that.elemTemp.addClass(DISABLED); that.elemTemp.addClass(CONST.CLASS_DISABLED);
that.elemTemp.find('.' + SLIDER_WRAP_BTN).addClass(DISABLED); that.elemTemp.find('.' + CONST.SLIDER_WRAP_BTN).addClass(CONST.CLASS_DISABLED);
} }
/** /**
@ -220,7 +148,7 @@ layui.define(['jquery', 'lay'], function(exports) {
function setSliderTipsTxt(sliderWrapBtnElem) { function setSliderTipsTxt(sliderWrapBtnElem) {
var value = sliderWrapBtnElem.parent().data('value'); var value = sliderWrapBtnElem.parent().data('value');
var tipsTxt = options.setTips ? options.setTips(value) : value; var tipsTxt = options.setTips ? options.setTips(value) : value;
that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt); that.elemTemp.find('.' + CONST.SLIDER_TIPS).html(tipsTxt);
} }
/** /**
@ -229,7 +157,7 @@ layui.define(['jquery', 'lay'], function(exports) {
*/ */
function calcSliderTipsLeft(sliderWrapBtnElem) { function calcSliderTipsLeft(sliderWrapBtnElem) {
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth; var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth;
var sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP); var sliderWrap = that.elemTemp.find('.' + CONST.SLIDER_WRAP);
var tipsLeft = options.type === 'vertical' ? (sliderWidth - sliderWrapBtnElem.parent()[0].offsetTop - sliderWrap.height()) : sliderWrapBtnElem.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 left = tipsLeft / sliderWidth * 100;
return left return left
@ -241,13 +169,13 @@ layui.define(['jquery', 'lay'], function(exports) {
*/ */
function setSliderTipsLeft(left) { function setSliderTipsLeft(left) {
if (options.type === 'vertical') { if (options.type === 'vertical') {
that.elemTemp.find('.' + SLIDER_TIPS).css({ that.elemTemp.find('.' + CONST.SLIDER_TIPS).css({
"bottom": left + '%', "bottom": left + '%',
"margin-bottom": "20px", "margin-bottom": "20px",
"display": "inline-block" "display": "inline-block"
}); });
} else { } else {
that.elemTemp.find('.' + SLIDER_TIPS).css({ that.elemTemp.find('.' + CONST.SLIDER_TIPS).css({
"left": left + '%', "left": left + '%',
"display": "inline-block" "display": "inline-block"
}); });
@ -257,14 +185,14 @@ layui.define(['jquery', 'lay'], function(exports) {
//判断是否要始终显示提示文本 //判断是否要始终显示提示文本
if (options.tips) { if (options.tips) {
if (options.tipsAlways) { if (options.tipsAlways) {
var sliderWrapBtnElem = that.elemTemp.find('.' + SLIDER_WRAP_BTN); var sliderWrapBtnElem = that.elemTemp.find('.' + CONST.SLIDER_WRAP_BTN);
setSliderTipsTxt(sliderWrapBtnElem) setSliderTipsTxt(sliderWrapBtnElem)
var left = calcSliderTipsLeft(sliderWrapBtnElem); var left = calcSliderTipsLeft(sliderWrapBtnElem);
setSliderTipsLeft(left) setSliderTipsLeft(left)
} else { } else {
//划过滑块显示数值 //划过滑块显示数值
var timer; var timer;
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){ that.elemTemp.find('.' + CONST.SLIDER_WRAP_BTN).on('mouseover', function () {
setSliderTipsTxt($(this)) setSliderTipsTxt($(this))
var left = calcSliderTipsLeft($(this)); var left = calcSliderTipsLeft($(this));
clearTimeout(timer); clearTimeout(timer);
@ -274,12 +202,39 @@ layui.define(['jquery', 'lay'], function(exports) {
}).on('mouseout', function () { }).on('mouseout', function () {
clearTimeout(timer); clearTimeout(timer);
if (!options.tipsAlways) { if (!options.tipsAlways) {
that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none"); that.elemTemp.find('.' + CONST.SLIDER_TIPS).css("display", "none");
} }
}); });
} }
} }
},
extendsInstance: function(){
var that = this;
var options = that.config;
return {
setValue: function (value, index) {
value = value > options.max ? options.max : value;
value = value < options.min ? options.min : value;
options.value = value;
return that.slide('set', value, index || 0);
}
}; };
}
});
var CONST = component.CONST;
var Class = component.Class;
// 数值精度
Class.prototype.precision = function(){
var that = this;
var options = that.config;
var precisions = $.map([options.min, options.max, options.step], function(v, i){
var decimalArr = String(v).split('.');
return decimalArr[1] ? decimalArr[1].length : 0;
})
return Math.max.apply(null, precisions);
}
//滑块滑动 //滑块滑动
Class.prototype.slide = function(setValue, value, i){ Class.prototype.slide = function(setValue, value, i){
@ -289,9 +244,9 @@ layui.define(['jquery', 'lay'], function(exports) {
var sliderWidth = function(){ var sliderWidth = function(){
return options.type === 'vertical' ? options.height : sliderAct[0].offsetWidth return options.type === 'vertical' ? options.height : sliderAct[0].offsetWidth
}; };
var sliderWrap = sliderAct.find('.' + SLIDER_WRAP); var sliderWrap = sliderAct.find('.' + CONST.SLIDER_WRAP);
var sliderTxt = sliderAct.next('.' + SLIDER_INPUT); var sliderTxt = sliderAct.next('.' + CONST.SLIDER_INPUT);
var inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(); var inputValue = sliderTxt.children('.' + CONST.SLIDER_INPUT_TXT).children('input').val();
var step = 100 / ((options.max - options.min) / options.step); var step = 100 / ((options.max - options.min) / options.step);
var precision = that.precision(); var precision = that.precision();
var change = function(offsetValue, index, from){ var change = function(offsetValue, index, from){
@ -306,27 +261,27 @@ layui.define(['jquery', 'lay'], function(exports) {
var firLeft = valueTo(sliderWrap[0].offsetLeft); var firLeft = valueTo(sliderWrap[0].offsetLeft);
var secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0; var secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
if(options.type === 'vertical'){ if(options.type === 'vertical'){
sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"20px"}); sliderAct.find('.' + CONST.SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"20px"});
firLeft = valueTo(sliderWidth() - sliderWrap[0].offsetTop - sliderWrap.height()); firLeft = valueTo(sliderWidth() - sliderWrap[0].offsetTop - sliderWrap.height());
secLeft = options.range ? valueTo(sliderWidth() - sliderWrap[1].offsetTop - sliderWrap.height()) : 0; secLeft = options.range ? valueTo(sliderWidth() - sliderWrap[1].offsetTop - sliderWrap.height()) : 0;
}else{ }else{
sliderAct.find('.' + SLIDER_TIPS).css("left",offsetValue + '%'); sliderAct.find('.' + CONST.SLIDER_TIPS).css("left",offsetValue + '%');
} }
firLeft = firLeft > 100 ? 100: firLeft; firLeft = firLeft > 100 ? 100: firLeft;
secLeft = secLeft > 100 ? 100: secLeft; secLeft = secLeft > 100 ? 100: secLeft;
var minLeft = Math.min(firLeft, secLeft) var minLeft = Math.min(firLeft, secLeft)
,wrapWidth = Math.abs(firLeft - secLeft); ,wrapWidth = Math.abs(firLeft - secLeft);
if(options.type === 'vertical'){ if(options.type === 'vertical'){
sliderAct.find('.' + SLIDER_BAR).css({"height":wrapWidth + '%', "bottom":minLeft + '%'}); sliderAct.find('.' + CONST.SLIDER_BAR).css({"height":wrapWidth + '%', "bottom":minLeft + '%'});
}else{ }else{
sliderAct.find('.' + SLIDER_BAR).css({"width":wrapWidth + '%', "left":minLeft + '%'}); sliderAct.find('.' + CONST.SLIDER_BAR).css({"width":wrapWidth + '%', "left":minLeft + '%'});
} }
var selfValue = options.min + (options.max - options.min) * offsetValue / 100; var selfValue = options.min + (options.max - options.min) * offsetValue / 100;
selfValue = Number(parseFloat(selfValue).toFixed(precision)); selfValue = Number(parseFloat(selfValue).toFixed(precision));
inputValue = selfValue; inputValue = selfValue;
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(inputValue); sliderTxt.children('.' + CONST.SLIDER_INPUT_TXT).children('input').val(inputValue);
sliderWrap.eq(index).data('value', selfValue); sliderWrap.eq(index).data('value', selfValue);
sliderAct.find('.' + SLIDER_TIPS).html(options.setTips ? options.setTips(selfValue) : selfValue); sliderAct.find('.' + CONST.SLIDER_TIPS).html(options.setTips ? options.setTips(selfValue) : selfValue);
//如果开启范围选择，则返回数组值 //如果开启范围选择，则返回数组值
if(options.range){ if(options.range){
@ -384,7 +339,7 @@ layui.define(['jquery', 'lay'], function(exports) {
} }
//滑块滑动 //滑块滑动
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){ sliderAct.find('.' + CONST.SLIDER_WRAP_BTN).each(function(index){
var othis = $(this); var othis = $(this);
othis.on('mousedown touchstart', function(e){ othis.on('mousedown touchstart', function(e){
e = e || window.event; e = e || window.event;
@ -411,16 +366,16 @@ layui.define(['jquery', 'lay'], function(exports) {
if(left > sliderWidth())left = sliderWidth(); if(left > sliderWidth())left = sliderWidth();
var reaLeft = left / sliderWidth() * 100 / step; var reaLeft = left / sliderWidth() * 100 / step;
change(reaLeft, index); change(reaLeft, index);
othis.addClass(ELEM_HOVER); othis.addClass(CONST.ELEM_HOVER);
sliderAct.find('.' + SLIDER_TIPS).show(); sliderAct.find('.' + CONST.SLIDER_TIPS).show();
e.preventDefault(); e.preventDefault();
}; };
var up = function(delay){ var up = function(delay){
othis.removeClass(ELEM_HOVER); othis.removeClass(CONST.ELEM_HOVER);
if(!options.tipsAlways){ if(!options.tipsAlways){
setTimeout(function(){ setTimeout(function(){
sliderAct.find('.' + SLIDER_TIPS).hide(); sliderAct.find('.' + CONST.SLIDER_TIPS).hide();
}, delay); }, delay);
} }
}; };
@ -431,7 +386,7 @@ layui.define(['jquery', 'lay'], function(exports) {
// 点击滑块 // 点击滑块
sliderAct.on('click', function(e){ sliderAct.on('click', function(e){
var main = $('.' + SLIDER_WRAP_BTN); var main = $('.' + CONST.SLIDER_WRAP_BTN);
var othis = $(this); var othis = $(this);
if(!main.is(event.target) && main.has(event.target).length === 0 && main.length){ if(!main.is(event.target) && main.has(event.target).length === 0 && main.length){
var index; var index;
@ -457,9 +412,9 @@ layui.define(['jquery', 'lay'], function(exports) {
}); });
//点击加减输入框 //点击加减输入框
sliderTxt.children('.' + SLIDER_INPUT_BTN).children('i').each(function(index){ sliderTxt.children('.' + CONST.SLIDER_INPUT_BTN).children('i').each(function(index){
$(this).on('click', function(){ $(this).on('click', function(){
inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(); inputValue = sliderTxt.children('.' + CONST.SLIDER_INPUT_TXT).children('input').val();
if(index == 1){ //减 if(index == 1){ //减
inputValue = inputValue - options.step < options.min inputValue = inputValue - options.step < options.min
? options.min ? options.min
@ -484,7 +439,7 @@ layui.define(['jquery', 'lay'], function(exports) {
var inputScale = (realValue - options.min) / (options.max - options.min) * 100 / step; var inputScale = (realValue - options.min) / (options.max - options.min) * 100 / step;
change(inputScale, 0, 'done'); change(inputScale, 0, 'done');
}; };
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){ sliderTxt.children('.' + CONST.SLIDER_INPUT_TXT).children('input').on('keydown', function(e){
if(e.keyCode === 13){ if(e.keyCode === 13){
e.preventDefault(); e.preventDefault();
getInputValue.call(this); getInputValue.call(this);
@ -492,17 +447,5 @@ layui.define(['jquery', 'lay'], function(exports) {
}).on('change', getInputValue); }).on('change', getInputValue);
}; };
//事件处理 exports(CONST.MOD_NAME, component);
Class.prototype.events = function(){
var that = this;
var options = that.config;
};
//核心入口
slider.render = function(options){
var inst = new Class(options);
return thisSlider.call(inst);
};
exports(MOD_NAME, slider);
}) })