Most of the web applications contains more content then what can be displayed on a single page to the user.Also the application may have different groups or categories related to the different entities in the application.In an e-commerce site for example there can be categories for books,electronics ,clothes etc.If we are going to display all of this information on a single page then it can be quite confusing to the user.The better alternative is to segregate different category of items into different groups which can then be displayed together.
jQuery ui tabs widget provides an elegant way to implement such a scenario.Using the tabs widget we can divide the content into different tabs.When the user selects a particular tab the data in the corresponding tab is displayed.
We can use the tabs widget in our application by following the below steps.
1.Reference the required jQuery library and the jQuery plugin.
2.Create the root element which will contain all the tabs and the panels.We need to give it identifier as we will refer it while calling the .().
<div id="tabbedPanel"> </div>
3.Declare the list for the tabs we want to show.We need to declare this list inside our root element.
<div id="tabs"> <ul> <li><a href="#id1">Text1</a></li> <li><a href="#id2">Text2</a></li> <li><a href="#id3">Text3</a></li> </ul> </div>
4. Declare the panels which will contain the actual content.These should correspond with the tabs that we have declared in steps.So the contents in these panels will be displayed when we click the corresponding tab.
<div id="tabs"> <ul> <li><a href="#id1">Text1</a></li> <li><a href="#id2">Text2</a></li> <li><a href="#id3">Text3</a></li> </ul> <div id="id1"> panel1 contents </div> <div id="id2"> panel2 contents </div> <div id="id3"> panel3 contents </div> </div>
5. Now finally we need to call the tabs() function on the root div which contains all the tabs and panels.
$(document).ready(function () {
$('#tabs').tabs();
});
If we refresh the page after making the above changes we will get the page as displayed below
We have given the names to panels and tabs for testing purpose ,in real world scenario we may use something more realistic such as the below tabs.
We can use the following markup to generate the above tabs.It’s important to see that the href id in the list refers to a div which we have declared inside the root div.In this example href=”#ComputerStudents” refers to a div which we have declared inside root div,we prefix # when referring to div.
<div id="tabbedPanel"> <ul> <li><a href="#ComputerStudents">Computer Students</a></li> <li><a href="#ElectronicsStudents">Electronics Students</a></li> <li><a href="#MechanicalStudents">Mechanical Students</a></li> </ul> <div id="ComputerStudents"> ComputerStudents </div> <div id="ElectronicsStudents"> ElectronicsStudents </div> <div id="MechanicalStudents"> MechanicalStudents </div> </div>
So as we have seen it is easy to include jQuery ui tabs widget in our application to segregate the contents into different tabs.
Leave a Reply