/*
|
*/
|
(function($) {
|
var methods = {
|
init: function(opts) {
|
var settings = {};
|
return this.each(function() {
|
var $this = $(this);
|
var data = $this.data('TimeSliderPlugin');
|
var options = opts || {};
|
options = $.extend({}, settings, options);
|
if (!data) {
|
data = new $.TimeSliderPlugin(this, options);
|
$(this).data('TimeSliderPlugin', data);
|
data.init();
|
}
|
});
|
},
|
destroy: function() {
|
return this.each(function() {
|
var $this = $(this);
|
$this.removeData('TimeSliderPlugin');
|
});
|
},
|
setCurrent: function(index) {
|
return this.each(function() {
|
getData(this).setCurrent(index);
|
});
|
},
|
getCurrent: function(index) {
|
return getData(this).getCurrent(index);
|
},
|
};
|
|
function getData(context) {
|
var $this = $(context);
|
var data = $this.data('TimeSliderPlugin');
|
if (!data) {
|
alert("timeslider控件未初始化!");
|
}
|
return data;
|
};
|
//初始化函数
|
$.TimeSliderPlugin = function(target, opts) {
|
var options = opts;
|
var $body = $(target);
|
var currentIndex = 0;
|
var $this = this;
|
this.setCurrent = function(index) {
|
if (opts.reverse){
|
index= opts.max-index-1;
|
}
|
currentIndex = index;
|
this.updateButtonStyle(currentIndex);
|
this.changeLayers(currentIndex);
|
};
|
this.getCurrent = function() {
|
if (opts.reverse){
|
return opts.max-currentIndex-1;
|
}
|
return currentIndex;
|
};
|
this.init = function() {
|
if (opts.reverse){
|
opts.timeset.reverse();
|
}
|
var timeset = opts.timeset;
|
|
//初始化控件布局<div class="time_outer"></div>
|
$body.append('<div class="time_txt"></div><div class="time_container"><div class="to_left_un"></div><div class="showMultDate_img">'+opts.groupName+'</div><div class="time_MultContainer"><div class="time_image_zz"></div></div><div class="to_right"></div><div class="date"></div></div>');
|
|
var max = opts.timeset.length;
|
var min = opts.min;
|
//生成时间条刻度
|
for (var i = 0; i < max; i++) {
|
var left = 200 / (max - 1) * i;
|
if (i == max - 1) left = left - 2 - 5 - 5;
|
$(".time_MultContainer").append("<div class='multshowdate' style='left:" + (left + 5) + "px'></div>");
|
$body.find(".date").append("<div style='position:absolute;top:0px;left:" + (left + 10) + "px'>" + timeset[i].substring(0, 4) + "</div>");
|
}
|
|
//生成时间lbl
|
var timetxt = timeset[currentIndex];
|
$body.find(".time_txt").html(timetxt);
|
|
//to_left
|
$body.find(".to_left_un").click(function() {
|
//修改左右按钮样式
|
if (currentIndex > 0) {
|
currentIndex--;
|
$this.updateButtonStyle(currentIndex);
|
$this.changeLayers(currentIndex);
|
opts.timeChangeHandler(opts.reverse?opts.max-currentIndex-1:currentIndex);
|
}
|
});
|
//to_right
|
$body.find(".to_right").click(function() {
|
|
//修改左右按钮样式
|
if (currentIndex < max - 1) {
|
currentIndex++;
|
$this.updateButtonStyle(currentIndex);
|
$this.changeLayers(currentIndex);
|
opts.timeChangeHandler(opts.reverse?opts.max-currentIndex-1:currentIndex);
|
}
|
|
});
|
|
};
|
this.updateButtonStyle = function(current) {
|
|
if (current > 0) {
|
$body.find(".to_left_un").removeClass().addClass("to_left");
|
}
|
if (current == 0) {
|
$body.find(".to_left").removeClass().addClass("to_left_un");
|
}
|
if (current == options.max - 1) {
|
$body.find(".to_right").removeClass().addClass("to_right_un");
|
}
|
if (current < options.max - 1) {
|
$body.find(".to_right_un").removeClass().addClass("to_right");
|
}
|
|
}
|
|
this.changeLayers = function(current) {
|
var left = 200 / (options.max - 1) * current;
|
if (current == options.max - 1) {
|
left = left - 10;
|
}
|
//改变刻度指针位置
|
$body.find(".time_image_zz").css({
|
"left": left
|
});
|
$body.find(".time_txt").html(options.timeset[current]);
|
$body.find(".time_txt").css({
|
"margin-left": left + 20
|
});
|
}
|
|
|
};
|
$.fn.timeslider = function(method) {
|
if (methods[method]) {
|
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
} else if (typeof method === 'object' || !method) {
|
return methods.init.apply(this, arguments);
|
} else {
|
$.error('Method ' + method + ' does not exist on timeslider');
|
}
|
return this;
|
};
|
})(jQuery);
|
