新增 slider 的 done 回调
This commit is contained in:
贤心
parent
7b9aa2cdc2
commit
40d3ce1898
@ -1,16 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>滑块 - layui</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>滑块 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding:100px 0;}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<style>
|
||||
body{padding:100px 0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -31,14 +29,18 @@ layui.use('slider', function(){
|
||||
//,type: 'vertical'
|
||||
//,min: -20 //最小值
|
||||
//,max: 20 //最大值
|
||||
//,value: 10 //[40, 60] //初始值
|
||||
//,step: 10 //间隔值
|
||||
//,value: 11 //[40, 60] //初始值
|
||||
//,step: 1 //间隔值
|
||||
//,showstep: true //间隔点
|
||||
//,tips: false //关闭提示文本
|
||||
,input: true //输入框
|
||||
//,range: true //范围选择
|
||||
,change: function(value){ //回调实时显示当前值
|
||||
console.log(value)
|
||||
//,theme: '#FF5722'
|
||||
,change: function(value){ // 选中值发生改变的回调
|
||||
console.log('change', value)
|
||||
}
|
||||
,done: function(value){ // 值完成选中的回调 -- v2.8.0 新增
|
||||
console.log('done', value);
|
||||
}
|
||||
,setTips: function(value){ //自定义提示文本
|
||||
return value + '%';
|
||||
@ -51,7 +53,7 @@ layui.use('slider', function(){
|
||||
//,theme: '#c00' //主题色
|
||||
});
|
||||
|
||||
sliderInst.setValue(30);
|
||||
//sliderInst.setValue(30);
|
||||
|
||||
|
||||
slider.render({
|
||||
|
||||
@ -3,53 +3,64 @@
|
||||
*/
|
||||
|
||||
layui.define('jquery', function(exports){
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
var $ = layui.$
|
||||
|
||||
//外部接口
|
||||
,slider = {
|
||||
// 外部接口
|
||||
var slider = {
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//操作当前实例
|
||||
,thisSlider = function(){
|
||||
// 操作当前实例
|
||||
var thisSlider = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
|
||||
return {
|
||||
setValue: function(value, index){ //设置值
|
||||
setValue: function(value, index){ // 设置值
|
||||
options.value = value;
|
||||
return that.slide('set', value, index || 0);
|
||||
}
|
||||
,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;
|
||||
that.index = ++slider.index;
|
||||
that.config = $.extend({}, that.config, slider.config, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
//默认配置
|
||||
// 默认配置
|
||||
Class.prototype.config = {
|
||||
type: 'default' //滑块类型，垂直：vertical
|
||||
,min: 0 //最小值
|
||||
@ -217,7 +228,7 @@ layui.define('jquery', function(exports){
|
||||
,sliderTxt = sliderAct.next('.' + SLIDER_INPUT)
|
||||
,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val()
|
||||
,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){
|
||||
offsetValue = Math.ceil(offsetValue) * step
|
||||
}else{
|
||||
@ -257,9 +268,12 @@ layui.define('jquery', function(exports){
|
||||
];
|
||||
if(arrValue[0] > arrValue[1]) arrValue.reverse(); //如果前面的圆点超过了后面的圆点值，则调换顺序
|
||||
}
|
||||
|
||||
//回调
|
||||
options.change && options.change(options.range ? arrValue : selfValue);
|
||||
|
||||
that.value = options.range ? arrValue : selfValue; // 最新值
|
||||
options.change && options.change(that.value); // change 回调
|
||||
|
||||
// 值完成选中的事件
|
||||
if(from === 'done') options.done && options.done(that.value);
|
||||
}
|
||||
,valueTo = function(value){
|
||||
var oldLeft = value / sliderWidth() * 100 / step
|
||||
@ -276,6 +290,7 @@ layui.define('jquery', function(exports){
|
||||
var upCall = function(){
|
||||
up && up();
|
||||
elemMove.remove();
|
||||
options.done && options.done(that.value);
|
||||
};
|
||||
$('#LAY-slider-moving')[0] || $('body').append(elemMove);
|
||||
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){
|
||||
@ -341,7 +356,7 @@ layui.define('jquery', function(exports){
|
||||
} else {
|
||||
index = 0;
|
||||
};
|
||||
change(reaLeft, index);
|
||||
change(reaLeft, index, 'done');
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
@ -360,7 +375,7 @@ layui.define('jquery', function(exports){
|
||||
: Number(inputValue) + options.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;
|
||||
this.value = realValue;
|
||||
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){
|
||||
if(e.keyCode === 13){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user