The official home of the Python Programming Language: JqueryUI Accordion

JqueryUI Accordion

Accordion Widget in jQueryUI is a jQuery based expandable and collapsible content holder that is broken into sections and probably looks like tabs. jQueryUI provides accordion() method to achieve this.

Syntax

The accordion() method can be used in two forms:

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

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

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

The accordion (options) method declares that an HTML element and its contents should be treated and managed as accordion menus. Theoptions parameter is an object that specifies the appearance and behavior of the menu involved.

Syntax

$(selector, context).accordion (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).accordion({option1: value1, option2: value2..... });

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

Option

Description

active

Indicates the index of the menu that is open when the page is first accessed. By default its value is 0,i.e the first menu.

animate

This option is used to set how to animate changing panels. By default its value is {}.

collapsible

This option when set to true, it allows users to close a menu by clicking on it. By default, clicks on the open panel’s header have no effect. By default its value is false.

disabled

This option when set to truedisables the accordion. By default its value is false.

event

This option specifies the event used to select an accordion header. By default its value is click.

header

This option specifies a selector or element to override the default pattern for identifying the header elements. By default its value is > li> :first-child,> :not(li):even.

heightStyle

This option is used to control the height of accordion and panels. By default its value is auto.

icons

This option is an object that defines the icons to use to the left of the header text for opened and closed panels. The icon to use for closed panels is specified as a property named header, whereas the icon to use for open panels is specified as a property namedheaderSelected. By default its value is { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Following section will show you few working examples of accordion widget functionality.

Default Functionality

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

<!doctype html>

<head>

<title>jQuery UI Accordion Example </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() {

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

});

</script>

<style>

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

</style>

</head>

<body>

<div>

<p>

Lorem ipsum dolor sit amet,consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam, quisnostrud exercitation ullamco

laboris nisi ut aliquip ex eacommodo consequat.

</p>

</div>

<div>

<p>

Lorem ipsum dolor sit amet,consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam, quisnostrud exercitation ullamco

laboris nisi ut aliquip ex eacommodo consequat.

</p>

</div>

<div>

<p>

Lorem ipsum dolor sit amet,consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam, quisnostrud exercitation ullamco

laboris nisi ut aliquip ex eacommodo consequat.

</p>

</div>

</body>

</html>

Let's save above code in an HTML fileaccordionexample.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

Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.

Tab 2

Tab 3

Click headers(Tab 1,Tab 2,Tab 3) to expand/collapse content that is broken into logical sections, much like tabs.

Use of collapsible

