(function ($) {
/**
* 2018-9-20 星期四
* //默认参数 (放在插件外面，避免每次调用插件都调用一次，节省内存)
* =============================================================
* 由于放在此处会造成缓存，影响下次插件使用 （已放下面插件中）
*
var defaults = {
ratio: '100', //滑动最大值
value: '', //默认值，range为true时 此时绑定值是一个数组
range: false,//是否开启双向滑动
clickBack: function(){
}
};
*/
//设置全局变量
var opts,isDown = false,index;
//扩展方法
$.fn.extend({
slide: function(options){
//默认参数
var defaults = {
ratio: '100', //滑动最大值
value: '', //默认值，range为true时 此时绑定值必须是一个数组
range: false,//是否开启双向滑动
clickBack: function(){
}
};
//扩展对象，覆盖默认对象
opts = $.extend(defaults, options);
return this.each(function(){
var html,obj = $(this);
if(opts.range){//判断是否开启双向滑动
html = '<div class="range">'+
'<span class="chunk-one" data-index="1">'+
'<strong>0</strong>'+
'</span>'+
'<span class="chunk-two" data-index="2">'+
'<strong>'+opts.ratio+'</strong>'+
'</span>'+
'<div class="strip-one">'+
'</div>'+
'<div class="strip-two">'+
'</div>'+
'</div>';
}else{//单滑块
html = '<div class="range">'+
'<span class="chunk-two" data-index="2">'+
'<strong>'+opts.ratio+'</strong>'+
'</span>'+
'<div class="strip-one">'+
'</div>'+
'<div class="strip-two">'+
'</div>'+
'</div>';
}
obj.html(html)//添加html
obj.attr('data-ratio', opts.ratio);//设置最大值，用于后面组件取值
obj.attr('data-range', opts.range);//设置滑块类型，用于后面组件取值
fn.setValue(obj, opts)//设置默认值
fn.action(obj, opts)//事件操作
})
}
})
$('html,body').on('mouseup',function(){//鼠标松开
isDown = false
})
//全局方法
var fn = {
action: function(obj, opts){
if(this.browserRedirect()){//判断设备 pc端使用mouse事件
obj.on('mousedown', '.chunk-one,.chunk-two', function(){
isDown = true
index = $(this).attr('data-index')
$(this).css('z-index','20').siblings('span').css('z-index','5');
})
obj.on('mousemove', function(event){
if(isDown){//鼠标按下时滑动生效
var x = event.clientX-obj.find(".range")[0].offsetLeft;//获取滑动的X轴
if(x > obj.find(".range").width()){
x = obj.find(".range").width()
}else if(x<0){
x=0
}
opts.ratio = obj.attr('data-ratio');//获取当前组件的最大值
opts.range = obj.attr('data-range');//获取当前组件的滑块类型
fn.calculate(x, obj, opts) //计算滑块值
}
})
}else{//移动端使用touch事件
obj.on('touchmove', '.chunk-one,.chunk-two' , function(event){
$(this).css('z-index','20').siblings('span').css('z-index','5');
index = $(this).attr('data-index')
var x = event.originalEvent.touches[0].clientX-obj.find(".range")[0].offsetLeft;//获取滑动的X轴
if(x > obj.find(".range").width()){
x = obj.find(".range").width()
}else if(x<0){
x=0
}
fn.calculate(x, obj, opts) //计算滑块值
})
}
},
//计算滑块值
calculate: function(x, obj, opts){
if(opts.range == 'true' || opts.range == true){//判断是否开启双向滑动
var one = obj.find('.chunk-one'),two = obj.find('.chunk-two');
var oneLeft = one.position().left,twoLeft = two.position().left,width = obj.find(".range").width()
if(index == 1){//第一个滑块滑动时
if( x >= twoLeft){//第一个滑块不能大于第二个
return false
}
//计算数值
var textN = x*(opts.ratio/100)
one.find('strong').text(Math.round(textN/width*100))
//计算滑动值
var num = (Math.round(x/width*opts.ratio)*100)/opts.ratio
one.css('left', num+"%")
}else if(index == 2){
if(oneLeft >= x){//第一个滑块不能大于第二个
return false
}
//计算数值
var textN = x*(opts.ratio/100)
two.find('strong').text(Math.round(textN/width*100))
//计算滑动值
var num = (Math.round(x/width*opts.ratio)*100)/opts.ratio
two.css('left', num+"%")
}
//设置选着范围宽度
obj.find('.strip-two').css({'left': one.position().left+'px','width': (two.position().left-one.position().left)+'px'})
setTimeout(function(){
//由于使用动画，延时处理
obj.find('.strip-two').css({'left': one.position().left+'px','width': (two.position().left-one.position().left)+'px'})
},300)
//回调数据
opts.clickBack([one.find('strong').text(), two.find('strong').text()])
}else {//单滑块
var two = obj.find('.chunk-two'),width = obj.find(".range").width()
//计算数值
var textN = x*(opts.ratio/100)
two.find('strong').text(Math.round(textN/width*100))
//计算滑动值
var num = (Math.round(x/width*opts.ratio)*100)/opts.ratio
two.css('left', num+"%")
//设置选着范围宽度
obj.find('.strip-two').css({'width': (two.position().left)+'px'})
setTimeout(function(){
//由于使用动画，延时处理
obj.find('.strip-two').css({'width': (two.position().left)+'px'})
},300)
//回调数据
opts.clickBack([two.find('strong').text()])
}
},
//设置默认值
setValue: function(self, options){
if(options.range){//双向滑块
var one = self.find('.chunk-one'),two = self.find('.chunk-two');
options.value == '' ? options.value = ['0', options.ratio] : options.value
//设置偏移数
self.find('.chunk-one').css('left', Math.round(options.value[0]/options.ratio*100)+'%')
self.find('.chunk-two').css('left', Math.round(options.value[1]/options.ratio*100)+'%')
//设置数值
self.find('.chunk-one strong').text(options.value[0])
self.find('.chunk-two strong').text(options.value[1])
//设置选着范围宽度
self.find('.strip-two').css({'left': one.position().left+'px','width': (two.position().left-one.position().left)+'px'})
}else{//单滑块
var two = self.find('.chunk-two');
options.value == '' ? options.value = [options.ratio/2] : options.value
if(typeof options.value == 'string'){
//设置偏移数
two.css('left', Math.round(options.value/options.ratio*100)+'%')
//设置数值
self.find('.chunk-two strong').text(options.value)
}else{
//设置偏移数
two.css('left', Math.round(options.value[0]/options.ratio*100)+'%')
//设置数值
self.find('.chunk-two strong').text(options.value[0])
}
//设置选着范围宽度
self.find('.strip-two').css({'width': (two.position().left)+'px'})
}
},
//判断设备
browserRedirect: function(){
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
return false
} else {
return true
}
}
}
})(jQuery)