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

HTML code generated by the progressbar () method

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, if we change the ui-progressbar CSS class associated with <div> elements, we get a new appearance for progress bars, such as that shown in Figure 6-3, with a height of 10 pixels:

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

<style type=text/css>
  div#progressbar.ui-progressbar {
    height : 10px;

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


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

Customized progress bar

Figure 6-3. Customized progress bar

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.