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

新增 slider 的 done 回调

pull/1125/head
贤心 2 years ago
parent
7b9aa2cdc2
commit
40d3ce1898
2 changed files with 54 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      examples/slider.html
  2. 61
      src/modules/slider.js

30
examples/slider.html
Unescape View File

@ -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({

61
src/modules/slider.js
Unescape View File

@ -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'
};
//构造器
,Class = function(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
,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{
@ -258,8 +269,11 @@ 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){

Write Preview
Loading…
Cancel
Save