|
|
|
/**
|
|
|
|
* jquery plugin -- jquery.slideunlock.js
|
|
|
|
* Description: a slideunlock plugin based on jQuery
|
|
|
|
* Version: 1.1
|
|
|
|
* Author: Dong Yuhao
|
|
|
|
* www.sucaijiayuan.com
|
|
|
|
* created: March 27, 2016
|
|
|
|
*/
|
|
|
|
function SliderUnlock(elm, options, success) {
|
|
|
|
var me = this;
|
|
|
|
var html = require('common/slide-unlock.hbs')();
|
|
|
|
var $c = me.checkElm(elm) ? $(elm) : $;
|
|
|
|
|
|
|
|
success = me.checkFn(success) ? success : function() {};
|
|
|
|
|
|
|
|
me.elm = $(html).replaceAll($c);
|
|
|
|
|
|
|
|
me.$progress = me.elm.find('.progress');
|
|
|
|
|
|
|
|
var opts = {
|
|
|
|
successLabelTip: '验证成功',
|
|
|
|
duration: 200,
|
|
|
|
swipestart: false,
|
|
|
|
min: 0,
|
|
|
|
max: me.elm.width(),
|
|
|
|
index: 0,
|
|
|
|
isOk: false,
|
|
|
|
lableIndex: 0
|
|
|
|
};
|
|
|
|
|
|
|
|
opts = $.extend(opts, options || {});
|
|
|
|
|
|
|
|
$(opts.html).appendTo($c);
|
|
|
|
|
|
|
|
// $elm
|
|
|
|
// opts
|
|
|
|
me.opts = opts;
|
|
|
|
|
|
|
|
// 是否开始滑动
|
|
|
|
me.swipestart = opts.swipestart;
|
|
|
|
|
|
|
|
// 最小值
|
|
|
|
me.min = opts.min;
|
|
|
|
|
|
|
|
// 最大值
|
|
|
|
me.max = opts.max;
|
|
|
|
|
|
|
|
// 当前滑动条所处的位置
|
|
|
|
me.index = opts.index;
|
|
|
|
|
|
|
|
// 是否滑动成功
|
|
|
|
me.isOk = opts.isOk;
|
|
|
|
|
|
|
|
// 滑块宽度
|
|
|
|
me.labelWidth = me.elm.find('.label').width();
|
|
|
|
|
|
|
|
// 滑块背景
|
|
|
|
me.sliderBg = me.elm.find('#slider_bg');
|
|
|
|
|
|
|
|
// 鼠标在滑动按钮的位置
|
|
|
|
me.lableIndex = opts.lableIndex;
|
|
|
|
|
|
|
|
// success
|
|
|
|
me.success = success;
|
|
|
|
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
|
|
|
SliderUnlock.prototype.init = function() {
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
me.updateView();
|
|
|
|
me.elm.find('.label').on('mousedown', function(event) {
|
|
|
|
if (me.isOk) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var e = event || window.event;
|
|
|
|
|
|
|
|
me.lableIndex = e.clientX - this.offsetLeft;
|
|
|
|
me.handerIn();
|
|
|
|
}).on('mousemove', function(event) {
|
|
|
|
if (me.isOk) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
me.handerMove(event);
|
|
|
|
}).on('mouseup', function(event) {
|
|
|
|
if (me.isOk) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
me.handerOut();
|
|
|
|
}).on('mouseout', function(event) {
|
|
|
|
if (me.isOk) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
me.handerOut();
|
|
|
|
}).on('touchstart', function(event) {
|
|
|
|
if (me.isOk) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var e = event || window.event;
|
|
|
|
|
|
|
|
me.lableIndex = e.originalEvent.touches[0].pageX - this.offsetLeft;
|
|
|
|
me.handerIn();
|
|
|
|
}).on('touchmove', function(event) {
|
|
|
|
if (me.isOk) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
me.handerMove(event, 'mobile');
|
|
|
|
}).on('touchend', function(event) {
|
|
|
|
if (me.isOk) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
me.handerOut();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 鼠标/手指接触滑动按钮
|
|
|
|
*/
|
|
|
|
SliderUnlock.prototype.handerIn = function() {
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
me.swipestart = true;
|
|
|
|
me.min = 0;
|
|
|
|
me.max = me.elm.width();
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 鼠标/手指移出
|
|
|
|
*/
|
|
|
|
SliderUnlock.prototype.handerOut = function() {
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
// 停止
|
|
|
|
me.swipestart = false;
|
|
|
|
|
|
|
|
// me.move();
|
|
|
|
if (me.index < me.max) {
|
|
|
|
me.reset();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 鼠标/手指移动
|
|
|
|
* @param event
|
|
|
|
* @param type
|
|
|
|
*/
|
|
|
|
SliderUnlock.prototype.handerMove = function(event, type) {
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
if (me.swipestart) {
|
|
|
|
event.preventDefault();
|
|
|
|
event = event || window.event;
|
|
|
|
if (type === 'mobile') {
|
|
|
|
me.index = event.originalEvent.touches[0].pageX - me.lableIndex;
|
|
|
|
} else {
|
|
|
|
me.index = event.clientX - me.lableIndex;
|
|
|
|
}
|
|
|
|
me.move();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 鼠标/手指移动过程
|
|
|
|
*/
|
|
|
|
SliderUnlock.prototype.move = function() {
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
if ((me.index + me.labelWidth) >= me.max) {
|
|
|
|
me.index = me.max - me.labelWidth - 2;
|
|
|
|
|
|
|
|
// 停止
|
|
|
|
me.swipestart = false;
|
|
|
|
|
|
|
|
// 解锁
|
|
|
|
me.isOk = true;
|
|
|
|
|
|
|
|
}
|
|
|
|
if (me.index < 0) {
|
|
|
|
me.index = me.min;
|
|
|
|
|
|
|
|
// 未解锁
|
|
|
|
me.isOk = false;
|
|
|
|
}
|
|
|
|
if (me.index + me.labelWidth + 2 === me.max && me.max > 0 && me.isOk) {
|
|
|
|
// 解锁默认操作
|
|
|
|
$('.label').next('.labelTip').
|
|
|
|
text(me.opts.successLabelTip).css({
|
|
|
|
color: '#fff'
|
|
|
|
});
|
|
|
|
|
|
|
|
me.success();
|
|
|
|
}
|
|
|
|
me.updateView();
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 更新视图
|
|
|
|
*/
|
|
|
|
SliderUnlock.prototype.updateView = function() {
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
me.sliderBg.css('width', me.index);
|
|
|
|
me.elm.find('.label').css('left', me.index + 'px');
|
|
|
|
me.$progress.css('width', me.index + 'px');
|
|
|
|
me.elm.toggleClass('slide-unlock-ok', me.isOk);
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 重置slide的起点
|
|
|
|
*/
|
|
|
|
SliderUnlock.prototype.reset = function() {
|
|
|
|
var me = this;
|
|
|
|
|
|
|
|
me.index = 0;
|
|
|
|
me.isOk = false;
|
|
|
|
me.sliderBg.animate({
|
|
|
|
width: 0
|
|
|
|
}, me.opts.duration);
|
|
|
|
me.elm.find('.label').animate({
|
|
|
|
left: me.index
|
|
|
|
}, me.opts.duration)
|
|
|
|
.next('#lableTip').animate({
|
|
|
|
opacity: 1
|
|
|
|
}, me.opts.duration);
|
|
|
|
me.updateView();
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 检测元素是否存在
|
|
|
|
* @param elm
|
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
SliderUnlock.prototype.checkElm = function(elm) {
|
|
|
|
if ($(elm).length > 0) {
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
throw 'this element does not exist.';
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 检测传入参数是否是function
|
|
|
|
* @param fn
|
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
SliderUnlock.prototype.checkFn = function(fn) {
|
|
|
|
if (typeof fn === 'function') {
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
throw 'the param is not a function.';
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = SliderUnlock; |
...
|
...
|
|
