JqueryUI - Tabs-alljchome-开发者的教程家园

JqueryUI Tutorial

JqueryUI Interactions

JqueryUI Widgets

JqueryUI Effects

JqueryUI Utilities

JqueryUI Useful Resources

Selected Reading

JqueryUI - Tabs

Tabs are sets of logically grouped content that allow us to quickly fpp between them to. Tabs allow us to save space pke accordions. For tabs to work properly following set of markups needs to use −

Tabs must be in a pst either ordered(<ol>) or unordered(<ul>).

Each tab title must be within each <p> and wrapped by anchor (<a>) tag with an href attribute.

Each tab panel may be any vapd element but it must have an id, which corresponds to the hash in the anchor of the associated tab.

jQueryUI provides us tabs () method drastically changes the appearance of HTML elements inside the page. This method traverses (internally in jQuery UI) HTML code and adds new CSS classes to the elements concerned (here, the tabs) to give them the appropriate style.

Syntax

The tabs () method can be used in two forms −

$(selector, context).tabs (options) Method

Method

$ (selector, context).tabs (options) Method

The tabs (options) method declares that an HTML element and its content should be managed as tabs. The options parameter is an object that specifies the appearance and behavior of tabs.

Syntax

$(selector, context).tabs (options);

You can provide one or more options at a time using JavaScript object. If there are more than one options to be provided then you will separate them using a comma as follows −

$(selector, context).tabs({option1: value1, option2: value2..... });

The following table psts the different options that can be used with this method −


$( ".selector" ).tabs (
   { active: 1 }
);
$( ".selector" ).tabs (
   { collapsible: true }
);
$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);
$( ".selector" ).tabs (
   { event: "mouseover" }
);
$( ".selector" ).tabs (
   { heightStyle: "fill" }
);
$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);
$( ".selector" ).tabs (
   { show: { effect: "bpnd", duration: 800 } }
);

Sr.No.	Option & Description
1	active This option specifies the current active tab/panel. By default its value is 0.
2	collapsible This option set to true, it allows tabs to be deselected. When set to false (the default), cpcking on a selected tab does not deselect (it remains selected). By default its value is false.
3	disabled This option uses an array to indicate index tabs that are disabled (and therefore cannot be selected). For example, use [0, 1] to disable the first two tabs. By default its value is false.
4	event This option is a name of the event that lets users select a new tab. If, for example, this option is set to "mouseover", passing the mouse over a tab will select it. By default its value is "cpck".
5	heightStyle This option controls the height of the tabs widget and each panel. By default its value is "content".
6	hide This option specifies how to animate hiding of panel. By default its value is null.
7	show This option specifies how to animate showing of panel. By default its value is null.

The following section will show you a few working examples of tabs functionapty.

Default Functionapty

The following example demonstrates a simple example of tabs functionapty, passing no parameters to the tabs() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionapty</title>
      <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css
         " rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
		
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px sopd #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <span id = "tabs-1">
         <ul>
            <p><a href = "#tabs-2">Tab 1</a></p>
            <p><a href = "#tabs-3">Tab 2</a></p>
            <p><a href = "#tabs-4">Tab 3</a></p>
         </ul>
         <span id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit 
               amet, consectetur, adipisci vept... 
            </p>
         </span>
         <span id = "tabs-3">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing ept, 
               sed do eiusmod tempor incididunt ut labore et dolore magna apqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut apquip ex ea commodo consequat.
            </p>
         </span>
         <span id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt exppcabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing ept, 
               sed do eiusmod tempor incididunt ut labore et dolore magna apqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut apquip ex ea commodo consequat.
            </p>
         </span>
      </span>
   </body>
</html>

Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −