The official home of the Python Programming Language: JqueryUI Tabs

JqueryUI Tabs

Tabs are sets of logically grouped content that allow us to quickly flip between them to. Tabs allow us to save space like accordions. For tabs to work properly following set of markups needs to used:

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

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

Each tab panel may be any valid 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

$(selector, context).tabs ("action", params)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..... });

Following table lists the different options that can be used with this method:

Option

Description

active

This option specifies the current active tab/panel. By default its value is 0.

collapsible

This option set to true, it allows tabs to be deselected. When set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false.

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.

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 "click".

heightStyle

This option controls the height of the tabs widget and each panel. By default its value is "content".

hide

This option specifies how to animate hiding of panel. By default its value is null.

show

This option specifies how to animate showing of panel. By default its value is null.

Following section will show you few working examples of tabs functionality.

Default Functionality

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

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

$(function() {

$( "#tabs-1" ).tabs();

});

</script>

<style>

#tabs-1{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor sit

amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit

voluptatem accusantiumdoloremque laudantium, totam remaperiam,

eaque ipsa quae ab illoinventore veritatis et quasiarchitecto

beatae vitae dicta suntexplicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Try our system

In the above example click on tabs to swap between content.

Use of heightStyle, collapsible and hide

The following example demonstrates the usage of three options (a) heightStyle (b) collapsibleand (c) hide in the tabs function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

$(function() {

$( "#tabs-5" ).tabs({

heightStyle:"fill",

collapsible:true,

hide:"slideUp"

});

</script>

<style>

#tabs-5{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrudexercitation

ullamco laboris nisi utaliquip ex ea commodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit voluptatem

accusantium doloremquelaudantium, totam rem aperiam, eaqueipsa quae

ab illo inventoreveritatis et quasi architecto beataevitae dicta

sunt explicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Tab 1

Tab 2

Tab 3

Neque porro quisquam est qui dolorem ipsumquia dolor sit amet, consectetur, adipisci velit...

Click the selected tab to toggle its content closed/open. You can also see the animation effect "slideUp" when the tab is closed.

Use of event

The following example demonstrates the usage of three options event in the tabs function ofJqueryUI.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

$(function() {

$( "#tabs-9" ).tabs({

event:"mouseover"

});

</script>

<style>

#tabs-9{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit

voluptatem accusantiumdoloremque laudantium, totam remaperiam,

eaque ipsa quae ab illoinventore veritatis et quasiarchitecto

beatae vitae dicta suntexplicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Try Our System

In the above example toggle the sections open/closed with mouseover the tabs.

$(selector, context).tabs ("action", params) Method

The tabs ("action", params) method allows an action on the tabs (through a JavaScript program), selecting, disabling, adding, or removing a tab. The action is specified as a string in the first argument (e.g., "add" to add a new tab). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).tabs ("action",params);;

Following table lists the different actions that can be used with this method:

Action

Description

destroy

This action destroys the tabs functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

disable

This action disables all tabs. This method does not accept any arguments.

disable( index )

This action disables the specified tab. Where index is the tab to be disabled.

enable

This action activates all the tabs. This signature does not accept any arguments.

enable( index )

This action activates a specified tab. Where index is the tab to be enabled.

load( index )

This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load.

option(optionName )

This action gets the value currently associated with the specified optionName.

option

This action gets an object containing key/value pairs representing the current tabs options hash.

option(optionName, value )

This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and valueis the value to be set for the option.

option( options )

This action sets one or more options to the tabs.

refresh

This action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option.

widget

This action returns the element serving as the tabs widget, annotated with the ui-tabs class name.

Use of action disable()

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable() method.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

$(function() {

$( "#tabs-13" ).tabs();

$( "#tabs-13" ).tabs("disable");

});

</script>

<style>

#tabs-13{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamco

laboris nisi ut aliquip exea commodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit

voluptatem accusantiumdoloremque laudantium, totam remaperiam,

eaque ipsa quae ab illoinventore veritatis et quasiarchitecto

beatae vitae dicta suntexplicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Try Our System

Here you can see all the tabs are disabled.

Use of action disable(index)

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable(index) method.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

$(function() {

$( "#tabs-17" ).tabs();

$( "#tabs-17" ).tabs("disable",2);

});

</script>

<style>

#tabs-17{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit voluptatem

accusantium doloremquelaudantium, totam rem aperiam, eaqueipsa quae

ab illo inventoreveritatis et quasi architecto beataevitae dicta

sunt explicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris nisi

ut aliquip ex ea commodoconsequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Try Our System

In the above example you notice that Tab 3 is disabled.

Event Management on tabs elements

In addition to the tabs (options) method we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below:

Event Method

Description

activate(event, ui)

This event is triggered after the tab has been activated (after the completion of animation).

beforeActivate(event,ui)

This event is triggered before a the tab has been activated.

beforeLoad(event, ui)

This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made.

create(event, ui)

This event is triggered when tabs are created.

load(event, ui)

This event is triggered after a remote tab has been loaded.

Example

The following example demonstrates the event method usage in tabs widgets. This example demonstrates the use of events activate andcreate.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

$(function() {

$( "#tabs-21" ).tabs({

activate: function( event, ui ) {

var result = $( "#result-2" ).empty();

result.append("activated" );

create: function( event, ui ) {

var result = $( "#result-1" ).empty();

result.append("created" );

}

});

</script>

<style>

#tabs-21{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.resultarea {

background: #cedc98;

border-top: 1px solid #000000;

border-bottom: 1px solid #000000;

color: #333333;

font-size:14px;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit voluptatem

accusantium doloremquelaudantium, totam rem aperiam, eaqueipsa quae

ab illo inventoreveritatis et quasi architecto beataevitae dicta

sunt explicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua. Ut

enim ad minim veniam, quisnostrud exercitation ullamco laborisnisi

ut aliquip ex ea commodoconsequat. </p>

</div>

</div><br>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Try Our System

created

Click on the tabs to see a message getting printed below on specific to events.

The official home of the Python Programming Language

JqueryUI Tabs

ليست هناك تعليقات:

إرسال تعليق