Jquery Progress Bar plug-in Progress Bar Problem Solving

Source: Internet
Author: User
Tags border image

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 bars to persent %.

ProgressBar (config)

Initialize a progress bar according to the settings specified in config. The percentage is 0%. Do not use this method to change the progress bar settings after initialization. Otherwise, the display may be abnormal.

ProgressBar (persent, config)

Initialize a progress bar according to the settings specified in config. The percentage is persent %. Do not use this method to change the progress bar settings after initialization. Otherwise, the display may be abnormal.

The config parameter is a hash object that contains the following attributes used to set the appearance characteristics of the progress bar.

Attribute

Purpose

Increment

Set the growth of each step of the progress bar. The default value is 2.

Speed

Set the speed of the Dynamic Sliding effect during progress bar initialization. The default value is 15. The larger the value, the slower the sliding speed.

ShowText

Set whether to display the percentage identifier text. The default value is true, indicating that the percentage text mark is displayed.

BoxImage

Set the border image. The default value is images/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. This value must be consistent with the image pointed to by barImage and boxImage. The default value is 120.

Height

Set the height of the progress bar. This value must be consistent with the image pointed to by barImage and boxImage. The default value is 12.

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.