Wednesday, August 22, 2012

JQuery Tabs

Now it is very easy to build a Tab control in Web applications using JQuery Tabs.

Steps to do.

Step - 1
Include following javascripts file to the page.

  • jquery-1.1.3.1.pack1.js
  • jquery.tabs.pack.js
Css plays a major role in building tab appearance in the page, hence include jquery.tabs.css too ( This can be made custom too)

Step- 2

Add a Div and  include the tabnames in <ul>  <li><a 
After that include each tab content in seperate Div but still inside main Div. Note that the href given to the anchor should have the corresponding id in DIV too.
  1. <div id="container1">
  2.         <ul>
  3.               <li><a href="#tabs1">Tab1</a></li>
  4.               <li><a href="#tabs2">Tab2</a></li>
  5.         </ul>
  6.         <div id="tabs1">
  7.             Display something
  8.         </div>
  9.         <div id="tabs2">
  10.             Display something
  11.         </div>
  12.     </div>

Step -3
 Finally add following javascript to hook the DIV with jquery Tab plugin.
  1. <script type="text/javascript">
  2.     $(function () {
  3.         $('#container1').tabs();
  4.     });
  5.  </script>
Done !!!

An Example is
  1. <html>
  2. <head runat="server">
  3.     <title></title>
  4. <script type="text/javascript" src="Components/Resources/Scripts/jquery-1.1.3.1.pack.js"></script>
  5. <script type="text/javascript" src="Components/Resources/Scripts/jquery.tabs.pack.js"></script>
  6. <link rel="stylesheet" href="Components/Resources/css/jquery.tabs.css" type="text/css">
  9. </head>
  10. <body>
  11.     <form id="form1" runat="server">
  12.      <div id="container1">
  13.         <ul>
  14.               <li><a href="#tabs1">Tab1</a></li>
  15.               <li><a href="#tabs2">Tab2</a></li>
  16.         </ul>
  17.         <div id="tabs1">
  18.             Display something
  19.         </div>
  20.         <div id="tabs2">
  21.             Display something
  22.         </div>
  23.     </div>
  24. <script type="text/javascript">
  25.     $(function () {
  26.         $('#container1').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
  27.     });
  28.         </script>
  30.     </form>
  31. </body>
  32. </html>


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)