Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

6. Progress Bars > Formatting Content

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;
  }
</style>

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

<script>

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

</script>

  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint