diff --git a/examples/slider.html b/examples/slider.html
index 2c5a9571..c638d123 100644
--- a/examples/slider.html
+++ b/examples/slider.html
@@ -1,16 +1,14 @@
-
-
-滑块 - layui
+
+
+ 滑块 - layui
-
-
-
+
+
@@ -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({
diff --git a/src/modules/slider.js b/src/modules/slider.js
index 6cae3ea6..541b8a80 100644
--- a/src/modules/slider.js
+++ b/src/modules/slider.js
@@ -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){