home *** CD-ROM | disk | FTP | other *** search
/ Chip 2011 March / Chip_2011.03_CD.iso / Tools / modules / jquery.progressbar.min.js < prev    next >
Encoding:
JavaScript  |  2010-12-14  |  6.4 KB  |  187 lines
  1. /*
  2.  * jQuery Progress Bar plugin
  3.  * Version 2.0 (06/22/2009)
  4.  * @requires jQuery v1.2.1 or later
  5.  *
  6.  * Copyright (c) 2008 Gary Teo
  7.  * http://t.wits.sg
  8.  
  9. USAGE:
  10.     $(".someclass").progressBar();
  11.     $("#progressbar").progressBar();
  12.     $("#progressbar").progressBar(45);                            // percentage
  13.     $("#progressbar").progressBar({showText: false });            // percentage with config
  14.     $("#progressbar").progressBar(45, {showText: false });        // percentage with config
  15. */
  16. (function($) {
  17.     $.extend({
  18.         progressBar: new function() {
  19.  
  20.             this.defaults = {
  21.                 steps            : 200,                                            // steps taken to reach target
  22.                 stepDuration    : 20,                                            
  23.                 max                : 100,                                            // Upon 100% i'd assume, but configurable
  24.                 showText        : true,                                            // show text with percentage in next to the progressbar? - default : true
  25.                 textFormat        : 'percentage',                                    // Or otherwise, set to 'fraction'
  26.                 width            : 120,                                            // Width of the progressbar - don't forget to adjust your image too!!!                                                // Image to use in the progressbar. Can be a single image too: 'images/progressbg_green.gif'
  27.                 height            : 12,                                            // Height of the progressbar - don't forget to adjust your image too!!!
  28.                 callback        : null,                                            // Calls back with the config object that has the current percentage, target percentage, current image, etc
  29.                 boxImage        : 'tools\\ico\\infobar\\progress\\progressbar.gif',                        // boxImage : image around the progress bar
  30.                 barImage        : {
  31.                                     0:    'tools\\ico\\infobar\\progress\\progressbg_red.gif',
  32.                                     30: 'tools\\ico\\infobar\\progress\\progressbg_orange.gif',
  33.                                     70: 'tools\\ico\\infobar\\progress\\progressbg_green.gif'
  34.                                 },
  35.                 
  36.                 
  37.                 // Internal use
  38.                 running_value    : 0,
  39.                 value            : 0,
  40.                 image            : null
  41.             };
  42.             
  43.             /* public methods */
  44.             this.construct = function(arg1, arg2) {
  45.                 var argvalue    = null;
  46.                 var argconfig    = null;
  47.                 
  48.                 if (arg1 != null) {
  49.                     if (!isNaN(arg1)) {
  50.                         argvalue = arg1;
  51.                         if (arg2 != null) {
  52.                             argconfig = arg2;
  53.                         }
  54.                     } else {
  55.                         argconfig = arg1; 
  56.                     }
  57.                 }
  58.                 
  59.                 return this.each(function(child) {
  60.                     var pb        = this;
  61.                     var config    = this.config;
  62.                     
  63.                     if (argvalue != null && this.bar != null && this.config != null) {
  64.                         this.config.value         = argvalue
  65.                         if (argconfig != null)
  66.                             pb.config            = $.extend(this.config, argconfig);
  67.                         config    = pb.config;
  68.                     } else {
  69.                         var $this                = $(this);
  70.                         var config                = $.extend({}, $.progressBar.defaults, argconfig);
  71.                         config.id                = $this.attr('id') ? $this.attr('id') : Math.ceil(Math.random() * 100000);    // random id, if none provided
  72.                         
  73.                         if (argvalue == null)
  74.                             argvalue    = $this.html().replace("%","")    // parse percentage
  75.                         
  76.                         config.value            = argvalue;
  77.                         config.running_value    = 0;
  78.                         config.image            = getBarImage(config);
  79.                         
  80.                         $this.html("");
  81.                         var bar                    = document.createElement('img');
  82.                         var text                = document.createElement('span');
  83.                         var $bar                = $(bar);
  84.                         var $text                = $(text);
  85.                         pb.bar                    = $bar;
  86.                         
  87.                         $bar.attr('id', config.id + "_pbImage");
  88.                         $text.attr('id', config.id + "_pbText");
  89.                         $text.html(getText(config));
  90.                         $bar.attr('title', getText(config));
  91.                         $bar.attr('alt', getText(config));
  92.                         $bar.attr('src', config.boxImage);
  93.                         $bar.attr('width', config.width);
  94.                         $bar.css("width", config.width + "px");
  95.                         $bar.css("height", config.height + "px");
  96.                         $bar.css("background-image", "url(" + config.image + ")");
  97.                         $bar.css("background-position", ((config.width * -1)) + 'px 50%');
  98.                         $bar.css("padding", "0");
  99.                         $bar.css("margin", "0");
  100.                         $this.append($bar);
  101.                         $this.append($text);
  102.                     }
  103.  
  104.                     function getPercentage(config) {
  105.                         return config.running_value * 100 / config.max;
  106.                     }
  107.  
  108.                     function getBarImage(config) {
  109.                         var image = config.barImage;
  110.                         if (typeof(config.barImage) == 'object') {
  111.                             for (var i in config.barImage) {
  112.                                 if (config.running_value >= parseInt(i)) {
  113.                                     image = config.barImage[i];
  114.                                 } else { break; }
  115.                             }
  116.                         }
  117.                         return image;
  118.                     }
  119.                     
  120.                     function getText(config) {
  121.                         if (config.showText) {
  122.                             if (config.textFormat == 'percentage') {
  123.                                 return " " + Math.round(config.running_value) + "%";
  124.                             } else if (config.textFormat == 'fraction') {
  125.                                 return " " + config.running_value + '/' + config.max;
  126.                             }
  127.                         }
  128.                     }
  129.                     
  130.                     config.increment = Math.round((config.value - config.running_value)/config.steps);
  131.                     if (config.increment < 0)
  132.                         config.increment *= -1;
  133.                     if (config.increment < 1)
  134.                         config.increment = 1;
  135.                     
  136.                     var t = function() {
  137.                         var pixels    = config.width / 100;            // Define how many pixels go into 1%
  138.                         
  139.                         if (config.running_value > config.value) {
  140.                             if (config.running_value - config.increment  < config.value) {
  141.                                 config.running_value = config.value;
  142.                             } else {
  143.                                 config.running_value -= config.increment;
  144.                             }
  145.                         }
  146.                         else if (config.running_value < config.value) {
  147.                             if (config.running_value + config.increment  > config.value) {
  148.                                 config.running_value = config.value;
  149.                             } else {
  150.                                 config.running_value += config.increment;
  151.                             }
  152.                         }
  153.                         
  154.                         //alert(config.running_value);
  155.                         //alert(config.value);
  156. if ((config.running_value>100) && (!progressBar_wait)) { setTimeout("refresh();",500); progressBar_wait=true; return false; }
  157.                         if ((config.running_value == config.value) || (config.value != progressBar_target))
  158.                             return false;
  159.                         
  160.                         var $bar    = $("#" + config.id + "_pbImage");
  161.                         var $text    = $("#" + config.id + "_pbText");
  162.                         var image    = getBarImage(config);
  163.                         if (image != config.image) {
  164.                             $bar.css("background-image", "url(" + image + ")");
  165.                             config.image = image;
  166.                         }
  167.                         $bar.css("background-position", (((config.width * -1)) + (getPercentage(config) * pixels)) + 'px 50%');
  168.                         $bar.attr('title', getText(config));
  169.                         $text.html(getText(config));
  170.                         
  171.                         if (config.callback != null && typeof(config.callback) == 'function')
  172.                             config.callback(config);
  173.                         
  174.                         setTimeout(t,progressBar_speed);
  175.                         pb.config = config;
  176.                     }; 
  177.                     setTimeout(t,progressBar_speed);
  178.                 });
  179.             };
  180.         }
  181.     });
  182.         
  183.     $.fn.extend({
  184.         progressBar: $.progressBar.construct
  185.     });
  186.     
  187. })(jQuery);