;
|
(function($, window, document, undefined) {
|
'use strict';
|
|
var pluginName = "jackWeiSlider";
|
|
var defaults = {
|
width: '400px',
|
handleSrc: '../Images/slider_handle.png',
|
progress: 0.3,
|
isCustomText: false
|
};
|
|
//构造函数
|
function JackWeiSlider(element, options) {
|
this.element = element;
|
this.settings = $.extend({}, defaults, options);
|
this._defaults = defaults;
|
this._name = pluginName;
|
|
this.isEnable = true;
|
this.dcX = 0;
|
this.barW = 0;
|
this.currW = 0;
|
this.haMarginL = -12;
|
this.txMarginL = -40;
|
this.isDrag = false;
|
this.progress = 0;
|
this.onStartDragCallback;
|
this.onDragCallback;
|
this.onStopDragCallback;
|
this.maxW = parseInt(this.settings.width.split('px')[0]);
|
this.isCustomText = this.settings.isCustomText;
|
|
this.init();
|
}
|
|
JackWeiSlider.prototype = {
|
init: function() {
|
var that = this; //避免与内部对象的this重名
|
var settings = that.settings;
|
var $element = $(this.element);
|
|
//添加slider元素
|
$element.append('<div style="width:' + settings.width + ';">\n' +
|
' <div class="jws-outside-bar">\n' +
|
' <div class="jws-inside-bar" style="background-color: ' + settings.color + '"></div>\n' +
|
' <img class="jws-handle" src=' + settings.handleSrc + '>\n' +
|
' <div class="jws-text"></div>\n' +
|
' </div>\n' +
|
' </div>'
|
);
|
|
//设置默认进度
|
this.setProgress(settings.progress);
|
|
$(this.element).on('mousedown', '.jws-handle', function(e) {
|
if (!that.isEnable) return;
|
|
that.element.attr('tabindex', -1)
|
that.element.css("outline", "none")
|
that.element.focus();
|
that.isDrag = true;
|
that.dcX = e.clientX;
|
if (typeof that.onStartDragCallback === 'function')
|
that.onStartDragCallback();
|
e.preventDefault();
|
});
|
|
$(document).mousemove(function(e) {
|
if (!that.isDrag) return;
|
|
//阻止默认事件
|
e.preventDefault();
|
|
//计算偏移量并开始移动滑块
|
that.move(e.clientX - that.dcX);
|
// console.log(e.clientX);
|
|
//拖动事件回掉
|
if (typeof that.onDragCallback === 'function')
|
that.onDragCallback(that.progress);
|
});
|
|
$(this.element).keydown(function(e) {
|
// if (document.activeElement != that.element) {
|
// return
|
// }
|
//left arrow
|
if (e.keyCode == 37) {
|
that.setProgress(that.progress - 0.003)
|
//拖动事件回掉
|
if (typeof that.onDragCallback === 'function')
|
that.onDragCallback(that.progress);
|
}
|
//right arrow
|
else if (e.keyCode == 39) {
|
that.setProgress(that.progress + 0.003)
|
//拖动事件回掉
|
if (typeof that.onDragCallback === 'function')
|
that.onDragCallback(that.progress);
|
}
|
});
|
|
$(document).mouseup(function(e) {
|
if (!that.isDrag) return;
|
|
that.isDrag = false;
|
|
//获取当前控件的位置数据
|
that.updateData(that);
|
|
//停止拖拽回调
|
if (typeof that.onStopDragCallback === 'function')
|
that.onStopDragCallback();
|
});
|
},
|
enable: function() {
|
this.isEnable = true;
|
return this;
|
},
|
disEnable: function() {
|
this.isEnable = false;
|
return this;
|
},
|
setText: function(text) {
|
$(this.element).find('.jws-text').text(text);
|
this.isCustomText = true;
|
return this;
|
},
|
updateData: function() {
|
var $element = $(this.element);
|
this.currW = this.barW = parseInt($element.find('.jws-inside-bar').css('width').split("px")[0]);
|
this.haMarginL = parseInt($element.find('.jws-handle').css('margin-left').split("px")[0]);
|
this.txMarginL = parseInt($element.find('.jws-text').css('margin-left').split("px")[0]);
|
},
|
move: function(offset) {
|
//计算控件现在的位置
|
var w = Math.round(this.barW + offset);
|
var hml = Math.round(this.haMarginL + offset);
|
var tml = Math.round(this.txMarginL + offset);
|
// console.log('w:' + w + ' hml:' + hml + ' tml:' + tml);
|
|
//往左限制
|
if (w < 0 || hml < -12 || tml < -40) {
|
w = 0
|
hml = -12
|
tml = -40
|
}
|
|
//往右限制
|
if (w > this.maxW || hml > -12 + this.maxW || tml > -40 + this.maxW) {
|
w = this.maxW
|
hml = -12 + this.maxW
|
tml = -40 + this.maxW
|
}
|
|
//更新progress
|
this.progress = w / this.maxW;
|
|
//更新UI
|
var $element = $(this.element);
|
$element.find('.jws-inside-bar').css('width', w);
|
$element.find('.jws-handle').css('margin-left', hml);
|
$element.find('.jws-text').css('margin-left', tml);
|
if (!this.isCustomText)
|
$element.find('.jws-text').text(Math.round(this.progress * 100) + "%");
|
},
|
setProgress: function(progress) {
|
if (progress > 1) {
|
progress = 1
|
} else if (progress < 0) {
|
progress = 0
|
}
|
var offset = progress * this.maxW - this.currW; //减去当前位置回到原点
|
this.move(offset, this);
|
this.updateData(this);
|
return this;
|
},
|
setOnStartDragCallback: function(callback) {
|
this.onStartDragCallback = callback;
|
return this;
|
},
|
setOnDragCallback: function(callback) {
|
this.onDragCallback = callback;
|
return this;
|
},
|
setOnStopDragCallback: function(callback) {
|
this.onStopDragCallback = callback;
|
return this;
|
}
|
}
|
|
$.fn.jackWeiSlider = function(options) {
|
return new JackWeiSlider(this, options);
|
}
|
|
})(jQuery, window, document);
|
