基于jquery 的一个progressbar widge


Posted in Javascript onOctober 29, 2010

此项目的demo网站http://wijmo.com/Wijmo-Open/samples/

/* 
* wijprogressbar Widget. V1.0 
* 
* Copyright (c) Componentone Inc. 
* 
* Depends: 
* Jquery-1.4.2.js 
* jquery.ui.core.js 
* jquery.ui.widget.js 
* 
*Optional dependence for effect settings: 
* jquery.effects.core.js 
* jquery.effects.blind.js 
* jquery.effects.bounce.js 
* jquery.effects.clip.js 
* jquery.effects.drop.js 
* jquery.effects.explode.js 
* jquery.effects.fold.js 
* jquery.effects.hightlight.js 
* jquery.effects.pulsate.js 
* jquery.effects.scale.js 
* jquery.effects.shake.js 
* jquery.effects.slide.js 
* jquery.effects.transfer.js 
* HTML: 
* <div id="progressbar" style="width:***;height:***"></div> 
*/ 
(function ($) { 
$.widget("ui.wijprogressbar", $.ui.progressbar, { 
options: { 
/// <summary> 
///The label's alignment on the progress bar. The value should be "east", "west", "center", "north", "south" or "running". 
///Default:"center". 
///Type:String. 
///Code sample:$('.selector').wijprogressbar('option','labelAlign','center'). 
///</summary> 
labelAlign: "center", 
/// <summary> 
///The value of the progress bar,the type should be numeric. 
///Default:0. 
///Type:Number. 
///Code sample:$('.selector').wijprogressbar('option','value',60). 
///</summary> 
maxValue: 100, 
/// <summary> 
///The minimum value of the progress bar,the type should be numeric. 
///Default:0. 
///Type:Number. 
///Code sample:$('.selector').wijprogressbar('option','minValue',0). 
///</summary> 
minValue: 0, 
/// <summary> 
///The fill direction of the progress bar.the value should be "east", "west", "north" or "south". 
///Default:"east". 
///Type:String. 
///Code sample:$('.selector').wijprogressbar('option','fillDirection','east'). 
///</summary> 
fillDirection: "east", 
/// <summary> 
///The progressbar's orientation.the value should be 'horizontal' or 'vertical'. 
///Default:"horizontal". 
///Type:String. 
///Code sample:$('selector').wijprogressbar('option','orientation','horizontal'). 
///</summary> 
///orientation: "horizontal", 
/// <summary> 
///Sets the format of the label text.The available formats are as follows: 
///{0} or {ProgressValue} express the current progress Value. 
///{1} or {PercentProgress} express the current percent of the progress bar. 
///{2} or {RemainingProgress} express the remaining progress of the progress bar. 
///{3} or {PercentageRemaining} express the remaining percent of the progress bar. 
///{4} or {Min} express the min Vlaue of the progress bar. 
///{5} or {Max} express the max Value of the progress bar. 
///Default:"{1}%". 
///Type:String. 
///Code sample:$('.selector').wijprogressbar('option','labelFormatString','{0}%'). 
///</summary> 
labelFormatString: "{1}%", 
/// <summary> 
///Set the format of the ToolTip of the progress bar,the expression of the format like the labelFormatString. 
///Default:"{1}%". 
///Type:String. 
///Code sample:$('.selector').wijprogressbar('option','toolTipFormatString','{1}%'). 
///</summary> 
toolTipFormatString: "{1}%", 
/// <summary> 
///The increment of the progress bar's indicator. 
///Default:1. 
///Type:Number. 
///</summary> 
///Code sample:$('.selector').wijprogressbar('option','indicatorIncrement',10). 
indicatorIncrement: 1, 
/// <summary> 
///The Image's url of the indicator. 
///Default:"". 
///Type:String. 
///Code sample:$('.selector').wijprogressbar('option','indicatorImage','images/abc.png'). 
///</summary> 
indicatorImage: "", 
/// <summary> 
///The delay of the progressbar's animation. 
///Default:0. 
///Type:Number. 
///Code sample:$('.selector').wijprogressbar('option', 
///</summary> 
animationDelay: 0, 
/// <summary> 
///The options parameter of the jQuery's animation. 
///Default:"{animated:'progress',duration:500}". 
///Type:Options. 
///Code sample:$('.selector').wijprogressbar('option','animationOptions',{animated:'progress',duration:600}). 
///</summary> 
animationOptions: { 
animated: 'progress', 
duration: 500 
} 
}, 

 //when set the options, trigger this method. 
_setOption: function (key, value) { 
var val, self = this; 
switch (key) { 
case "value": 
val = parseInt(value); 
self.options[key] = val; 
self._refreshValue(val); 
break; 
case "maxValue": 
case "minValue": 
val = parseInt(value); 
self.options[key] = val; 
self[key === "maxValue" ? "max" : "min"] = val; 
self._refreshValue(); 
break; 
case "labelFormatString": 
case "toolTipFormatString": 
self.options[key] = value; 
self._refreshValue(); 
//$.Widget.prototype._setOption.apply(this, arguments); 
break; 
case "orientation": 
case "fillDirection": 
case "labelAlign": 
case "indicatorImage": 
self.options[key] = value; 
self._initElements(); 
self._refreshValue(); 
//$.Widget.prototype._setOption.apply(this, arguments); 
break; 
case "indicatorIncrement": 
value = (value == 0 ? 1 : value); 
self.options[key] = value; 
self._initElements(); 
self._refreshValue(); 
break; 
default: break; 
} 
$.Widget.prototype._setOption.apply(self, arguments); 
}, 


 ///create the widget 
_create: function () { 
var self = this; 
self.min = self.options.minValue; 
self.max = self.options.maxValue; 
self.element.addClass("ui-wijprogressbar"); 
$.ui.progressbar.prototype._create.apply(self, arguments); 
self.label = $("<span>").addClass("ui-progressbar-label ui-corner-left").appendTo(self.valueDiv); 
self._initElements(); 
self._isInit = true; 
self._refreshValue(); 
}, 


 ///Trigger the pressbar event. 
_triggerEvent: function (eventName, oldValue, newValue, cancel) { 
var ea = $.Event(eventName); 
ea.data = { 
oldValue: oldValue, 
newValue: newValue, 
cancel: cancel 
}; 
this._trigger(eventName, ea); 
return ea.data.cancel; 
}, 


//refresh the progress value. 
_refreshValue: function () { 
var self = this; 
if (!self._isInit) { 
return; 
} 
var value = self.value(); 
var percent = (value - self.min) / (self.max - self.min) * 100; 
var o = self.options; 
var cancel = self._triggerEvent("beforeProgressChanging", self.element.attr("aria-valuenow"), value, false); 
if (cancel) { 
return; 
} 
self.valueDiv.css({ 
width: "", 
height: "" 
}); 





// If have animation. 
if (o.animationOptions.animated && o.animationOptions.duration > 0) { 
setTimeout($.proxy(function () { 
var o = self.options.animationOptions; 
var animateOptions = { 
content: self.valueDiv, 
complete: $.proxy(function () { 
self._triggerEvent("progressChanged", self.element.attr("aria-valuenow"), value, false); 
}, self), 
step: $.proxy(function (ovalue) { 
self._performAnimating(ovalue); 
}, self), 
processValue: percent 
} 
var animations = $.ui.wijprogressbar.animations; 
var duration = o.duration; 
var easing = o.animated; 
if (easing && !animations[easing]) { 
easing = "progress"; 
} 
if (!animations[easing]) { 
animations[easing] = function (options) { 
this.progress(options, { 
easing: easing, 
duration: duration || 1000 
}); 
} 
} 
animations[easing](animateOptions, self.options.animationOptions); 
}, self), o.animationDelay); 
} 
else { 
//trigger the progressChanged event. 
var oldValue = self.element.attr("aria-valuenow"); 
self._refreshProgress(percent); 
self._triggerEvent("progressChanged", oldValue, value, false); 
} 
}, 



 ///Set the label's position of the progress bar. 
_setLabelSide: function () { 
var self = this; 
var fillDirection = self.options.fillDirection; 
var labelAlign = self.options.labelAlign; 
if (self._isHorizontal()) { 
if (labelAlign === "west" || labelAlign === "east" || labelAlign === "center") { 
self.label.css("width", self.element.width() + 'px'); 
} 
else 
if (labelAlign === "running") { 
self.label.css("width", "auto"); 
} 
else { 
self.element.css("line-height", "normal"); 
self.valueDiv.css("line-height", "normal"); 
self.label.css("height", labelAlign === "north" ? self.element.height() + 'px' : "auto"); 
} 
} 
else { 
if (labelAlign === "west" || labelAlign === "east" || labelAlign === "center") { 
self.label.css({ "line-height": self.element.height() + 'px', "width": self.element.width() + 'px' }); 
} 
else 
if (labelAlign === "running") { 
self.label.css({ "height": "auto", "width": self.element.width() + 'px' }); 
} 
else { 
self.element.css("line-height", "normal"); 
self.valueDiv.css("line-height", "normal"); 
self.label.css("height", labelAlign === "north" ? self.element.height() + 'px' : "auto"); 
} 
} 
}, 



 ///get the progress bar's progress orientation. 
_isHorizontal: function () { 
return this.options.fillDirection === "west" || this.options.fillDirection === "east"; 
}, 


///start the progress 
startTask: function () { 
/// <summary>Start the progress</summary> 
if ($(":animated", this.element).length == 0) { 
var value = this.value(); 
this._refreshValue(value); 
} 
}, 



 ///stop the progress 
stopTask: function () { 
/// <summary>Stop the progress</summary> 
this.valueDiv.stop(); 
}, 



 //init the progress bar 
_initElements: function () { 
var self = this; 
var o = self.options; 
self.element.removeClass("ui-wijprogressbar-west ui-wijprogressbar-east ui-wijprogressbar-north ui-wijprogressbar-south").addClass("ui-wijprogressbar-" + o.fillDirection); 
var height = self.element.height(); 
self.valueDiv.css("line-height", ""); 
self.label.removeClass("lb_west lb_east lb_south lb_north lb_center lb_running").addClass("lb_" + o.labelAlign) 
.css("line-height", "").css({ 
left: "", 
right: "", 
top: "", 
bottom: "" 
}); 
if (self._isHorizontal()) { 
self.valueDiv.height(height) 
.css("line-height", height + "px"); 
} 
else { 
self.valueDiv.width(self.element.width()); 
} 
self._setLabelSide(); 
if (self.options.indicatorImage !== "") { 
self.valueDiv.css("background", "transparent url(" + self.options.indicatorImage + ") repeat fixed"); 
} 
}, 


 ///refresh the progress 
_refreshProgress: function (value) { 
var self = this; 
var ea = new $.Event('progressChanging'); 
var nowValue = value * (self.max - self.min) / 100 + self.min; 
var o = self.options; 
var cancel = self._triggerEvent("progressChanging", self.element.attr("aria-valuenow"), nowValue, false); 
if (cancel) { 
return; 
} 
if (self._isHorizontal()) { 
self.valueDiv.toggleClass(o.fillDirection === "east" ? "ui-corner-right" : "ui-corner-left", value === self.max).width(value + "%"); 
} 
else { 
self.valueDiv.toggleClass(o.fillDirection === "south" ? "ui-corner-bottom" : "ui-corner-top", value === self.max).height(value + "%"); 
} 
self.element.attr("aria-valuenow", nowValue); 
var txt = self._getFormatString(o.labelFormatString, value); 
self._setLabelsText(txt); 
var _tooTip = self._getFormatString(o.toolTipFormatString, value); 
self.element.attr("title", _tooTip); 
}, 


 ///play progress animation. 
_performAnimating: function (obj) { 
var self = this; 
var len = Math.floor(obj / self.options.indicatorIncrement); 
obj = len * self.options.indicatorIncrement; 
var o = self.options; 
self._refreshProgress(obj); 
if (o.labelAlign === "running") { 
if (self._isHorizontal()) { 
var eleWidth = self.element.width(); 
var labelWidth = self.label.outerWidth(); 
var progressWidth = self.valueDiv.outerWidth(); 
var left = eleWidth === progressWidth ? eleWidth - labelWidth : obj * eleWidth / 100 - labelWidth + labelWidth * (eleWidth - progressWidth) / eleWidth; 
self.label.css(o.fillDirection === "east" ? "left" : "right", left); 
} 
else { 
var eleHeight = self.element.height(); 
var labelHeight = self.label.outerHeight(); 
var progressHeight = self.valueDiv.outerHeight(); 
var top = eleHeight === progressHeight ? eleHeight - labelHeight : obj * eleHeight / 100 - labelHeight + labelHeight * (eleHeight - progressHeight) / eleHeight; 
self.label.css(o.fillDirection === "south" ? "top" : "bottom", top); 
} 
} 
}, 



 //set the label'text 
_setLabelsText: function (text) { 
if (!this._isHorizontal() && this.options.labelAlign === "rightOrBottom") { 
this.label.html('<span style=\'position:absolute;bottom:0px;text-align:center;width:' + this.element.width() + 'px;\'>' + text + '</span>'); 
return; 
} 
this.label.html(text); 
}, 



 //format the text 
_getFormatString: function (format, val) { 
var self = this; 
var processValue = parseInt(self.element.attr("aria-valuenow")); 
var remainingProcess = self.max - processValue 
var percentProgress = val; 
var percentageRemaining = 100 - val; 
var r = /\{0\}/g; 
format = format.replace(r, processValue.toString()); 
r = /\{ProgressValue\}/g; 
format = format.replace(r, processValue.toString()); 
r = /\{1\}/g; 
format = format.replace(r, percentProgress.toString()); 
r = /\{PercentProgress\}/g; 
format = format.replace(r, percentProgress.toString()); 
r = /\{2\}/g; 
format = format.replace(r, remainingProcess.toString()); 
r = /\{RemainingProgress\}/g; 
format = format.replace(r, remainingProcess.toString()); 
r = /\{3\}/g; 
format = format.replace(r, percentageRemaining.toString()); 
r = /\{PercentageRemaining\}/g; 
format = format.replace(r, percentageRemaining.toString()); 
r = /\{4\}/g; 
format = format.replace(r, self.min); 
r = /\{Min\}/g; 
format = format.replace(r, self.min); 
r = /\{5\}/g; 
format = format.replace(r, self.max); 
r = /\{Max\}/g; 
format = format.replace(r, self.max); 
return format; 
}, 



 ///destroy the widget. 
destroy: function () { 
this.element.empty(); 
this.element.removeClass("ui-wijprogressbar ui-widget ui-widget-content ui-corner-all ui-wijprogressbar-h").removeAttr("title"); 
$.Widget.prototype.destroy.apply(this, arguments); 
} 
}); 

///progress bar animation. If user want to write custom animation,can override the animations option.And set the animated to the options key. 
$.extend($.ui.wijprogressbar, { 
animations: { 
progress: function (options, additions) { 
options = $.extend({ 
easing: "swing", 
duration: 1000 
}, options, additions); 
options.content.stop(true, true).animate({ 
widthvalue: options.processValue 
}, options); 
} 
} 
}); 
})(jQuery);

widget主要是处理ui层面的,实用与否只有用了才知道,widget可以利用jQuery已经存在的css framework。利用themeRoller,可以很轻松的换肤。至于说功能,可以在用户反馈后再慢慢完善。
这个progressbar本身是继承自jQuery ui progressbar的。因为开源,如果自己有好的想法,自己也可以去增加自己需要的功能。
Javascript 相关文章推荐
jQuery.extend 函数详解
Feb 03 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
js实现异步循环实现代码
Feb 16 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
JQuery开发的数独游戏代码
Oct 29 #Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 #Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 #Javascript
jQuery.ajax 用户登录验证代码
Oct 29 #Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 #Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 #Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 #Javascript
You might like
PHP 八种基本的数据类型小结
2011/06/01 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
php中动态修改ini配置
2014/10/14 PHP
php文件缓存方法总结
2016/03/16 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
pycharm远程开发项目的实现步骤
2019/01/20 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
python中time包实例详解
2021/02/02 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
大专生工程监理求职信
2013/10/04 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
《掌声》教学反思
2014/02/23 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
大型演出策划方案
2014/05/28 职场文书
社区助残日活动总结
2014/08/29 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript