JQuery progress bar 1

Add a progress bar on the screen and check a lot of information.
Write down for future use.

Because jQuery is used, it is necessary to introduce jQuery. js,
In addition, jquery. progressbar. min. js is introduced. This plug-in can help code implement functional requirements faster.

<Script type = "text/javascript" src = "../js/jquery. progressbar. min. js"> </script>

JQuery + ajax

$ (Document). ready (function (){
// Clear the error div.
$ ("# Div_error" cmd.html ("");
// Processing after the button "jikou" is pressed
$ ("# Jikou"). click (function (){
Var checkMsg = "";
// Input on this verification Screen
If (! IsValidate ()){
Return false;
}
// Background display
$ ("# Background_panel"). show ();
// Set the style of the background div
$ ("# Background_panel" detail .css ({
"Position": "absolute ",
"Opacity": 0.3
});
// Set the div style of the progress bar
$ ("# Process_bar" ).css ({
"Position": "absolute"
});
// Set the div center display of the progress bar
$ ("# Process_bar"). DivCenter (0 );
// Set the status div Style
$ ("# Status_div" ).css ({
"Position": "absolute"
});
// Center
$ ("# Status_div"). DivCenter (0 );
$ ("# Status_div" ).html ("prepare ");

$. Ajax ({
// Request type
Type: "POST ",
Url: "<% = baseUrl %>", // address
Data: {input1: $ ("# input1"). val (), input2: $ ("# input2"). val ()}, // Parameter
DataType: "json", // type of value passing
Async: false, // whether to synchronize
BeforeSend: beforeCall, // processing before sending data
Success: function (data ){
Var jsonData;

CheckMsg = "";


} // Sucess
});


If (checkMsg! = ""){
// Display Error Information
$ ("# Div_error" cmd.html (checkMsg );
$ ("# Div_error"). show ();
// Assign the progress variable to 100 directly. This value is used to determine the destruction progress bar.
Increament = 100;
// Destroy the progress bar
DistoryProcessBar ();
// Progress variable resetting
Increament = 0;
Return false;
}
// Initialize the style of the progress bar
$ ("# Process_bar"). progressBar (increament ,{
BoxImage: '../pg_images/progressbar.gif ',
BarImage: '../pg_images/progressbg_green.gif'
}
);
// Progress bar for timed Accumulation
Var intervalID = setInterval (updateProgress, 100 );
$. Ajax ({
Type: "POST ",
Url: "<% = baseUrl %> ",
Data: {input1: $ ("# input1"). val (), input2: $ ("# input2"). val ()},
DataType: "text ",
Async: true,
BeforeSend: beforeCall,
Error: errorCall (),
Success: function (msg ){
// Return success. Stop progress bar.
ClearInterval (intervalID );
// Enable the new handle to run the progress bar (100%)
Handle_rest = setInterval (updateProgress, 5 );
// Monitor the progress bar status every 0.3 seconds and destroy it by 100%
Handle_distory = setInterval (distoryProcessBar, 300 );
}
});
});

});
// Register a center function with jQuery.
// Div Center
$. Fn. DivCenter = function (padding ){
If (! Padding ){
Padding = 0;
}
Var browsernum = (jQuery. browser. msie | jQuery. browser. opera )? (Padding + 2): padding;
This. each (function (){
Certificate (this).css ({
Top: "50% ",
Left: "50% ",
"Margin-top": "-" + ($ (this). height ()/2) + browsernum) + "px ",
"Margin-left": "-" + ($ (this). width ()/2) + browsernum) + "px"
});
});
}

Function errorCall (XMLHttpRequest, textStatus, errorThrown ){

}

Function beforeCall (){

}

Function distoryProcessBar (){
If (increament> = 100 ){
// Destroy the progress bar
$ ("# Process_bar"). progressBar ('did ');
$ ("# Background_panel"). hide ();
// Destroy the handle
ClearInterval (handle_rest );
ClearInterval (handle_distory );
Increament = 0;
}
}

Function updateProgress (){
// Accumulate the progress bar. No progress is added to 100.
If (increament <= 100 ){
$ ("# Process_bar"). progressBar (increament ++ );
}
}

// Image input verification function
Function isValidate (){

Return true;
}

</Script>

In addition, this section must be added to html.
<Div id = "background_panel" style = "display: none; width: 100% "> <div id =" process_bar "> </div> <div id =" status_div "> <B> </div>

To make the image more beautiful, at least not so simple
Add this section in css
# Background_panel {
Background: # ADADAD;
Padding: 5px;
Left: 0px;
Top: 0px;
Width: 100%;
Height: 100%;
}
# Process_bar {
Width: 200px;
Height: 50px;
Line-height: 50px;
Overflow: hidden;
Background: # ADADAD;
Text-align: center;
}

Complete

In addition, I posted a jQuery. progress usage document, which makes it easy to find out when it is used.

========================================== ======================================

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, it is a good choice 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 and directly call the open 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.

The interaction with the server will not be discussed here, just use ajax to get the progress value from the server, and then use progressBar (persent) to update the progress.