jquery progress bar Plugin Progress Bar Plugin application method

Source: Internet
Author: User

jquery progress bar Plugin Progress Bar Plugin application method


Make me small tangled for a while, finally thanked colleagues to share the article, to the end, hehe, 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 plugin is 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 plugin based on jquery, 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.

JQuery Progress Bar As with regular plug-ins, as long as you select an HTML element with a selector,
Call the plug-in's public method directly. It provides a public method name of ProgressBar ().
Then, when there is an element with an ID of PROGRESS1 on the HTML page, you can initialize the control this way:

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

Its constructor can receive the parameters shown in the following table.
Methods and Parameters
Use
ProgressBar ()
Initialize a progress bar by default settings
ProgressBar (persent)
Initializes or updates a progress bar by default, setting the percentage of the progress bar to persent%.
ProgressBar (config)
Initializes a progress bar, as a percentage of 0%, by the settings specified in config. Note Do not use this method after initialization to change the setting of the progress bar, which may cause the display to be unhealthy.
ProgressBar (Persent,config)
Initializes a progress bar, as a percentage of persent%, by the settings specified in config. Note Do not use this method after initialization to change the setting of the progress bar, which may cause the display to be unhealthy.
Where the config parameter is a hash structure object that contains the following properties for setting the appearance characteristics of the progress bar
Property
Use
Increment
Sets the growth level for each step of the progress bar. The default value is 2.
Speed
Sets the speed of the dynamic slide effect when the progress bar is initialized. The default value is 15. The larger the value, the slower the sliding speed.
Showtext
Sets whether percent identification text is displayed. The default value is Ture, which displays the percent text ID.
Boximage
Sets 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
Sets 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 picture classifies two sections, the first half of which identifies the progress of completion, and the half is used to identify the remaining unfinished progress. The two sections are equal in length and equal to the width of the progress bar.
Width
Set the width of the progress bar, which must match the picture pointed to by Barimage and Boximage. The default value is 120.
Height
Set 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 ();
});

http://download.csdn.net/detail/tianyacao8025/3925519 Jquery.progressbar.js

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.