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, ...
Get jQuery UI now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.