基于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 相关文章推荐
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
js获取和设置属性的方法
Feb 20 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
微信小程序登录session的使用
2019/03/17 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python数据结构之图的实现方法
2015/07/08 Python
python逆序打印各位数字的方法
2018/06/25 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
python批量修改交换机密码的示例
2020/09/22 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
军训口号
2014/06/13 职场文书
2015年三万活动总结
2015/03/25 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