ProgressBar.js
资源名称:oa.rar [点击查看]
上传用户:kimgenplus
上传日期:2016-06-05
资源大小:20877k
文件大小:9k
源码类别:
OA系统
开发平台:
Java
- /*
- Copyright (c) 2004-2006, The Dojo Foundation
- All Rights Reserved.
- Licensed under the Academic Free License version 2.1 or above OR the
- modified BSD license. For more information on Dojo licensing, see:
- http://dojotoolkit.org/community/licensing.shtml
- */
- dojo.provide("dojo.widget.ProgressBar");
- dojo.require("dojo.widget.*");
- dojo.require("dojo.event");
- dojo.require("dojo.dom");
- dojo.require("dojo.html.style");
- dojo.require("dojo.string.*");
- dojo.require("dojo.lfx.*");
- dojo.widget.defineWidget("dojo.widget.ProgressBar", dojo.widget.HtmlWidget, {progressValue:0, maxProgressValue:100, width:300, height:30, frontPercentClass:"frontPercent", backPercentClass:"backPercent", frontBarClass:"frontBar", backBarClass:"backBar", hasText:false, isVertical:false, showOnlyIntegers:false, dataSource:"", pollInterval:3000, duration:1000, templateString:"<div dojoAttachPoint="containerNode" style="position:relative;overflow:hidden">nt<div style="position:absolute;display:none;width:100%;text-align:center" dojoAttachPoint="backPercentLabel" class="dojoBackPercentLabel"></div>nt<div style="position:absolute;overflow:hidden;width:100%;height:100%" dojoAttachPoint="internalProgress">nt<div style="position:absolute;display:none;width:100%;text-align:center" dojoAttachPoint="frontPercentLabel" class="dojoFrontPercentLabel"></div></div>n</div>n", templateCssString:".backBar{ntborder:1px solid #84a3d1;n}n.frontBar{ntbackground:url("images/bar.gif") repeat bottom left;ntbackground-attachment: fixed;n}n.h-frontBar{ntbackground:url("images/h-bar.gif") repeat bottom left;ntbackground-attachment: fixed;n}n.simpleFrontBar{ntbackground: red;n}n.frontPercent,.backPercent{ntfont:bold 13px helvetica;n}n.backPercent{ntcolor:#293a4b;n}n.frontPercent{ntcolor:#fff;n}n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/ProgressBar.css"), containerNode:null, internalProgress:null, _pixelUnitRatio:0, _pixelPercentRatio:0, _unitPercentRatio:0, _unitPixelRatio:0, _floatDimension:0, _intDimension:0, _progressPercentValue:"0%", _floatMaxProgressValue:0, _dimension:"width", _pixelValue:0, _oInterval:null, _animation:null, _animationStopped:true, _progressValueBak:false, _hasTextBak:false, fillInTemplate:function (args, frag) {
- this.internalProgress.className = this.frontBarClass;
- this.containerNode.className = this.backBarClass;
- if (this.isVertical) {
- this.internalProgress.style.bottom = "0px";
- this.internalProgress.style.left = "0px";
- this._dimension = "height";
- } else {
- this.internalProgress.style.top = "0px";
- this.internalProgress.style.left = "0px";
- this._dimension = "width";
- }
- this.frontPercentLabel.className = this.frontPercentClass;
- this.backPercentLabel.className = this.backPercentClass;
- this.progressValue = "" + this.progressValue;
- this.domNode.style.height = this.height + "px";
- this.domNode.style.width = this.width + "px";
- this._intDimension = parseInt("0" + eval("this." + this._dimension));
- this._floatDimension = parseFloat("0" + eval("this." + this._dimension));
- this._pixelPercentRatio = this._floatDimension / 100;
- this.setMaxProgressValue(this.maxProgressValue, true);
- this.setProgressValue(dojo.string.trim(this.progressValue), true);
- dojo.debug("float dimension: " + this._floatDimension);
- dojo.debug("this._unitPixelRatio: " + this._unitPixelRatio);
- this.showText(this.hasText);
- }, showText:function (visible) {
- if (visible) {
- this.backPercentLabel.style.display = "block";
- this.frontPercentLabel.style.display = "block";
- } else {
- this.backPercentLabel.style.display = "none";
- this.frontPercentLabel.style.display = "none";
- }
- this.hasText = visible;
- }, postCreate:function (args, frag) {
- this.render();
- }, _backupValues:function () {
- this._progressValueBak = this.progressValue;
- this._hasTextBak = this.hasText;
- }, _restoreValues:function () {
- this.setProgressValue(this._progressValueBak);
- this.showText(this._hasTextBak);
- }, _setupAnimation:function () {
- var _self = this;
- dojo.debug("internalProgress width: " + this.internalProgress.style.width);
- this._animation = dojo.lfx.html.slideTo(this.internalProgress, {top:0, left:parseInt(this.width) - parseInt(this.internalProgress.style.width)}, parseInt(this.duration), null, function () {
- var _backAnim = dojo.lfx.html.slideTo(_self.internalProgress, {top:0, left:0}, parseInt(_self.duration));
- dojo.event.connect(_backAnim, "onEnd", function () {
- if (!_self._animationStopped) {
- _self._animation.play();
- }
- });
- if (!_self._animationStopped) {
- _backAnim.play();
- }
- _backAnim = null;
- });
- }, getMaxProgressValue:function () {
- return this.maxProgressValue;
- }, setMaxProgressValue:function (maxValue, noRender) {
- if (!this._animationStopped) {
- return;
- }
- this.maxProgressValue = maxValue;
- this._floatMaxProgressValue = parseFloat("0" + this.maxProgressValue);
- this._pixelUnitRatio = this._floatDimension / this.maxProgressValue;
- this._unitPercentRatio = this._floatMaxProgressValue / 100;
- this._unitPixelRatio = this._floatMaxProgressValue / this._floatDimension;
- this.setProgressValue(this.progressValue, true);
- if (!noRender) {
- this.render();
- }
- }, setProgressValue:function (value, noRender) {
- if (!this._animationStopped) {
- return;
- }
- this._progressPercentValue = "0%";
- var _value = dojo.string.trim("" + value);
- var _floatValue = parseFloat("0" + _value);
- var _intValue = parseInt("0" + _value);
- var _pixelValue = 0;
- if (dojo.string.endsWith(_value, "%", false)) {
- this._progressPercentValue = Math.min(_floatValue.toFixed(1), 100) + "%";
- _value = Math.min((_floatValue) * this._unitPercentRatio, this.maxProgressValue);
- _pixelValue = Math.min((_floatValue) * this._pixelPercentRatio, eval("this." + this._dimension));
- } else {
- this.progressValue = Math.min(_floatValue, this.maxProgressValue);
- this._progressPercentValue = Math.min((_floatValue / this._unitPercentRatio).toFixed(1), 100) + "%";
- _pixelValue = Math.min(_floatValue / this._unitPixelRatio, eval("this." + this._dimension));
- }
- this.progressValue = dojo.string.trim(_value);
- this._pixelValue = _pixelValue;
- if (!noRender) {
- this.render();
- }
- }, getProgressValue:function () {
- return this.progressValue;
- }, getProgressPercentValue:function () {
- return this._progressPercentValue;
- }, setDataSource:function (dataSource) {
- this.dataSource = dataSource;
- }, setPollInterval:function (pollInterval) {
- this.pollInterval = pollInterval;
- }, start:function () {
- var _showFunction = dojo.lang.hitch(this, this._showRemoteProgress);
- this._oInterval = setInterval(_showFunction, this.pollInterval);
- }, startAnimation:function () {
- if (this._animationStopped) {
- this._backupValues();
- this.setProgressValue("10%");
- this._animationStopped = false;
- this._setupAnimation();
- this.showText(false);
- this.internalProgress.style.height = "105%";
- this._animation.play();
- }
- }, stopAnimation:function () {
- if (this._animation) {
- this._animationStopped = true;
- this._animation.stop();
- this.internalProgress.style.height = "100%";
- this.internalProgress.style.left = "0px";
- this._restoreValues();
- this._setLabelPosition();
- }
- }, _showRemoteProgress:function () {
- var _self = this;
- if ((this.getMaxProgressValue() == this.getProgressValue()) && this._oInterval) {
- clearInterval(this._oInterval);
- this._oInterval = null;
- this.setProgressValue("100%");
- return;
- }
- var bArgs = {url:_self.dataSource, method:"POST", mimetype:"text/json", error:function (type, errorObj) {
- dojo.debug("[ProgressBar] showRemoteProgress error");
- }, load:function (type, data, evt) {
- _self.setProgressValue((_self._oInterval ? data["progress"] : "100%"));
- }};
- dojo.io.bind(bArgs);
- }, render:function () {
- this._setPercentLabel(dojo.string.trim(this._progressPercentValue));
- this._setPixelValue(this._pixelValue);
- this._setLabelPosition();
- }, _setLabelPosition:function () {
- var _widthFront = dojo.html.getContentBox(this.frontPercentLabel).width;
- var _heightFront = dojo.html.getContentBox(this.frontPercentLabel).height;
- var _widthBack = dojo.html.getContentBox(this.backPercentLabel).width;
- var _heightBack = dojo.html.getContentBox(this.backPercentLabel).height;
- var _leftFront = (parseInt(this.width) - _widthFront) / 2 + "px";
- var _bottomFront = (parseInt(this.height) - parseInt(_heightFront)) / 2 + "px";
- var _leftBack = (parseInt(this.width) - _widthBack) / 2 + "px";
- var _bottomBack = (parseInt(this.height) - parseInt(_heightBack)) / 2 + "px";
- this.frontPercentLabel.style.left = _leftFront;
- this.backPercentLabel.style.left = _leftBack;
- this.frontPercentLabel.style.bottom = _bottomFront;
- this.backPercentLabel.style.bottom = _bottomBack;
- }, _setPercentLabel:function (percentValue) {
- dojo.dom.removeChildren(this.frontPercentLabel);
- dojo.dom.removeChildren(this.backPercentLabel);
- var _percentValue = this.showOnlyIntegers == false ? percentValue : parseInt(percentValue) + "%";
- this.frontPercentLabel.appendChild(document.createTextNode(_percentValue));
- this.backPercentLabel.appendChild(document.createTextNode(_percentValue));
- }, _setPixelValue:function (value) {
- eval("this.internalProgress.style." + this._dimension + " = " + value + " + 'px'");
- this.onChange();
- }, onChange:function () {
- }});