Section 188th, JQuery, tab UI

jQueryUI, Tab UI

Learning Essentials:

1. Using tabs

2. Modify the tabs style

The properties of the 3.tabs () method

Event of the 4.tabs () method

Use on in 5.tabs

tab is a UI that provides users the ability to switch between different content on the same page. This provides a very good user experience, especially on pages with a compact page layout.

A Using tabs

Using tabs is simple, but you need to follow the specified specification.

Tabs () method, which is the jQueryUI tab method, will be a compliant chunk, Execution tab

HTML section

<DivID= "Tabs">    <ul>        <Li><ahref= "#tabs1">Tab1</a></Li>        <Li><ahref= "#tabs2">TaB2</a></Li>        <Li><ahref= "#tabs3">Tab3</a></Li>    </ul>    <DivID= "TABS1">Tab1-content</Div>    <DivID= "TABS2">Tab2-content</Div>    <DivID= "TABS3">Tab3-content</Div></Div>

JQuery section

$ (' #tabs '). tabs ();

Two Modify the tabs style

In the Pop-up Tabs dialog box, open Firebug in Firefox or right-click to view elements. In this way, we can look at the tabs style and modify it according to the style. We modify the title background of tabs in order to conform to the theme of the website.

No need to modify the CSS in the UI to replace it with STYLE.CSS directly.

{    background:url (.. /img/ui_header_bg.png);}

Remove the outer frame

{    border:none;}

Content area Decoration

