Personal use summary:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "/Scripts/jquery-1.4.4.min.js"> </script>
<Script type = "text/javascript" src = "/Scripts/Method/jquery. progressbar. min. js"> </script> [Progresbar plug-in is very important]
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Progress1"). progressBar (68, {barImage: '/content/images/progressbg_red.gif '});
});
</Script>
<Div id = "progress1"> </div>
JQuery Progress Bar is a Progress Bar plug-in developed based on JQuery, adhering to JQuery's simple philosophy.
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 the progress bar control.
The JQuery Progress Bar is the same as the regular plug-in. You only need to use the selector to select an HTML element,
Directly call the public method of the plug-in. It provides the public method named progressBar ().
Then, when there is an element with the id of progress1 on the HTML page, you can initialize the control as follows:
$ ("# Progress1"). progressBar ();
Its constructor can receive parameters shown in the following table.
Methods and Parameters |
Purpose |
ProgressBar () |
Initialize a progress bar by default |
ProgressBar (persent) |
Initialize or update a progress bar by default, and set the percentage of progress barsPersent %. |
ProgressBar (config) |
PressConfigInitialize a progress bar with a percentage0%. Do not use this method to change the progress bar settings after initialization. Otherwise, the display may be abnormal. |
ProgressBar (persent, config) |
PressConfigInitialize a progress bar with a percentagePersent %. Do not use this method to change the progress bar settings after initialization. Otherwise, the display may be abnormal. |
Where,ConfigA parameter is a hash object that contains the following attributes used to set the appearance characteristics of a progress bar.
Attribute |
Purpose |
Increment |
Set the growth of each step of the progress bar. The default value is2. |
Speed |
Set the speed of the Dynamic Sliding effect during progress bar initialization. The default value is15. The larger the value, the slower the sliding speed. |
ShowText |
Set whether to display the percentage identifier text. The default value isTureThat is, the percentage text identifier is displayed. |
BoxImage |
Set the border image. The default value isImages/progressbar.gif. To customize the border, modify this attribute and point to the image to be used. |
BarImage |
Set the progress icon image. The default value is images/progressbg_green.gif. To customize the image, modify the attribute and point to the image to be used. This image is classified into two sections. The first half is used to identify the progress, and the last half is used to identify the remaining progress. The two sections are of the same length and are equal to the width of the progress bar. |
Width |
Set the width of the progress bar, which must be the sameBarImageAndBoxImageThe image to be pointed to is applicable. The default value is120. |
Height |
Set the height of the progress bar, which must be the sameBarImageAndBoxImageThe image to be pointed to is applicable. The default value is12. |
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# Spaceused1"). progressBar ();
$ ("# Spaceused2"). progressBar ({barImage: 'images/progressbg_yellow.gif '});
$ ("# Spaceused3"). progressBar ({barImage: 'images/progressbg_orange.gif ', showText: false });
$ ("# Spaceused4"). progressBar (65, {showText: false, barImage: 'images/progressbg_red.gif '});
$ ("# Uploadprogressbar"). progressBar ();
});
Http://t.wits.sg/misc/jQueryProgressBar/demo.php #
Http://www.bram.us/projects/js_bramus/jsprogressbarhandler/#download
<Script type = "text/javascript"> $ ("# loading"). fadeOut () </script>