Let me mention few simple steps to implement tab in Jquery :
First, make sure the HTML (ASPX) page you are creating is pointing at the stylesheet that contains the jQuery UI theme you are using. The tabs make use of the themes and will not render as tabs unless the styles are pulled in.
Next you’ll need to create the HTML. Everything that has to do with tabs should be wrapped in a DIV. You can either give the ID a class or give it an ID, as long as you can select it later to apply the tabs() method that turns it all into a tabbed interface. Suppose our parent div is
Within that DIV, you’ll place an unordered list:
<ul> <li><a href="#cricketTab">Cricket</a>
</li> <li><a href="#hockeyTab">Hockey</a></li> <li>
<a href="#footballTab"> Foot Ball </a></li> <li>
<a href="#basketballTab"> Basket Ball </a></li> </ul>
which represents your tabs. Notice the href=”#id” stuff. Those are pointing to ids of the DIVS that come next.
<div id="cricketTab">Cricket content</div>
<
<div id="hockeyTab">Hockey content</div>
<
<div id="footballTab"> Foot Ball content</div>
<
<div id="basketballTab">Basket Ball content</div>
Next, in your jQuery code, select the outer DIV and call tabs()
$(function() {
$("#tabs").tabs();
});
By following this simple steps , tabs will be created. For full documentation go to Jquery Tab. Thank You.
No comments:
Post a Comment