/**
*进度条
*/
var ProgressScrollBar = function (model) {
this.defaults = {
isCanMove: true,//是否启用拖动
container: "",//最外容器ID
Mainselector: "", //主要div的ID jq选择器字符串#id
Textselector: false, //文字显示查找选择器inputobj
value: 0, //初始值
maxValue: 200, //最大值
currentX: 0,//当前位置px单位
scroll_Track: false, //主干线对象
scroll_Thumb: false //图标对象
};
var opt = $.extend(this.defaults, model);
var mainDivWidth = 0;
var mSelector;
var $Textselector;
var offetWidth;
//初始化
this.Initialize = function () {
if (opt.value > opt.maxValue) {
alert("给定当前值大于了最大值");
return;
}
mSelector = $(opt.Mainselector);
$Textselector = opt.Textselector;
if (!opt.scroll_Track) {
mSelector.append(‘<div class="scroll_Track"></div>‘);
opt.scroll_Track = mSelector.find(".scroll_Track");
}
if (!opt.scroll_Thumb) {
mSelector.append(‘<div class="scroll_Thumb"></div>‘);
opt.scroll_Thumb = mSelector.find(".scroll_Thumb");
}
mainDivWidth = mSelector.width(); //当前idv宽度
offetWidth = opt.scroll_Thumb.width();
this.GetValue();
opt.scroll_Track.css("width", opt.currentX + 2 + "px");
opt.scroll_Thumb.css("margin-left", opt.currentX + "px");
if (opt.isCanMove) {
this.Value();
}
if ($Textselector && opt.value >= 0)
$Textselector.val(opt.value);
},
this.Value = function () {
var valite = false;
var currentValue;
opt.scroll_Thumb.mousedown(function () {
valite = true;
mSelector.parent().mousemove(function (event) {
console.log(event.offsetX + ", cleint：" + event.clientX + "， parent: " + mSelector.parent().offset().left);
if (valite == false) return;
var changeX = event.clientX - opt.currentX;
currentValue = changeX - opt.currentX - mSelector.offset().left - (offetWidth / 2);
opt.scroll_Thumb.css("margin-left", currentValue + "px");
opt.scroll_Track.css("width", currentValue + 2 + "px");
if ((currentValue + offetWidth) >= mainDivWidth) {
opt.scroll_Thumb.css("margin-left", mainDivWidth - offetWidth + "px");
opt.scroll_Track.css("width", mainDivWidth + 2 + "px");
opt.value = opt.maxValue;
} else if (currentValue <= 0) {
opt.scroll_Thumb.css("margin-left", "0px");
opt.scroll_Track.css("width", "0px");
} else {
opt.value = parseInt(opt.maxValue * (currentValue / mainDivWidth));
}
if ($Textselector && opt.value >= 0)
$Textselector.val(opt.value);
});
});
opt.scroll_Thumb.mouseup(function () {
opt.value = parseInt(opt.maxValue * (currentValue / mainDivWidth));
valite = false;
if (opt.value >= opt.maxValue) opt.value = opt.maxValue;
if (opt.value <= 0) opt.value = 0;
if ($Textselector && opt.value >= 0)
$Textselector.val(opt.value);
});
},
this.GetValue = function () {
opt.currentX = mainDivWidth * (opt.value / opt.maxValue);
},
//按值自动滚动
this.SetValue = function (aValue) {
opt.value = aValue;
if (opt.value >= opt.maxValue) opt.value = opt.maxValue;
if (opt.value <= 0) opt.value = 0;
var mWidth = opt.value / opt.maxValue * mainDivWidth;
opt.scroll_Thumb.animate({ "margin-left": mWidth + "px" });
opt.scroll_Track.animate({ "width": mWidth + 2 + "px" });
if ((mWidth + offetWidth) >= mainDivWidth) {
opt.scroll_Thumb.animate({ "margin-left": mainDivWidth - offetWidth + "px" });
opt.scroll_Track.animate({ "width": mainDivWidth + 2 + "px" });
} else if (mWidth <= 0) {
opt.scroll_Thumb.animate({ "margin-left": "0px" });
opt.scroll_Track.animate({ "width": "0px" });
} else {
opt.value = Math.round(opt.maxValue * (mWidth / mainDivWidth));
}
if ($Textselector && opt.value >= 0)
$Textselector.val(opt.value);
},
//按像素自动滚动
this.SetPixelValue = function (pixelValue) {
opt.scroll_Thumb.animate({ "margin-left": pixelValue + "px" });
opt.scroll_Track.animate({ "width": pixelValue + "px" });
if ((pixelValue + offetWidth) >= mainDivWidth) {
opt.scroll_Thumb.animate({ "margin-left": mainDivWidth - offetWidth + "px" });
opt.scroll_Track.animate({ "width": mainDivWidth + "px" });
} else if (pixelValue <= 0) {
opt.scroll_Thumb.animate({ "margin-left": "0px" });
opt.scroll_Track.animate({ "width": "0px" });
} else {
opt.value = Math.round(opt.maxValue * (pixelValue / mainDivWidth));
}
}
}