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

新增 slider 的 done 回调

pull/1125/head
贤心 2022-08-29 23:53:12 +08:00
parent 7b9aa2cdc2
commit 40d3ce1898
2 changed files with 54 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
examples/slider.html
View File

@ -1,16 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>滑块 - layui</title> <title>滑块 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../src/css/layui.css">
<style>
<style> body{padding:100px 0;}
body{padding:100px 0;} </style>
</style>
</head> </head>
<body> <body>
@ -31,14 +29,18 @@ layui.use('slider', function(){
//,type: 'vertical' //,type: 'vertical'
//,min: -20 //最小值 //,min: -20 //最小值
//,max: 20 //最大值 //,max: 20 //最大值
//,value: 10 //[40, 60] //初始值 //,value: 11 //[40, 60] //初始值
//,step: 10 //间隔值 //,step: 1 //间隔值
//,showstep: true //间隔点 //,showstep: true //间隔点
//,tips: false //关闭提示文本 //,tips: false //关闭提示文本
,input: true //输入框 ,input: true //输入框
//,range: true //范围选择 //,range: true //范围选择
,change: function(value){ //回调实时显示当前值 //,theme: '#FF5722'
console.log(value) ,change: function(value){ // 选中值发生改变的回调
console.log('change', value)
}
,done: function(value){ // 值完成选中的回调 -- v2.8.0 新增
console.log('done', value);
} }
,setTips: function(value){ //自定义提示文本 ,setTips: function(value){ //自定义提示文本
return value + '%'; return value + '%';
@ -51,7 +53,7 @@ layui.use('slider', function(){
//,theme: '#c00' //主题色 //,theme: '#c00' //主题色
}); });
sliderInst.setValue(30); //sliderInst.setValue(30);
slider.render({ slider.render({

61
src/modules/slider.js
View File

@ -3,53 +3,64 @@
*/ */
layui.define('jquery', function(exports){ layui.define('jquery', function(exports){
"use strict"; 'use strict';
var $ = layui.$ var $ = layui.$
//外部接口 // 外部接口
,slider = { var slider = {
config: {} config: {}
,index: layui.slider ? (layui.slider.index + 10000) : 0 ,index: layui.slider ? (layui.slider.index + 10000) : 0
//设置全局项 // 设置全局项
,set: function(options){ ,set: function(options){
var that = this; var that = this;
that.config = $.extend({}, that.config, options); that.config = $.extend({}, that.config, options);
return that; return that;
} }
//事件 // 事件
,on: function(events, callback){ ,on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback); return layui.onevent.call(this, MOD_NAME, events, callback);
} }
} };
//操作当前实例 // 操作当前实例
,thisSlider = function(){ var thisSlider = function(){
var that = this var that = this
,options = that.config; ,options = that.config;
return { return {
setValue: function(value, index){ //设置值 setValue: function(value, index){ // 设置值
options.value = value; options.value = value;
return that.slide('set', value, index || 0); return that.slide('set', value, index || 0);
} }
,config: options ,config: options
} }
} };
//字符常量 // 字符常量
,MOD_NAME = 'slider', DISABLED = 'layui-disabled', ELEM_VIEW = 'layui-slider', 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' 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';
//构造器 // 构造器
,Class = function(options){ var Class = function(options){
var that = this; var that = this;
that.index = ++slider.index; that.index = ++slider.index;
that.config = $.extend({}, that.config, slider.config, options); that.config = $.extend({}, that.config, slider.config, options);
that.render(); that.render();
}; };
//默认配置 // 默认配置
Class.prototype.config = { Class.prototype.config = {
type: 'default' //滑块类型，垂直：vertical type: 'default' //滑块类型，垂直：vertical
,min: 0 //最小值 ,min: 0 //最小值
@ -217,7 +228,7 @@ layui.define('jquery', function(exports){
,sliderTxt = sliderAct.next('.' + SLIDER_INPUT) ,sliderTxt = sliderAct.next('.' + SLIDER_INPUT)
,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val() ,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val()
,step = 100 / ((options.max - options.min) / Math.ceil(options.step)) ,step = 100 / ((options.max - options.min) / Math.ceil(options.step))
,change = function(offsetValue, index){ ,change = function(offsetValue, index, from){
if(Math.ceil(offsetValue) * step > 100){ if(Math.ceil(offsetValue) * step > 100){
offsetValue = Math.ceil(offsetValue) * step offsetValue = Math.ceil(offsetValue) * step
}else{ }else{
@ -257,9 +268,12 @@ layui.define('jquery', function(exports){
]; ];
if(arrValue[0] > arrValue[1]) arrValue.reverse(); //如果前面的圆点超过了后面的圆点值，则调换顺序 if(arrValue[0] > arrValue[1]) arrValue.reverse(); //如果前面的圆点超过了后面的圆点值，则调换顺序
} }
//回调 that.value = options.range ? arrValue : selfValue; // 最新值
options.change && options.change(options.range ? arrValue : selfValue); options.change && options.change(that.value); // change 回调
// 值完成选中的事件
if(from === 'done') options.done && options.done(that.value);
} }
,valueTo = function(value){ ,valueTo = function(value){
var oldLeft = value / sliderWidth() * 100 / step var oldLeft = value / sliderWidth() * 100 / step
@ -276,6 +290,7 @@ layui.define('jquery', function(exports){
var upCall = function(){ var upCall = function(){
up && up(); up && up();
elemMove.remove(); elemMove.remove();
options.done && options.done(that.value);
}; };
$('#LAY-slider-moving')[0] || $('body').append(elemMove); $('#LAY-slider-moving')[0] || $('body').append(elemMove);
elemMove.on('mousemove', move); elemMove.on('mousemove', move);
@ -283,7 +298,7 @@ layui.define('jquery', function(exports){
}; };
//动态赋值 //动态赋值
if(setValue === 'set') return change(value, i); if(setValue === 'set') return change(value, i, 'done');
//滑块滑动 //滑块滑动
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){ sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
@ -341,7 +356,7 @@ layui.define('jquery', function(exports){
} else { } else {
index = 0; index = 0;
}; };
change(reaLeft, index); change(reaLeft, index, 'done');
e.preventDefault(); e.preventDefault();
} }
}); });
@ -360,7 +375,7 @@ layui.define('jquery', function(exports){
: Number(inputValue) + options.step; : Number(inputValue) + options.step;
}; };
var inputScale = (inputValue - options.min) / (options.max - options.min) * 100 / step; var inputScale = (inputValue - options.min) / (options.max - options.min) * 100 / step;
change(inputScale, 0); change(inputScale, 0, 'done');
}); });
}); });
@ -372,7 +387,7 @@ layui.define('jquery', function(exports){
realValue = realValue > options.max ? options.max : realValue; realValue = realValue > options.max ? options.max : realValue;
this.value = realValue; this.value = realValue;
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); change(inputScale, 0, 'done');
}; };
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){ sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){
if(e.keyCode === 13){ if(e.keyCode === 13){