Formatting Content

Using the tabs () method drastically changes the appearance of HTML elements inside the page. Indeed, this method traverses (internally in jQuery UI) HTML code and adds new CSS classes to the elements concerned (here, the tabs) to give them the appropriate style.

Figure 2-3 shows the HTML generated by jQuery UI once the tabs () instruction has changed the HTML DOM (Document Object Model) tree (the code was recovered using the Firebug extension in Firefox).

It is possible to use CSS classes of elements to customize the display. For example, if we modify the ui-state-default CSS class associated with <li> elements, we should get a new aspect for tabs. Similarly, if we modify the ui-tabs-panel CSS class associated with <div> elements, the contents of the tabs will change in appearance.

Modify these elements in the HTML by adding a <style> tag (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 />

<style type=text/css>
  li.ui-state-default {
    font-size : 10px;
  }
  div.ui-tabs-panel {
    font-size : 15px;
    font-family : georgia;
    font-style : italic;
  }
</style> <div id=tabs> <ul> <li><a href=#tab1>Tab 1</a></li> <li><a href=#tab2>Tab 2</a></li> <li><a href=#tab3>Tab 3</a></li> </ul> <div id=tab1>Contents of first tab</div> <div id=tab2>Contents of the second tab</div> <div id=tab3>Contents of the third tab</div> </div> <script> ...

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.