{    height:100px;     padding:10px;     Border:1px solid #aaa;     border-top:none;     position:relative;     top:-2px;}

Three Properties of the tabs () method

There are two types of tab methods: 1.tabs (Options), options are the parameters of the object key-value pairs, each key-value pair represents an option, 2.tabs (' action ', param), the action is the string of the Operation tab method, and Param is the An option for the options.

Collapsible false/Boolean worth is set to True to allow the tab to collapse the corresponding content. The default value is False, and the corresponding content is not closed.

    $ (' #tabs '). Tabs ({        collapsible:true// allow tab to collapse corresponding content    });

Disabled None/array uses an array to specify which tab is disabled, for example: [0,1] To disable the first two tabs.

    $ (' #tabs '). Tabs ({        collapsible:true// allow tabs to collapse corresponding content        disabled:[0,1]    // Disable which tab    });

Event click/A string that triggers the type of the tab, by default, click. You can set other mouse events such as mouseover. the default is to click the Toggle tab, and you can set the mouse to move in mouseover

    $ (' #tabs '). Tabs ({        collapsible:true// allow tab folding for the corresponding content        // disabled:[0,1]    //Which tab        is disabled // the default is to click the Toggle tab, and you can set the mouse to move in mouseover    });

Active arrays and Boolean values are arrays, which tab is displayed by default when initialized, and the default value is 0. If it is a Boolean value, the default is whether to collapse. The condition must be a collapsible value of true.

 $ (' #tabs '  true  , //  allow tabs to collapse corresponding content  //  disabled:[0,1]//Disable which tab  event: ' MouseOver ', 

    $ (' #tabs '). Tabs ({        collapsible:true// allow tab folding for the corresponding content        //  disabled:[0,1]    //disable which tab        // The default is to click the Toggle tab, and you can set the mouse to move into mouseover        active:  False         // allow folding in case, default all collapse    });

The Heightstyle content/string defaults to content, which is the height to stretch based on the contents. Auto automatically bases on the highest one, and fill is a certain available height.

 $ (' #tabs '  //  Collapsible:true,//Allow tab to collapse corresponding content  //  disabled:[0,1]//Disable which tab  //  Eve NT: ' MouseOver ',//default is click Toggle tab, and can set mouse to move in mouseover  //  Active:false//allow folding, default all collapsed  Heightstyle: ' content ' //} According to the contents); 

 $ (' #tabs '  //  Collapsible:true,//Allow tab to collapse corresponding content  //  disabled:[0,1]//Disable which tab  //  Eve NT: ' MouseOver ',//default is click Toggle tab, and can set mouse to move in mouseover  //  Active:false//allow folding, default all folding  heightstyle: ' Auto ' // Span style= "COLOR: #008000" > According to the highest one, the others are the same height }); 

    $ (' #tabs '). Tabs ({        //  collapsible:true,//Allow tab folding corresponding content        //  disabled : [0,1]    //disable which tab        //  event: ' MouseOver ',//default is click Toggle tab, and can set mouse to move in mouseover        // active:false         //Allow folding in case, default all folding        heightstyle: ' Fill '   // All options uniformly fill a certain height     });

When the show false/Boolean Toggle tab, the fade effect is applied by default.

    $ (' #tabs '). Tabs ({        //  collapsible:true,//Allow tab folding corresponding content        //  disabled : [0,1]    //disable which tab        //  event: ' MouseOver ',//default is click Toggle tab, and can set mouse to move in mouseover        // active:false         //Allow folding in case, default all collapsed        // heightstyle: ' Fill '//   All options uniformly fills a certain height        show:true  // fade in effect     });

Hide False When you toggle the tab, the fade-out effect is applied by default.

    $ (' #tabs '). Tabs ({        //  collapsible:true,//Allow tab folding corresponding content        //  disabled : [0,1]    //disable which tab        //  event: ' MouseOver ',//default is click Toggle tab, and can set mouse to move in mouseover        // active:false         //Allow folding in case, default all collapsed        // heightstyle: ' Fill '//   all options uniformly fill a certain height        hide:true  // fade-out effect     });

Note: When the above two is set to True, the default is fade, and if you want to use a different effect, you can use the string parameter in the table below.

The Blind dialog box appears or disappears from the top of the

Bounce dialog box appears intermittently or disappears, vertical motion

Clip dialog box appears vertically or disappears from the center

Slide dialog box appears or disappears from the left

Drop dialog box appears or disappears from the left, with a transparency change

Fold dialog box appears or disappears from the upper-left corner

Highlight dialog box appears or disappears with changes in transparency and background color

The Puff dialog box zooms in from the center. "Shrink" when displayed, "grow" when disappearing

The scale dialog box zooms in from the center. "Grow" when displayed and "shrink" when it disappears

Pulsate dialog box to display or disappear in a blinking form

Three Events for the tabs () method

In addition to property settings, the tabs () method provides a number of events. These events can provide a callback function for a variety of different states.

Create activates this event when a tab is created
The method has two parameters
(Event, UI), the UI parameter has two sub-Properties tab and panel, which gets the object of the current active card and content options.

    $ (' #tabs '). Tabs ({        Create:function (event, UI) {           // } trigger Alert when the tab is created            ($ (Ui.tab.get ()). HTML ());      // selected Tab button Object            Alert ($ (Ui.panel.get ()). HTML ());    // selected Tab Content Object         }    });

Activate start this event when switching to an active card
The method has two parameters
(Event, UI), UI parameters have four sub-attributes NewTab, Newpanel,
Oldtab,oldpanel. When you get the new tab object, the new content
objects, Old tab objects, and old content objects.

    $ (' #tabs '). Tabs ({        activate:function (event, UI) {           // trigger            when switching to an active card Alert ($ (Ui.oldTab.get ()). HTML ());     // the previous Selected button object            Alert ($ (Ui.oldPanel.get ()). HTML ());   // previous selected Content Object            Alert ($ (Ui.newTab.get ()). HTML ());     // the currently selected button Object            Alert ($ (Ui.newPanel.get ()). HTML ());   // the currently selected content Object         }    });

beforeactivate  starts this event before switching to an active card.
This method has two parameters
Number (event, UI), UI parameters have four sub-properties NewTab, Newpanel,
Oldtab,oldpanel. Get the New Tab object, the new content
object, the Old tab object, and the old Content object, respectively.

    $ (' #tabs '). Tabs ({        beforeactivate:function (event, UI) {     // triggers before switching to an active card             Alert ($ (Ui.oldTab.get ()). HTML ());     // currently selected button Object            Alert ($ (Ui.oldPanel.get ()). HTML ());   // currently selected content Object            Alert ($ (Ui.newTab.get ()). HTML ());     // The button Object            is about to be selected Alert ($ (Ui.newPanel.get ()). HTML ());   // will be selected content Object         }    });

Load activates this event when Ajax loads a document.
The method has two parameters
(Event, UI), UI parameters have two sub-Properties tab and panel, get the current
An object for the active card and content options.

Beforeload activates this event before Ajax loads a document.
The method has two parameters
(Event, UI), UI parameters have four sub-Properties tab and panel, and JQXHR
And Ajaxsettings, the first two get the current active card and content options on the
Like, the latter two are Ajax operand objects.

Section 188th, JQuery, tab UI