JQuery UI (iii) switchable panel--tabs

First, the preface

The use of tabs components is as simple as dialog, and the default configuration enables the simplest tab, and more complex applications can be achieved by setting more options.

Second, direct into the theme

Introducing Styles and JS libraries:

<link type= "Text/css" rel= "Stylesheet" href= "Css/redmond/jquery-ui-1.7.2.custom.css"/>

<script type= "Text/javascript" src= "Js/jquery-1.3.2.min.js" ></script>

<script type= "Text/javascript" src= "Js/jquery-ui-1.7.2.custom.min.js" ></script>

To write the tab code, jquery uses div as the tabs tag:

<div id= "Divtabs" style= "width:500px; position:relative; " >

<ul>

<li><a href= "#tab1_1" >one</a></li>

<li><a href= "dialog.aspx" >two</a></li>//reference page is loaded by default using AJAX

<li><a href= "#tab1_3" >three</a></li>

</ul>

<div id= "tab1_1" >tab1_1 content </div>

<div id= "tab1_3" >tab1_3 content </div>

</div>

Write jquery code:

<script type= "Text/javascript" >

$ (function () {

$ ("#divTabst"). tabs ();

});

</script>

This is the default tabs load

Third, other loading methods

Collapsible tabs Loading:

<script type= "Text/javascript" >

$ (function () {

$ ("#divTabs"). Tabs ({collapsible:true});

});

</script>

Mouse Sliding is switching tabs:

<script type= "Text/javascript" >

$ (function () {

$ ("#divTabs"). Tabs ({event: "MouseOver"});

});

</script>

Iv. Flexible and flexible events

TAB has many events: Select, load, show, add, remove, enable, disable

Use these events to accomplish many complex tasks. You need to note the signature of the event:

$ (' #example '). Bind (' Tabsselect ', function (event, UI) {

Objects available in the function context:

Ui.tab//anchor element of the selected (clicked) tab

Ui.panel//element, that contains the Selected/clicked tab contents

Ui.index//Zero-based index of the selected (clicked) tab

});

The first is the event object, and the second UI object is the extra parameter passed, and we can get the tab object, the tab's container, and the tab's index value.

For example, we can do the validation in the event:

$ (' #example '). Tabs ({

Select:function (event, UI) {

var isValid = ...//form validation returning TRUE or False

return isValid;

}

});

or switch to the selected state immediately when you add a tab:

var $tabs = $ (' #example '). Tabs ({

Add:function (event, UI) {

$tabs. Tabs (' select ', ' # ' + ui.panel.id);

}

});

Ingenious, more apps you can also see the official documentation for the TAB component:

Http://jqueryui.com/demos/tabs