基于jquery 的一个progressbar widge

此项目的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的。因为开源,如果自己有好的想法,自己也可以去增加自己需要的功能。

(0)

相关推荐

  • Javascript jquery css 写的简单进度条控件

    通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解. 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路.废话不多说. Javascript Progress Bar Demo - jb51.net #progress {backgroun

  • jQuery EasyUI API 中文文档 - ProgressBar 进度条

    用$.fn.progressbar.defaults重写defaults. 依赖 none 用法示例 创建ProgressBar ProgressBar能够从html标记创建或者编程创建.从标记创建更容易些,把 'easyui-progressbar' 类加入到<div/>标记. 复制代码 代码如下: <div id="p" class="easyui-progressbar" style="width:400px;">&

  • 6款新颖的jQuery和CSS3进度条插件推荐

    现在的网页功能越来越多,尤其是AJAX的广泛应用,进度条和Loading加载动画显得越来越重要了.下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件,希望对大家有帮助. 1.不同进度显示不同颜色的进度条 这款CSS3进度条和别的有所不同,他的主要特点是随着进度的变化,进度条的颜色会有所改变,这个和游戏中人物的生命值很相似. 2.纯CSS3实现的彩色进度条 该进度条利用了CSS3的颜色渐变属性,让进度条的色彩显得非常具有立体感. 3.jQuery Progress

  • Jquery Uploadify上传带进度条的简单实例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" ru

  • jQuery progressbar通过Ajax请求实现后台进度实时功能

    本文主要演示Jquery progressbar的进度条功能.js通过ajax请求向后台实时获取当前的进度值.后台将进度值存储在cookie中,每次请求后,将进度条的值增2个.以此演示进度条的实时显示功能. 前台index.jsp jsp代码如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = reques

  • jquery.ui.progressbar 中文文档

    复制代码 代码如下: <?xml version="1.0" encoding="UTF-8" ?> <!-- 注意事项: 1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议 2. 格式中的所有项都是选填, 如果没有, 不写就是了. 3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上<![CDATA[这中间写内容]]> 4. 翻译过程中, 一块对

  • jQuery EasyUI ProgressBar进度条组件

    ProgressBar(进度条)组件,这个还是挺好玩的,我们在自己做点什么的时候经常能用到,比如上传下载文件.导入导出文档啊.载入网页等等. 应用场景很多,使用起来还很简单. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javas

  • jquery实现的一个简单进度条效果实例

    jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的. 效果演示: 进度条实现源码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&qu

  • jquery 简单的进度条实现代码

    其实我本来的计划是做网页设计师的,可是没有人认为我设计的好,哥到现在还没有工作,发泄一下,不多说了. 效果图 需要用到的图片: 背景图片: 进度显示图片: 网页结构: 复制代码 代码如下: <div id="center"> <div id="message"></div> <div id="loading"><div></div></div> </div&

  • 分享8款优秀的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示 Percentage Loader 一款轻量的 jQue

随机推荐