ProgressBar.js
上传用户:kimgenplus
上传日期:2016-06-05
资源大小:20877k
文件大小:9k
源码类别:

OA系统

开发平台:

Java

  1. /*
  2. Copyright (c) 2004-2006, The Dojo Foundation
  3. All Rights Reserved.
  4. Licensed under the Academic Free License version 2.1 or above OR the
  5. modified BSD license. For more information on Dojo licensing, see:
  6. http://dojotoolkit.org/community/licensing.shtml
  7. */
  8. dojo.provide("dojo.widget.ProgressBar");
  9. dojo.require("dojo.widget.*");
  10. dojo.require("dojo.event");
  11. dojo.require("dojo.dom");
  12. dojo.require("dojo.html.style");
  13. dojo.require("dojo.string.*");
  14. dojo.require("dojo.lfx.*");
  15. 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) {
  16. this.internalProgress.className = this.frontBarClass;
  17. this.containerNode.className = this.backBarClass;
  18. if (this.isVertical) {
  19. this.internalProgress.style.bottom = "0px";
  20. this.internalProgress.style.left = "0px";
  21. this._dimension = "height";
  22. } else {
  23. this.internalProgress.style.top = "0px";
  24. this.internalProgress.style.left = "0px";
  25. this._dimension = "width";
  26. }
  27. this.frontPercentLabel.className = this.frontPercentClass;
  28. this.backPercentLabel.className = this.backPercentClass;
  29. this.progressValue = "" + this.progressValue;
  30. this.domNode.style.height = this.height + "px";
  31. this.domNode.style.width = this.width + "px";
  32. this._intDimension = parseInt("0" + eval("this." + this._dimension));
  33. this._floatDimension = parseFloat("0" + eval("this." + this._dimension));
  34. this._pixelPercentRatio = this._floatDimension / 100;
  35. this.setMaxProgressValue(this.maxProgressValue, true);
  36. this.setProgressValue(dojo.string.trim(this.progressValue), true);
  37. dojo.debug("float dimension: " + this._floatDimension);
  38. dojo.debug("this._unitPixelRatio: " + this._unitPixelRatio);
  39. this.showText(this.hasText);
  40. }, showText:function (visible) {
  41. if (visible) {
  42. this.backPercentLabel.style.display = "block";
  43. this.frontPercentLabel.style.display = "block";
  44. } else {
  45. this.backPercentLabel.style.display = "none";
  46. this.frontPercentLabel.style.display = "none";
  47. }
  48. this.hasText = visible;
  49. }, postCreate:function (args, frag) {
  50. this.render();
  51. }, _backupValues:function () {
  52. this._progressValueBak = this.progressValue;
  53. this._hasTextBak = this.hasText;
  54. }, _restoreValues:function () {
  55. this.setProgressValue(this._progressValueBak);
  56. this.showText(this._hasTextBak);
  57. }, _setupAnimation:function () {
  58. var _self = this;
  59. dojo.debug("internalProgress width: " + this.internalProgress.style.width);
  60. this._animation = dojo.lfx.html.slideTo(this.internalProgress, {top:0, left:parseInt(this.width) - parseInt(this.internalProgress.style.width)}, parseInt(this.duration), null, function () {
  61. var _backAnim = dojo.lfx.html.slideTo(_self.internalProgress, {top:0, left:0}, parseInt(_self.duration));
  62. dojo.event.connect(_backAnim, "onEnd", function () {
  63. if (!_self._animationStopped) {
  64. _self._animation.play();
  65. }
  66. });
  67. if (!_self._animationStopped) {
  68. _backAnim.play();
  69. }
  70. _backAnim = null;
  71. });
  72. }, getMaxProgressValue:function () {
  73. return this.maxProgressValue;
  74. }, setMaxProgressValue:function (maxValue, noRender) {
  75. if (!this._animationStopped) {
  76. return;
  77. }
  78. this.maxProgressValue = maxValue;
  79. this._floatMaxProgressValue = parseFloat("0" + this.maxProgressValue);
  80. this._pixelUnitRatio = this._floatDimension / this.maxProgressValue;
  81. this._unitPercentRatio = this._floatMaxProgressValue / 100;
  82. this._unitPixelRatio = this._floatMaxProgressValue / this._floatDimension;
  83. this.setProgressValue(this.progressValue, true);
  84. if (!noRender) {
  85. this.render();
  86. }
  87. }, setProgressValue:function (value, noRender) {
  88. if (!this._animationStopped) {
  89. return;
  90. }
  91. this._progressPercentValue = "0%";
  92. var _value = dojo.string.trim("" + value);
  93. var _floatValue = parseFloat("0" + _value);
  94. var _intValue = parseInt("0" + _value);
  95. var _pixelValue = 0;
  96. if (dojo.string.endsWith(_value, "%", false)) {
  97. this._progressPercentValue = Math.min(_floatValue.toFixed(1), 100) + "%";
  98. _value = Math.min((_floatValue) * this._unitPercentRatio, this.maxProgressValue);
  99. _pixelValue = Math.min((_floatValue) * this._pixelPercentRatio, eval("this." + this._dimension));
  100. } else {
  101. this.progressValue = Math.min(_floatValue, this.maxProgressValue);
  102. this._progressPercentValue = Math.min((_floatValue / this._unitPercentRatio).toFixed(1), 100) + "%";
  103. _pixelValue = Math.min(_floatValue / this._unitPixelRatio, eval("this." + this._dimension));
  104. }
  105. this.progressValue = dojo.string.trim(_value);
  106. this._pixelValue = _pixelValue;
  107. if (!noRender) {
  108. this.render();
  109. }
  110. }, getProgressValue:function () {
  111. return this.progressValue;
  112. }, getProgressPercentValue:function () {
  113. return this._progressPercentValue;
  114. }, setDataSource:function (dataSource) {
  115. this.dataSource = dataSource;
  116. }, setPollInterval:function (pollInterval) {
  117. this.pollInterval = pollInterval;
  118. }, start:function () {
  119. var _showFunction = dojo.lang.hitch(this, this._showRemoteProgress);
  120. this._oInterval = setInterval(_showFunction, this.pollInterval);
  121. }, startAnimation:function () {
  122. if (this._animationStopped) {
  123. this._backupValues();
  124. this.setProgressValue("10%");
  125. this._animationStopped = false;
  126. this._setupAnimation();
  127. this.showText(false);
  128. this.internalProgress.style.height = "105%";
  129. this._animation.play();
  130. }
  131. }, stopAnimation:function () {
  132. if (this._animation) {
  133. this._animationStopped = true;
  134. this._animation.stop();
  135. this.internalProgress.style.height = "100%";
  136. this.internalProgress.style.left = "0px";
  137. this._restoreValues();
  138. this._setLabelPosition();
  139. }
  140. }, _showRemoteProgress:function () {
  141. var _self = this;
  142. if ((this.getMaxProgressValue() == this.getProgressValue()) && this._oInterval) {
  143. clearInterval(this._oInterval);
  144. this._oInterval = null;
  145. this.setProgressValue("100%");
  146. return;
  147. }
  148. var bArgs = {url:_self.dataSource, method:"POST", mimetype:"text/json", error:function (type, errorObj) {
  149. dojo.debug("[ProgressBar] showRemoteProgress error");
  150. }, load:function (type, data, evt) {
  151. _self.setProgressValue((_self._oInterval ? data["progress"] : "100%"));
  152. }};
  153. dojo.io.bind(bArgs);
  154. }, render:function () {
  155. this._setPercentLabel(dojo.string.trim(this._progressPercentValue));
  156. this._setPixelValue(this._pixelValue);
  157. this._setLabelPosition();
  158. }, _setLabelPosition:function () {
  159. var _widthFront = dojo.html.getContentBox(this.frontPercentLabel).width;
  160. var _heightFront = dojo.html.getContentBox(this.frontPercentLabel).height;
  161. var _widthBack = dojo.html.getContentBox(this.backPercentLabel).width;
  162. var _heightBack = dojo.html.getContentBox(this.backPercentLabel).height;
  163. var _leftFront = (parseInt(this.width) - _widthFront) / 2 + "px";
  164. var _bottomFront = (parseInt(this.height) - parseInt(_heightFront)) / 2 + "px";
  165. var _leftBack = (parseInt(this.width) - _widthBack) / 2 + "px";
  166. var _bottomBack = (parseInt(this.height) - parseInt(_heightBack)) / 2 + "px";
  167. this.frontPercentLabel.style.left = _leftFront;
  168. this.backPercentLabel.style.left = _leftBack;
  169. this.frontPercentLabel.style.bottom = _bottomFront;
  170. this.backPercentLabel.style.bottom = _bottomBack;
  171. }, _setPercentLabel:function (percentValue) {
  172. dojo.dom.removeChildren(this.frontPercentLabel);
  173. dojo.dom.removeChildren(this.backPercentLabel);
  174. var _percentValue = this.showOnlyIntegers == false ? percentValue : parseInt(percentValue) + "%";
  175. this.frontPercentLabel.appendChild(document.createTextNode(_percentValue));
  176. this.backPercentLabel.appendChild(document.createTextNode(_percentValue));
  177. }, _setPixelValue:function (value) {
  178. eval("this.internalProgress.style." + this._dimension + " = " + value + " + 'px'");
  179. this.onChange();
  180. }, onChange:function () {
  181. }});