JQuery UI Tabs

One of the previous articles explained the process of using accordion menus to save space on webpages. There are other ways to perform similar functionalities. One of the ways is to use JQuery UI Tabs widget. Tab group is one of the most frequently used grouping feature. Tabs allow developers group related content. clicking a tab opens the details for that tab. Perform following steps to create tabs

  • The elements you want to convert to tabs must be inside the ordered or un-ordered lists.
  • Each tabbed element should be located inside the “li” element. Anchor tag should wrap each element inside the list and anchor tab must have an href attribute which starts with #.
  • You can use any element as detail element for specific tab. The id of the element should be same as the value after the # tab for the href attribute to which you want to connect this detailed element. Suppose the value of href attribute for a tab is #abcd. The id of the corresponding element should be “abcd”

Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Tabs with optional parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      
      
     <script>
         $(function() {
            $( "#tab-list" ).tabs({
                
                
            });
         });
      </script>
		
		
   </head>
	
   <body>
      <div id = "tab-list">
         <ul>
            <li><a href = "#home">Home</a></li>
            <li><a href = "#about">About</a></li>
            <li><a href = "#contact">Contact</a></li>
             <li><a href = "#services">Services</a></li>
         </ul>
			
         <div id = "home">
            <p>Nunc vulputate odio quis leo dignissim, at tristique ex porttitor. Quisque ut ligula sem. Phasellus mi orci, ultrices eget maximus vitae, efficitur cursus leo. Nunc orci diam, eleifend auctor sollicitudin id, sagittis ac arcu. Duis iaculis, risus non varius viverra, ipsum tellus fringilla est, quis cursus velit felis a turpis.</p>
         </div>
			
         <div id = "about">
            <p>Proin enim velit, rhoncus in mollis in, iaculis sed risus. Nam varius elementum vulputate. Ut malesuada tellus in dui tempus tincidunt. Suspendisse pulvinar tristique purus, et tempus nibh posuere et. Vestibulum ut dignissim neque. Integer quis mi nec eros laoreet convallis. Praesent tristique sem nulla, sit amet mattis mi auctor et. </p>
         </div>
			
         <div id = "contact">
            <p>Morbi ullamcorper vulputate maximus. Curabitur dictum ante id lacus volutpat, in pellentesque libero lobortis. Sed bibendum massa et tempor eleifend. Morbi tempus lobortis nisl, ac mollis ante. Etiam auctor vel arcu ac venenatis. Maecenas iaculis dignissim nulla et ultrices. Morbi tempor mollis erat, sed accumsan nisi pretium vitae. Sed ullamcorper risus nibh, vitae imperdiet enim facilisis ut.  </p>
					
            <p> Nulla rhoncus vehicula scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisi massa, dignissim eget egestas quis, tincidunt nec lorem. Quisque molestie tortor ut dolor volutpat, in tempor velit suscipit. Morbi nec nisl ultrices, congue nisl ut, commodo orci. Fusce sed ex eget diam fermentum mattis. Mauris vitae tellus mi. Pellentesque viverra velit in mauris tempor, id gravida ipsum tempus.
               </p>
         </div>
          
          <div id ="services">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu orci congue, porta turpis a, faucibus turpis. Praesent sed ultricies lectus, sit amet bibendum sapien. Vestibulum vitae sem sed dui blandit vulputate vitae ut erat. Pellentesque facilisis blandit mauris id iaculis. Donec suscipit tortor ut lacus hendrerit ornare. Sed nunc odio, sodales non mauris quis, iaculis placerat nisi. Quisque scelerisque libero velit, quis dapibus lacus consequat a.
            </p>
          
          </div>
			
      </div>
		
   </body>
	
</html>

Download Code Run Code

The above code contains four list elements and four corresponding div elements inside the outer div. JQuery factor function selects the outer div with id “home” and calls tabs() function on it. Each list element represents a tab, similarly, each div element represents detail of the tab. Clicking a tab opens will open corresponding div element.

JQuery UI Tabs with Optional Parameters

You can also pass additional optional parameters to the tabs() function to change the behavior of tabs. The parameters are passed inside the curly brackets with each parameter separated by a comma. The following example uses, collapsible parameter with value true. Collapsible specifies whether or not the tab will be collapsed with mouse click. It’s default value is false. Max specifies the maximum value of the spinner, min specifies the minimum while step specifies the number of values to skip. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Tabs</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      
      
     <script>
         $(function() {
            $( "#tab-list" ).tabs({
                 collapsible:true 
            });
         });
      </script>
		
		
   </head>
	
   <body>
      <div id = "tab-list">
         <ul>
            <li><a href = "#home">Home</a></li>
            <li><a href = "#about">About</a></li>
            <li><a href = "#contact">Contact</a></li>
             <li><a href = "#services">Services</a></li>
         </ul>
			
         <div id = "home">
            <p>Nunc vulputate odio quis leo dignissim, at tristique ex porttitor. Quisque ut ligula sem. Phasellus mi orci, ultrices eget maximus vitae, efficitur cursus leo. Nunc orci diam, eleifend auctor sollicitudin id, sagittis ac arcu. Duis iaculis, risus non varius viverra, ipsum tellus fringilla est, quis cursus velit felis a turpis.</p>
         </div>
			
         <div id = "about">
            <p>Proin enim velit, rhoncus in mollis in, iaculis sed risus. Nam varius elementum vulputate. Ut malesuada tellus in dui tempus tincidunt. Suspendisse pulvinar tristique purus, et tempus nibh posuere et. Vestibulum ut dignissim neque. Integer quis mi nec eros laoreet convallis. Praesent tristique sem nulla, sit amet mattis mi auctor et. </p>
         </div>
			
         <div id = "contact">
            <p>Morbi ullamcorper vulputate maximus. Curabitur dictum ante id lacus volutpat, in pellentesque libero lobortis. Sed bibendum massa et tempor eleifend. Morbi tempus lobortis nisl, ac mollis ante. Etiam auctor vel arcu ac venenatis. Maecenas iaculis dignissim nulla et ultrices. Morbi tempor mollis erat, sed accumsan nisi pretium vitae. Sed ullamcorper risus nibh, vitae imperdiet enim facilisis ut.  </p>
					
            <p> Nulla rhoncus vehicula scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nisi massa, dignissim eget egestas quis, tincidunt nec lorem. Quisque molestie tortor ut dolor volutpat, in tempor velit suscipit. Morbi nec nisl ultrices, congue nisl ut, commodo orci. Fusce sed ex eget diam fermentum mattis. Mauris vitae tellus mi. Pellentesque viverra velit in mauris tempor, id gravida ipsum tempus.
               </p>
         </div>
          
          <div id ="services">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu orci congue, porta turpis a, faucibus turpis. Praesent sed ultricies lectus, sit amet bibendum sapien. Vestibulum vitae sem sed dui blandit vulputate vitae ut erat. Pellentesque facilisis blandit mauris id iaculis. Donec suscipit tortor ut lacus hendrerit ornare. Sed nunc odio, sodales non mauris quis, iaculis placerat nisi. Quisque scelerisque libero velit, quis dapibus lacus consequat a.
            </p>
          
          </div>
			
      </div>
		
   </body>
	
</html>

Download Code Run Code

<<< JQuery UI SpinnerJQuery UI Tooltip >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .