mirror of https://github.com/layui/layui
feat(touch): 优化 slider, layer, carousel, laydate, rate, colorpicker 移动端滑动操作 (#1446)
贤心
GitHub
commit
31028ea1c5
|
|
@ -1520,7 +1520,8 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
|
|||
.layui-rate li{margin-top: 0 !important;}
|
||||
.layui-rate li i.layui-icon{ font-size: 20px; color: #ffb800;}
|
||||
.layui-rate li i.layui-icon{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
|
||||
.layui-rate li i:hover,
|
||||
.layui-rate-hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
|
||||
.layui-rate[readonly] li i:hover{cursor: default; transform: scale(1);}
|
||||
|
||||
/** 颜色选择器 **/
|
||||
|
|
|
|||
|
|
@ -331,14 +331,28 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
if(options.elem.data('haveEvents')) return;
|
||||
|
||||
// 移入移出容器
|
||||
options.elem.on('mouseenter', function(){
|
||||
options.elem.on('mouseenter touchstart', function(){
|
||||
if (that.config.autoplay === 'always') return;
|
||||
clearInterval(that.timer);
|
||||
}).on('mouseleave', function(){
|
||||
}).on('mouseleave touchend', function(){
|
||||
if (that.config.autoplay === 'always') return;
|
||||
that.autoplay();
|
||||
});
|
||||
|
||||
var touchEl = options.elem;
|
||||
var isVertical = options.anim === 'updown';
|
||||
lay.touchSwipe(touchEl, {
|
||||
onTouchEnd: function(e, state){
|
||||
var duration = Date.now() - state.timeStart;
|
||||
var distance = isVertical ? state.distanceY : state.distanceX;
|
||||
var speed = distance / duration;
|
||||
var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(distance) > touchEl[isVertical ? 'height' : 'width']() / 3;
|
||||
if(shouldSwipe){
|
||||
that.slide(distance > 0 ? '' : 'sub');
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
options.elem.data('haveEvents', true);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -567,6 +567,32 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
change(hsb.h, hsb.s, hsb.b, a);
|
||||
})
|
||||
});
|
||||
|
||||
if(!lay.touchEventsSupported()) return;
|
||||
// 触摸事件模拟
|
||||
layui.each([
|
||||
{elem: side, eventType: 'click'},
|
||||
{elem: alphacolor, eventType: 'click'},
|
||||
{elem: basis, eventType: 'mousedown'}
|
||||
], function(i, obj){
|
||||
lay.touchSwipe(obj.elem, {
|
||||
onTouchMove: function(e){
|
||||
touchHandler(e, obj.eventType)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function touchHandler(event, eventType) {
|
||||
var pointer = event.touches[0];
|
||||
var simulatedEvent = document.createEvent("MouseEvent");
|
||||
|
||||
simulatedEvent.initMouseEvent(eventType,
|
||||
true, true, window, 1,
|
||||
pointer.screenX, pointer.screenY,pointer.clientX, pointer.clientY,
|
||||
false, false, false, false, 0, null
|
||||
);
|
||||
pointer.target.dispatchEvent(simulatedEvent);
|
||||
}
|
||||
};
|
||||
|
||||
//颜色选择器hsb转换
|
||||
|
|
|
|||
|
|
@ -505,6 +505,115 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 检测是否支持 Passive Event Listeners
|
||||
* 引用自 https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
|
||||
* @type {boolean}
|
||||
*/
|
||||
lay.passiveSupported = function(){
|
||||
var passiveSupported = false;
|
||||
try {
|
||||
var opts = Object.defineProperty({}, 'passive', {
|
||||
get: function() {
|
||||
passiveSupported = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener('test', null, opts);
|
||||
window.removeEventListener('test', null, opts);
|
||||
} catch (err) {}
|
||||
return passiveSupported;
|
||||
}();
|
||||
|
||||
/**
|
||||
* 是否支持 touch 事件
|
||||
*/
|
||||
lay.touchEventsSupported = function(){
|
||||
return 'ontouchstart' in window;
|
||||
};
|
||||
|
||||
/**
|
||||
* @typedef touchSwipeState
|
||||
* @prop {{x: number,y: number}} pointerStart - 初始坐标
|
||||
* @prop {{x: number,y: number}} pointerEnd - 结束坐标
|
||||
* @prop {number} distanceX - X 轴移动距离
|
||||
* @prop {number} distanceY - Y 轴移动距离
|
||||
* @prop {'none'|'right'|'left'|'up'|'down'} direction - 滑动方向
|
||||
* @prop {Date} timeStart 开始时间
|
||||
*/
|
||||
/**
|
||||
* @callback touchSwipeCallback
|
||||
* @param {TouchEvent} e 滑动事件
|
||||
* @param {touchSwipeState} state 滑动相关的状态
|
||||
*/
|
||||
/**
|
||||
* 基于 touch 事件的触摸滑动
|
||||
* @param {string | HTMLElement | JQuery} elem - HTML 元素
|
||||
* @param {{onTouchStart?: touchSwipeCallback, onTouchMove?: touchSwipeCallback, onTouchEnd?: touchSwipeCallback}} opts - 配置项
|
||||
*/
|
||||
lay.touchSwipe = function(elem, opts){
|
||||
var options = opts
|
||||
var targetElem = lay(elem)[0];
|
||||
|
||||
if(!targetElem || !lay.touchEventsSupported()) return;
|
||||
|
||||
var state = {
|
||||
pointerStart: {x:0, y:0},
|
||||
pointerEnd: {x:0, y:0},
|
||||
distanceX: 0,
|
||||
distanceY: 0,
|
||||
direction:'none', // 'up','down','left','right','none
|
||||
timeStart: null
|
||||
}
|
||||
|
||||
var onStart = function(e){
|
||||
if(e.touches.length !== 1) return;
|
||||
bindEvents();
|
||||
state.timeStart = Date.now();
|
||||
state.pointerStart.x = state.pointerEnd.x = e.touches[0].clientX;
|
||||
state.pointerStart.y = state.pointerEnd.y = e.touches[0].clientY;
|
||||
|
||||
options.onTouchStart && options.onTouchStart(e, state);
|
||||
}
|
||||
|
||||
var onMove = function(e){
|
||||
e.preventDefault();
|
||||
state.pointerEnd.x = e.touches[0].clientX;
|
||||
state.pointerEnd.y = e.touches[0].clientY;
|
||||
state.distanceX = state.pointerStart.x - state.pointerEnd.x;
|
||||
state.distanceY = state.pointerStart.y - state.pointerEnd.y;
|
||||
if(Math.abs(state.distanceX) > Math.abs(state.distanceY)){
|
||||
state.direction = state.distanceX > 0 ? 'left' : 'right';
|
||||
}else{
|
||||
state.direction = state.distanceY > 0 ? 'up' : 'down';
|
||||
}
|
||||
options.onTouchMove && options.onTouchMove(e, state);
|
||||
}
|
||||
|
||||
var onEnd = function(e){
|
||||
options.onTouchEnd && options.onTouchEnd(e, state);
|
||||
unbindEvents();
|
||||
}
|
||||
|
||||
var bindEvents = function(){
|
||||
targetElem.addEventListener('touchmove', onMove, lay.passiveSupported ? { passive: false} : false);
|
||||
targetElem.addEventListener('touchend', onEnd);
|
||||
targetElem.addEventListener('touchcancel', onEnd);
|
||||
}
|
||||
|
||||
var unbindEvents = function(){
|
||||
targetElem.removeEventListener('touchmove', onMove);
|
||||
targetElem.removeEventListener('touchend', onEnd, lay.passiveSupported ? { passive: false} : false);
|
||||
targetElem.removeEventListener('touchcancel', onEnd);
|
||||
}
|
||||
|
||||
// 防止事件重复绑定
|
||||
if(targetElem.__lay_touchswipe_cb_){
|
||||
targetElem.removeEventListener('touchstart', targetElem.__lay_touchswipe_cb_);
|
||||
}
|
||||
targetElem.__lay_touchswipe_cb_ = onStart;
|
||||
targetElem.addEventListener('touchstart', onStart);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* lay 元素操作
|
||||
|
|
|
|||
|
|
@ -1514,7 +1514,8 @@
|
|||
if(haveSpan[0]) haveSpan.remove();
|
||||
elemHeader[2].appendChild(span);
|
||||
|
||||
lay(ul).find('ol').each(function(i){
|
||||
var olElem = lay(ul).find('ol');
|
||||
olElem.each(function(i){
|
||||
var ol = this;
|
||||
//选择时分秒
|
||||
lay(ol).find('li').on('click', function(){
|
||||
|
|
@ -1537,6 +1538,12 @@
|
|||
that.setBtnStatus();
|
||||
});
|
||||
});
|
||||
|
||||
if(lay.touchEventsSupported()){
|
||||
olElem.on('touchstart', function(){
|
||||
this.style['overflow-y'] = 'auto';
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return that;
|
||||
|
|
|
|||
|
|
@ -1604,6 +1604,28 @@ layer.photos = function(options, loop, key){
|
|||
e.preventDefault();
|
||||
});
|
||||
|
||||
// 滑动切换图片事件，仅限 layui 中
|
||||
if(window.layui || window.lay){
|
||||
var lay = window.layui.lay || window.lay;
|
||||
var touchEndCallback = function(e, state){
|
||||
var duration = Date.now() - state.timeStart;
|
||||
var speed = state.distanceX / duration;
|
||||
var threshold = win.width() / 3;
|
||||
var shouldSwipe = Math.abs(speed) > 0.25 || Math.abs(state.distanceX) > threshold;
|
||||
if(!shouldSwipe) return;
|
||||
if(state.direction === 'left'){
|
||||
dict.imgnext(true);
|
||||
}else if(state.direction === 'right'){
|
||||
dict.imgprev(true);
|
||||
}
|
||||
}
|
||||
|
||||
$.each([that.shadeo, dict.main], function(i, elem){
|
||||
lay.touchSwipe(elem, {
|
||||
onTouchEnd: touchEndCallback
|
||||
})
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
// 图片预加载
|
||||
|
|
@ -1764,7 +1786,7 @@ ready.run = function(_$){
|
|||
// 加载方式
|
||||
window.layui && layui.define ? (
|
||||
layer.ready(),
|
||||
layui.define('jquery', function(exports){ // layui
|
||||
layui.define(['jquery','lay'], function(exports){ // layui
|
||||
layer.path = layui.cache.dir;
|
||||
ready.run(layui.$);
|
||||
|
||||
|
|
|
|||
|
|
@ -155,8 +155,9 @@ layui.define(['jquery', 'lay'],function(exports){
|
|||
var options = that.config;
|
||||
var _ul = that.elemTemp;
|
||||
var wide = _ul.find("i").width();
|
||||
var liElems = _ul.children("li");
|
||||
|
||||
_ul.children("li").each(function(index){
|
||||
liElems.each(function(index){
|
||||
var ind = index + 1;
|
||||
var othis = $(this);
|
||||
|
||||
|
|
@ -212,6 +213,55 @@ layui.define(['jquery', 'lay'],function(exports){
|
|||
})
|
||||
|
||||
})
|
||||
|
||||
lay.touchSwipe(_ul, {
|
||||
onTouchMove: function(e, state){
|
||||
if(Date.now() - state.timeStart <= 200) return;
|
||||
var pageX = e.touches[0].pageX;
|
||||
var rateElemWidth = _ul.width();
|
||||
var itemElemWidth = rateElemWidth / options.length; // 单颗星的宽度
|
||||
var offsetX = pageX - _ul.offset().left;
|
||||
var num = offsetX / itemElemWidth; // 原始值
|
||||
var remainder = num % 1;
|
||||
var integer = num - remainder;
|
||||
|
||||
// 最终值
|
||||
var score = remainder <= 0.5 && options.half ? integer + 0.5 : Math.ceil(num);
|
||||
if(score > options.length) score = options.length;
|
||||
if(score < 0) score = 0;
|
||||
|
||||
liElems.each(function(index){
|
||||
var iconElem = $(this).children('i');
|
||||
var isActiveIcon = (Math.ceil(score) - index === 1);
|
||||
var needSelect = Math.ceil(score) > index;
|
||||
var shouldHalfIcon = (score - index === 0.5);
|
||||
|
||||
if(needSelect){
|
||||
// 设置选中样式
|
||||
iconElem.addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE);
|
||||
if(options.half && shouldHalfIcon){
|
||||
iconElem.addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID);
|
||||
}
|
||||
}else{
|
||||
// 恢复初始样式
|
||||
iconElem.addClass(ICON_RATE).removeClass(ICON_SOLID_HALF);
|
||||
}
|
||||
|
||||
// 设置缩放样式
|
||||
iconElem.toggleClass('layui-rate-hover', isActiveIcon);
|
||||
});
|
||||
|
||||
// 更新最终值
|
||||
options.value = score;
|
||||
options.setText && options.setText(options.value);
|
||||
},
|
||||
onTouchEnd: function(e, state){
|
||||
if(Date.now() - state.timeStart <= 200) return;
|
||||
_ul.find('i').removeClass('layui-rate-hover');
|
||||
options.choose && options.choose(options.value);
|
||||
options.setText && options.setText(options.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//事件处理
|
||||
|
|
|
|||
|
|
@ -10,26 +10,26 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
|
||||
// 外部接口
|
||||
var slider = {
|
||||
config: {}
|
||||
,index: layui.slider ? (layui.slider.index + 10000) : 0
|
||||
config: {},
|
||||
index: layui.slider ? (layui.slider.index + 10000) : 0,
|
||||
|
||||
// 设置全局项
|
||||
,set: function(options){
|
||||
set: function(options){
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
},
|
||||
|
||||
// 事件
|
||||
,on: function(events, callback){
|
||||
on: function(events, callback){
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||
}
|
||||
};
|
||||
|
||||
// 操作当前实例
|
||||
var thisSlider = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
|
||||
return {
|
||||
setValue: function(value, index){ // 设置值
|
||||
|
|
@ -37,8 +37,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
value = value < options.min ? options.min : value;
|
||||
options.value = value;
|
||||
return that.slide('set', value, index || 0);
|
||||
}
|
||||
,config: options
|
||||
},
|
||||
config: options
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -65,18 +65,18 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
|
||||
// 默认配置
|
||||
Class.prototype.config = {
|
||||
type: 'default' //滑块类型，垂直：vertical
|
||||
,min: 0 //最小值
|
||||
,max: 100 //最大值，默认100
|
||||
,value: 0 //初始值，默认为0
|
||||
,step: 1 //间隔值
|
||||
,showstep: false //间隔点开启
|
||||
,tips: true //文字提示，开启
|
||||
,input: false //输入框，关闭
|
||||
,range: false //范围选择，与输入框不能同时开启，默认关闭
|
||||
,height: 200 //配合 type:"vertical" 使用，默认200px
|
||||
,disabled: false //滑块禁用，默认关闭
|
||||
,theme: '#16baaa' //主题颜色
|
||||
type: 'default', //滑块类型，垂直：vertical
|
||||
min: 0, //最小值
|
||||
max: 100, //最大值，默认100
|
||||
value: 0, //初始值，默认为0
|
||||
step: 1, //间隔值
|
||||
showstep: false, //间隔点开启
|
||||
tips: true, //文字提示，开启
|
||||
input: false, //输入框，关闭
|
||||
range: false, //范围选择，与输入框不能同时开启，默认关闭
|
||||
height: 200, //配合 type:"vertical" 使用，默认200px
|
||||
disabled: false, //滑块禁用，默认关闭
|
||||
theme: '#16baaa' //主题颜色
|
||||
};
|
||||
|
||||
//滑块渲染
|
||||
|
|
@ -116,9 +116,9 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
options.value[0] = Math.min(options.value[0],options.max);
|
||||
options.value[1] = Math.min(options.value[1],options.max);
|
||||
|
||||
var scaleFir = Math.floor((options.value[0] - options.min) / (options.max - options.min) * 100)
|
||||
,scaleSec = Math.floor((options.value[1] - options.min) / (options.max - options.min) * 100)
|
||||
,scale = scaleSec - scaleFir + '%';
|
||||
var scaleFir = Math.floor((options.value[0] - options.min) / (options.max - options.min) * 100);
|
||||
var scaleSec = Math.floor((options.value[1] - options.min) / (options.max - options.min) * 100);
|
||||
var scale = scaleSec - scaleFir + '%';
|
||||
scaleFir = scaleFir + '%';
|
||||
scaleSec = scaleSec + '%';
|
||||
} else {
|
||||
|
|
@ -143,8 +143,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
'<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>';
|
||||
|
||||
var othis = $(options.elem)
|
||||
,hasRender = othis.next('.' + ELEM_VIEW);
|
||||
var othis = $(options.elem);
|
||||
var hasRender = othis.next('.' + ELEM_VIEW);
|
||||
//生成替代元素
|
||||
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||
that.elemTemp = $(temp);
|
||||
|
|
@ -204,12 +204,12 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
//划过滑块显示数值
|
||||
var timer;
|
||||
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
|
||||
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth
|
||||
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP)
|
||||
,tipsLeft = options.type === 'vertical' ? (sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()) : $(this).parent()[0].offsetLeft
|
||||
,left = tipsLeft / sliderWidth * 100
|
||||
,value = $(this).parent().data('value')
|
||||
,tipsTxt = options.setTips ? options.setTips(value) : value;
|
||||
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth;
|
||||
var sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP);
|
||||
var tipsLeft = options.type === 'vertical' ? (sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()) : $(this).parent()[0].offsetLeft;
|
||||
var left = tipsLeft / sliderWidth * 100;
|
||||
var value = $(this).parent().data('value');
|
||||
var tipsTxt = options.setTips ? options.setTips(value) : value;
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
|
||||
|
||||
clearTimeout(timer);
|
||||
|
|
@ -235,17 +235,17 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
|
||||
//滑块滑动
|
||||
Class.prototype.slide = function(setValue, value, i){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,sliderAct = that.elemTemp
|
||||
,sliderWidth = function(){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var sliderAct = that.elemTemp;
|
||||
var sliderWidth = function(){
|
||||
return options.type === 'vertical' ? options.height : sliderAct[0].offsetWidth
|
||||
}
|
||||
,sliderWrap = sliderAct.find('.' + SLIDER_WRAP)
|
||||
,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, from){
|
||||
};
|
||||
var sliderWrap = sliderAct.find('.' + SLIDER_WRAP);
|
||||
var sliderTxt = sliderAct.next('.' + SLIDER_INPUT);
|
||||
var inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val();
|
||||
var step = 100 / ((options.max - options.min) / Math.ceil(options.step));
|
||||
var change = function(offsetValue, index, from){
|
||||
if(Math.ceil(offsetValue) * step > 100){
|
||||
offsetValue = Math.ceil(offsetValue) * step
|
||||
}else{
|
||||
|
|
@ -254,8 +254,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
offsetValue = offsetValue > 100 ? 100: offsetValue;
|
||||
offsetValue = offsetValue < 0 ? 0: offsetValue;
|
||||
sliderWrap.eq(index).css((options.type === 'vertical' ?'bottom':'left'), offsetValue + '%');
|
||||
var firLeft = valueTo(sliderWrap[0].offsetLeft)
|
||||
,secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
|
||||
var firLeft = valueTo(sliderWrap[0].offsetLeft);
|
||||
var secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
|
||||
if(options.type === 'vertical'){
|
||||
sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"20px"});
|
||||
firLeft = valueTo(sliderWidth() - sliderWrap[0].offsetTop - sliderWrap.height());
|
||||
|
|
@ -281,8 +281,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
//如果开启范围选择，则返回数组值
|
||||
if(options.range){
|
||||
var arrValue = [
|
||||
sliderWrap.eq(0).data('value')
|
||||
,sliderWrap.eq(1).data('value')
|
||||
sliderWrap.eq(0).data('value'),
|
||||
sliderWrap.eq(1).data('value')
|
||||
];
|
||||
if(arrValue[0] > arrValue[1]) arrValue.reverse(); //如果前面的圆点超过了后面的圆点值，则调换顺序
|
||||
}
|
||||
|
|
@ -292,27 +292,40 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
|
||||
// 值完成选中的事件
|
||||
if(from === 'done') options.done && options.done(that.value);
|
||||
}
|
||||
,valueTo = function(value){
|
||||
var oldLeft = value / sliderWidth() * 100 / step
|
||||
,left = Math.round(oldLeft) * step;
|
||||
};
|
||||
var valueTo = function(value){
|
||||
var oldLeft = value / sliderWidth() * 100 / step;
|
||||
var left = Math.round(oldLeft) * step;
|
||||
if(value == sliderWidth()){
|
||||
left = Math.ceil(oldLeft) * step;
|
||||
}
|
||||
return left;
|
||||
}
|
||||
};
|
||||
|
||||
//拖拽元素
|
||||
,elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-slider-moving"></div'].join(''))
|
||||
,createMoveElem = function(move, up){
|
||||
var elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-slider-moving"></div'].join(''));
|
||||
var createMoveElem = function(sliderBtnElem, move, up){
|
||||
var upCall = function(){
|
||||
up && up();
|
||||
// 移动端延时一秒关闭
|
||||
up && up(lay.touchEventsSupported() ? 1000 : 0);
|
||||
elemMove.remove();
|
||||
options.done && options.done(that.value);
|
||||
// 移动端
|
||||
if (lay.touchEventsSupported()) {
|
||||
sliderBtnElem[0].removeEventListener('touchmove', move, lay.passiveSupported ? { passive: false } : false);
|
||||
sliderBtnElem[0].removeEventListener('touchend', upCall);
|
||||
sliderBtnElem[0].removeEventListener('touchcancel', upCall);
|
||||
}
|
||||
};
|
||||
$('#LAY-slider-moving')[0] || $('body').append(elemMove);
|
||||
elemMove.on('mousemove', move);
|
||||
elemMove.on('mouseup', upCall).on('mouseleave', upCall);
|
||||
// 移动端
|
||||
if (lay.touchEventsSupported()) {
|
||||
sliderBtnElem[0].addEventListener('touchmove', move, lay.passiveSupported ? { passive: false } : false);
|
||||
sliderBtnElem[0].addEventListener('touchend', upCall);
|
||||
sliderBtnElem[0].addEventListener('touchcancel', upCall);
|
||||
}
|
||||
};
|
||||
|
||||
//动态赋值
|
||||
|
|
@ -321,11 +334,15 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
//滑块滑动
|
||||
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
|
||||
var othis = $(this);
|
||||
othis.on('mousedown', function(e){
|
||||
othis.on('mousedown touchstart', function(e){
|
||||
e = e || window.event;
|
||||
if(e.type === 'touchstart'){
|
||||
e.clientX = e.originalEvent.touches[0].clientX;
|
||||
e.clientY = e.originalEvent.touches[0].clientY;
|
||||
}
|
||||
|
||||
var oldleft = othis.parent()[0].offsetLeft
|
||||
,oldx = e.clientX;
|
||||
var oldleft = othis.parent()[0].offsetLeft;
|
||||
var oldx = e.clientX;
|
||||
if(options.type === 'vertical'){
|
||||
oldleft = sliderWidth() - othis.parent()[0].offsetTop - sliderWrap.height()
|
||||
oldx = e.clientY;
|
||||
|
|
@ -333,6 +350,10 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
|
||||
var move = function(e){
|
||||
e = e || window.event;
|
||||
if (e.type === 'touchmove') {
|
||||
e.clientX = e.touches[0].clientX;
|
||||
e.clientY = e.touches[0].clientY;
|
||||
}
|
||||
var left = oldleft + (options.type === 'vertical' ? (oldx - e.clientY) : (e.clientX - oldx));
|
||||
if(left < 0)left = 0;
|
||||
if(left > sliderWidth())left = sliderWidth();
|
||||
|
|
@ -343,12 +364,14 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
e.preventDefault();
|
||||
};
|
||||
|
||||
var up = function(){
|
||||
var up = function(delay){
|
||||
othis.removeClass(ELEM_HOVER);
|
||||
setTimeout(function(){
|
||||
sliderAct.find('.' + SLIDER_TIPS).hide();
|
||||
}, delay);
|
||||
};
|
||||
|
||||
createMoveElem(move, up)
|
||||
createMoveElem(othis, move, up)
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -417,8 +440,8 @@ layui.define(['jquery', 'lay'], function(exports){
|
|||
|
||||
//事件处理
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
};
|
||||
|
||||
//核心入口
|
||||
|
|
|
|||
Loading…
Reference in New Issue