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
<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.