jQuery UI

Chapter 6. Progress Bars

Progress bars allow you to view the progress of a task, such as transferring a file. jQuery UI can handle them easily.

Basic Principles of Progress Bars

Suppose we want to write the HTML code to display the progress bar shown in Figure 6-1. This is a container that will gradually fill in to indicate the progress of a task (for the moment, it is almost empty and will start to fill in from the left side).

Figure 6-1. Progress bar

As required by jQuery UI, we represent the progress bar with a <div> element (shown in bold):

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

Progress : <div id=progressbar></div>

<script>

$("div#progressbar").progressbar ();

</script>

This indicates that each <div> element corresponding to the progress bar is managed by the jQuery UI progressbar () method.

Formatting Content

Figure 6-2 shows an example of the HTML generated by jQuery UI once modified by the progressbar () instruction (this code was recovered using the Firebug extension in Firefox).

Figure 6-2. HTML code generated by the progressbar () method

Again, it is possible to use CSS classes of elements to customize the display. For example, ...