The following example demonstrates the usage of three options collapsible in the accordion widget of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Accordion Example </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() {

$( "#accordion-2" ).accordion({

collapsible: true

});

</script>

<style>

#accordion-2{font-size:14px;}

</style>

</head>

<body>

<div>

<p>

Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magna

aliqua. Ut enim ad minimveniam, quis nostrud exercitation

ullamco laboris nisi utaliquip ex ea commodo consequat.

</p>

</div>

<div>

<p>

Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magna

aliqua. Ut enim ad minimveniam, quis nostrud exercitation

ullamco laboris nisi utaliquip ex ea commodo consequat.

</p>

</div>

<div>

<p>

Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magna

aliqua. Ut enim ad minimveniam, quis nostrud exercitation

ullamco laboris nisi utaliquip ex ea commodo consequat.

</p>

<ul>

<li>List item three</li>

</ul>

</div>

</body>

</html>

Let's save above code in an HTML fileaccordionexample.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

Here we have set collapsible to true. Click on an accordion header, this allows collapsing the active section.

Use of heightStyle

The following example demonstrates the usage of three options heightStyle in the accordion widget of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Accordion Example </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() {

$( "#accordion-3" ).accordion({

heightStyle: "content"

});

$( "#accordion-4" ).accordion({

heightStyle: "fill"

});

</script>

<style>

#accordion-3, #accordion-4{font-size: 14px;}

</style>

</head>

<body>

<h3>Height style-content</h3>

<div>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicingelit,

sed do eiusmodtempor incididunt ut labore et dolore

magna aliqua.

</p>

<ul>

<li>List item three</li>

</ul>

</div>

<div>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicingelit,

sed do eiusmodtempor incididunt ut labore et dolore

magna aliqua.

</p>

</div>

<div>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicingelit,

sed do eiusmodtempor incididunt ut labore et dolore

magna aliqua.

</p>

</div>

</div><br><br>

<h3>Height style-Fill</h3>

<div>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed doeiusmod tempor incididunt ut labore

et dolore magnaaliqua.

</p>

<ul>

<li>List item three</li>

</ul>

</div>

<div>

<p>

Lorem ipsumdolor sit amet, consecteturadipisicing

elit, sed doeiusmod tempor incididunt ut labore

et dolore magnaaliqua.

</p>

</div>

<div>

<p>

Lorem ipsumdolor sit amet, consecteturadipisicing

elit, sed doeiusmod tempor incididunt ut labore

et dolore magnaaliqua.

</p>

</div>

</body>

</html>

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

Height style-content

Tab 1

Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.

List item one

List item two

List item three

List item four

List item five

Tab 2

Tab 3

Height style-Fill

Tab 1

Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.

List item one

List item two

List item three

List item four

List item five

Tab 2

Tab 3

Here we have two accordions, the first one hasheightStyle option set to content, which allows the accordion panels to keep their native height. Second accordion has heightStyle option set tofill, the script will automatically set the dimensions of the accordion to the height of its parent container.

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

The accordion ("action", params) method can perform an action on accordion elements, such as selecting/de-selecting the accordion menu. The action is specified as a string in the first argument (e.g., "disable" disables all menus). Check out the actions that can be passed, in the following table.

Syntax

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

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

Action

Description

destroy

This action destroys the accordion functionality of an element completely. The elements return to their pre-initstate.

disable

This action disable all menus. No click will be taken into account. This method does not accept any arguments.

enable

This action reactivate all menus. The clicks are again considered. This method does not accept any arguments.

option(optionName )

This action gets the value of currently associated accordion element with the specifiedoptionName. This takes a String value as argument.

option

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

option(optionName, value )

This action sets the value of the accordion option associated with the specified optionName.

option( options )

This action sets one or more options for the accordion.

refresh

This action processes any headers and panels that were added or removed directly in the DOM. It then recomputesthe height of the accordion panels. Results depend on the content and the heightStyleoption. This method does not accept any arguments.

widget

This action returns the accordion widget element; the one annotated with the ui-accordion class name.

Example

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

<!doctype html>

<head>

<title>jQuery UI Accordion Example </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() {

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

disabled: false

});

$("input").each(function () {

$(this).change(function () {

if($(this).attr("id") == "disableaccordion") {

$("#accordion-5").accordion("option", "disabled", true);

} else {

$("#accordion-5").accordion("option", "disabled", false);

}

});

</script>

<style>

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

</style>

</head>

<body>

<div>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicingelit,

sed do eiusmodtempor incididunt ut labore et doloremagna

aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamcolaboris nisi ut aliquip ex ea

commodo consequat.

</p>

</div>

<div>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicingelit,

sed do eiusmodtempor incididunt ut labore et doloremagna

aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamcolaboris nisi ut aliquip ex ea

commodoconsequat.

</p>

</div>

<div>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicingelit,

sed do eiusmodtempor incididunt ut labore et doloremagna

aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamcolaboris nisi ut aliquip ex ea

commodoconsequat.

</p>

<ul>

<li>List item three</li>

</ul>

</div>

<input type="radio" name="disable" id="disableaccordion"

value="disable">Disable accordion

<input type="radio" name="disable" id="enableaccordion" checked

value="enable">Enable accordion

</div>

</body>

</html>

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

Tab 1

Tab 2

Tab 3

Disable accordion Enable accordion

Here we demonstrate enabling and disabling of the accordions. Select the respective radio buttons to check each action.

Event Management on accordion elements

In addition to the accordion (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 when a menu is activated. This event is only fired on panel activation, it is not fired for the initial panel when the accordion widget is created.

beforeActivate(event,ui)

This event is triggered before a panel is activated. This event can be canceled to prevent the panel from activating.

create(event, ui)

This event is triggered when the accordion is created.

Example

The following example demonstrates the event method usage in accordion widgets. This example demonstrates the use of events create,beforeActive and active.

<!doctype html>

<head>

<title>jQuery UI Accordion Example </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() {

$( "#accordion-6" ).accordion({

create: function (event, ui) {

$("span#result").html ($("span#result").html () + "<b>Created</b><br>");

beforeActivate :function (event, ui)

{

$("span#result").html ($("span#result").html () + ", <b>beforeActivate</b><br>");

activate: function (event, ui) {

$("span#result").html ($("span#result").html () + "<b>activate</b><br>");

}

});

</script>

<style>

#accordion-6{font-size:14px;}

</style>

</head>

<body>

<div>

<p>

Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore

magna aliqua. Ut enimad minim veniam, quis nostrud

exercitation ullamcolaboris nisi ut aliquip ex ea

commodo consequat.

</p>

</div>

<div>

<p>

Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore

magna aliqua. Ut enimad minim veniam, quis nostrud

exercitation ullamcolaboris nisi ut aliquip ex ea

commodo consequat.

</p>

</div>

<div>

<p>

Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore

magna aliqua. Ut enimad minim veniam, quis nostrud

exercitation ullamcolaboris nisi ut aliquip ex ea

commodo consequat.

</p>

<ul>

<li>List item three</li>

</ul>

</div>

<hr />

</body>

</html>

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

Tab 1

Tab 2

Tab 3

Here we are displaying a text at the bottom, based on events.

Created

The official home of the Python Programming Language

JqueryUI Accordion

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

إرسال تعليق