Submit your widget
HomeForma Progress Bar With Form（jQuery )

a Progress Bar With Form（jQuery )

Created 14 years ago   Views 10217   downloads 2700    Author n/a
a Progress Bar With Form（jQuery )
View DemoDownload
95
Share |

The Progress Bar is one of the latest components to be added to the excellent library of UI widgets and interaction helpers built on top of jQuery. It was introduced in the latest version of the library, which at the time of writing is 1.7.

The progress bar is currently only determinate, which means when we update it, we have to tell it explicitly what its value is, and we must know beforehand when the process it is used to measure completes. This widget is not currently the best choice for a process which will take an indeterminate length of time to complete.

The Underlying Page

 

Very little underlying mark-up is needed by this widget; all we need, in addition to the library resources listed above, is a simple container element. In your text editor, create the following page shell with the required resources and container element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Progress Bar</title>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script>
    <script type="text/javascript">

    </script>
  </body>
</html>

 

Save this as progressBar.html in the root jQuery UI directory. We put the stylesheets right at the start of the file and the scripts right at the end; this is for performance reasons as pages load the content quicker when they aren’t trying to load JavaScript at the same time. This is a well documented performance practice that is best adhered to. We’ve left an empty script tag at the bottom of the page; let’s add some code there next:

$(function() {

  //call progress bar constructor
  $("#container").progressbar();
});

 

Setting the Value of the progress bar

The progress bar’s value will be set to zero by default, which is why it appears empty in the previous screenshot. To fill the progress bar, we need to set the value property; change the constructor function so that it appears as follows:

//call progress bar constructor
$("#container").progressbar({ value: 50 });

 

Getting the Value of the Progress Bar

Getting the current value of the widget is as easy as it was to set it; we can use one of its methods to return the current value property. After the initial constructor, add the following code:
//set mouseover for progress bar

$("#container").mouseover(function() {

  //display the current value
  $("<p>").attr("id", "percentage").text($("#container").progressbar("option", "value") + "% complete").appendTo("body");
});

//set mouseout for progress bar
$("#container").mouseout(function() {

  //hide value
  $("#percentage").remove();
});

 

Read More

You might also like