jquery progress bar plug-in Progress Bar Plugin application method

jquery progress bar plug-in Progress Bar Plugin application method

Make me a little tangle for a while, and finally thank colleagues to share the article, to the end, oh, small experience or to save
Summary of personal use:

<script type= "text/web Effects" src= "/scripts/jquery-1.4.4.min.js" ></script>
<script type= "Text/javascript" src= "/scripts/method/jquery.progressbar.min.js" ></script> " Progresbar Plug-ins are important.
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#progress1"). ProgressBar (barimage: '/content/images/progressbg_red.gif '});
});
</script>
<div id= "Progress1" > </div>

-------------------------------------------------------------------------------------------------------------
jquery Progress Bar is a progress bar based on jquery development, adhering to the minimalist philosophy of jquery.
Not only easy to use, but also easy to customize the appearance. For projects that use the jquery framework,
This is a good choice when you need to use a progress bar control.

The JQuery Progress Bar, like a regular plug-in, simply selects an HTML element with the selector,
You can invoke the public method of the plug-in directly. It provides a public method name of ProgressBar ().
So, when you have an element with an ID of PROGRESS1 on an HTML page, you can initialize the control like this:

$ ("#progress1"). ProgressBar ();

The

Its constructor can receive the parameters shown in the following table.
Methods and Parameters
Purpose
ProgressBar ()
Initializes a progress bar
ProgressBar (persent)
By default to initialize or update a progress bar by default setting. Set the percentage of the progress bar to persent%.
ProgressBar (config)
Initializes a progress bar with a percentage of 0%, according to the settings specified in config. Note Do not use this method to change the settings of the progress bar after initialization, or it may cause an abnormal display.
ProgressBar (persent,config)
Initializes a progress bar, in percent persent%, according to the settings specified in config. Note Do not use this method to change the settings of the progress bar after initialization, or it may cause an abnormal display.
where the config parameter is a hash structure object that contains the following properties used to set the appearance attributes of the progress bar
Property
Purpose
Increment
to set the progress bar per step growth. The default value is 2.
Speed
Sets the speed at which the progress bar is initialized when it is dynamically sliding. The default value is 15. The larger the value, the slower the sliding speed. Whether the
Showtext
Setting Displays the percentage identification text. The default value is Ture, which is the display percentage text ID.
Boximage
To set the border picture. The default value is Images/progressbar.gif. To customize the border, modify the property to point to the picture you want to use.
Barimage
To set the progress identification picture. The default value is Images/progressbg_green.gif. To customize it, modify the property to point to the picture you want to use. This image is categorized into two sections, and the first half is used to identify the completion progress, and the latter part to identify the remaining unfinished progress. The two sections are equal in length and equal to the width of the progress bar.
Width
Sets the width of the progress bar, which must match the picture pointed to by Barimage and Boximage. The default value is 120.
Height
Sets the height of the progress bar, which must match the picture pointed to by Barimage and Boximage. The default value is 12.

$ (document). Ready (function () {
    $ ("#spaceused1"). ProgressBar ();
    $ ("#spaceused2"). ProgressBar ({barimage: ' images/progressbg_yellow.gif '});
    $ ("#spaceused3"). ProgressBar ({barimage: ' Images/progressbg_orange.gif ', showtext:false});
    $ ("#spaceused4"). ProgressBar (Showtext:false, {barimage: ' images/progressbg_red.gif '});
    $ ("#uploadprogressbar"). ProgressBar ();
});