Web Development with jQuery®

(Elliott) #1

(^422) ❘ CHAPTER 18 TABS
ui-widget-content
ui-corner-bottom"
id="exampleTabThird"
aria-labelledby="ui-id-3"
role="tabpanel"
aria-expanded="false"
aria-hidden="true">



Mauris sollicitudin, sem non tempor molestie, quam nunc
blandit lectus, quis molestie dui arcu in lectus. In id
fringilla elit. Ut auctor lectus eget orci malesuada, et
lacinia ligula interdum. Pellentesque bibendum, orci eget
euismod scelerisque, nibh nulla posuere mi, quis commodo
purus sem et arcu.






The preceding markup document contains all the class name and attribute changes that the Tabs
plugin makes to the document. The additional class names and attributes are not necessary to style
the document because these are all automatically added by the Tabs plugin upon calling the tabs()
method. I have included the additional class names and attributes to illustrate what happens to the
markup document after the tabs() method has completed execution. The following style sheet is
applied to the preceding example.
body {
font: 12px 'Lucida Grande', Arial, sans-serif;
background: #fff;
color: rgb(50, 50, 50);
}
div#exampleTabFirst {
background: lightblue;
padding: 5px;
}
div#exampleTabSecond {
background: lightgreen;
padding: 5px;
}
div#exampleTabThird {
background: yellow;
padding: 5px;
}
.ui-tabs-hide {
display: none;
}
ul.ui-tabs-nav {
list-style: none;
padding: 0 ;
margin: 0 ;
height: 22px;
border-bottom: 1px solid darkgreen;
}
[http://www.it-ebooks.info](http://www.it-ebooks.info)
Free download pdf