jquery.progressbar.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * progressbar - jQuery EasyUI
  3. *
  4. * Copyright (c) 2009-2013 www.jeasyui.com. All rights reserved.
  5. *
  6. * Licensed under the GPL or commercial licenses
  7. * To use it on other terms please contact us: info@jeasyui.com
  8. * http://www.gnu.org/licenses/gpl.txt
  9. * http://www.jeasyui.com/license_commercial.php
  10. *
  11. * Dependencies:
  12. * none
  13. *
  14. */
  15. (function($){
  16. function init(target){
  17. $(target).addClass('progressbar');
  18. $(target).html('<div class="progressbar-text"></div><div class="progressbar-value"><div class="progressbar-text"></div></div>');
  19. return $(target);
  20. }
  21. function setSize(target,width){
  22. var opts = $.data(target, 'progressbar').options;
  23. var bar = $.data(target, 'progressbar').bar;
  24. if (width) opts.width = width;
  25. bar._outerWidth(opts.width)._outerHeight(opts.height);
  26. bar.find('div.progressbar-text').width(bar.width());
  27. bar.find('div.progressbar-text,div.progressbar-value').css({
  28. height: bar.height()+'px',
  29. lineHeight: bar.height()+'px'
  30. });
  31. }
  32. $.fn.progressbar = function(options, param){
  33. if (typeof options == 'string'){
  34. var method = $.fn.progressbar.methods[options];
  35. if (method){
  36. return method(this, param);
  37. }
  38. }
  39. options = options || {};
  40. return this.each(function(){
  41. var state = $.data(this, 'progressbar');
  42. if (state){
  43. $.extend(state.options, options);
  44. } else {
  45. state = $.data(this, 'progressbar', {
  46. options: $.extend({}, $.fn.progressbar.defaults, $.fn.progressbar.parseOptions(this), options),
  47. bar: init(this)
  48. });
  49. }
  50. $(this).progressbar('setValue', state.options.value);
  51. setSize(this);
  52. });
  53. };
  54. $.fn.progressbar.methods = {
  55. options: function(jq){
  56. return $.data(jq[0], 'progressbar').options;
  57. },
  58. resize: function(jq, width){
  59. return jq.each(function(){
  60. setSize(this, width);
  61. });
  62. },
  63. getValue: function(jq){
  64. return $.data(jq[0], 'progressbar').options.value;
  65. },
  66. setValue: function(jq, value){
  67. if (value < 0) value = 0;
  68. if (value > 100) value = 100;
  69. return jq.each(function(){
  70. var opts = $.data(this, 'progressbar').options;
  71. var text = opts.text.replace(/{value}/, value);
  72. var oldValue = opts.value;
  73. opts.value = value;
  74. $(this).find('div.progressbar-value').width(value+'%');
  75. $(this).find('div.progressbar-text').html(text);
  76. if (oldValue != value){
  77. opts.onChange.call(this, value, oldValue);
  78. }
  79. });
  80. }
  81. };
  82. $.fn.progressbar.parseOptions = function(target){
  83. return $.extend({}, $.parser.parseOptions(target, ['width','height','text',{value:'number'}]));
  84. };
  85. $.fn.progressbar.defaults = {
  86. width: 'auto',
  87. height: 22,
  88. value: 0, // percentage value
  89. text: '{value}%',
  90. onChange:function(newValue,oldValue){}
  91. };
  92. })(jQuery);