Section 189th, jQueryUI, Folding menu UI

jQueryUI, Folding menu UI

Learning Essentials:

1. Using accordion

2. Modify the accordion style

The properties of the 3.accordion () method

Event of the 4.accordion () method

Use on in 5.accordion

The Collapse menu (accordion), like a tab, is a functional UI that toggles different content on the same page. It's almost nothing different from the use of tabs, just the effect of the display is somewhat different.

A Using accordion

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

HTML section

<DivID= "Accordion">    <H1>Menu 1</H1>    <Div>Content 1</Div>    <H1>Menu 2</H1>    <Div>Content 2</Div>    <H1>Menu 3</H1>    <Div>Content 3</Div></Div>

JQuery section

Accordion () method to allow the required chunks to execute a collapsed menu method

$ (' #accordion '). accordion ();

Two Modify the accordion style

In the accordion collapsed menu that appears, open Firebug in Firefox or right-click to view elements. In this way, we can look at the accordion style and modify it according to the style. We modify the title background of accordion in order to conform to the theme of the website.

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

Three Properties of the accordion () method

tab methods are available in two forms: 1.accordion (Options), options are the parameters of an object-key-value pair, each key-value pair represents an option, 2.accordion (' action ', Param), and action is a string of the Action tab method , Param is an option for options.

Accordion appearance options

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

    $ (' #accordion '). Accordion ({        collapsible:true        // allow menu to collapse corresponding content. The default value is False, the corresponding content is not closed    });

Disabled None/Boolean defaults to False, set to True to disable the Collapse menu. Disable Post menu cannot be collapsed

    $ (' #accordion '). Accordion ({        collapsible:true,        // allows the menu to collapse the corresponding content. The default value is False, the corresponding content is not closed        disabled:true            // Forbidden after the menu cannot be collapsed    });

The event click/string triggers the accordion events type, which by default is click. You can set other mouse events such as mouseover. Set what event triggers collapse

    $ (' #accordion '). Accordion ({        collapsible:true,        // allows the menu to collapse the corresponding content. The default value is False, does not close the corresponding content        //  disabled:true,            //Disable Post menu cannot collapse        event: ' MouseOver '       // set what event triggers the collapse    });

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.

    $ (' #accordion '). Accordion ({        collapsible:true,        // allows the menu to collapse the corresponding content. The default value is False, does not close the corresponding content        //  disabled:true,            //Forbidden After menu cannot collapse        event: ' MouseOver ',       // set what event triggers collapse        Active:true    });

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

    $ (' #accordion '). Accordion ({        //  collapsible:true,        //Allow menu to collapse corresponding content. The default value is False, the corresponding content is not closed /        /  disabled:true,            //Forbidden after the menu cannot be collapsed        //  event: ' MouseOver ',       //Set what event triggers the collapse        //  active:true,        heightstyle: ' Content '       // Folding height setting    });

Header h1/String Sets the caption label of the collapsed menu.

    $ (' #accordion '). Accordion ({        //  collapsible:true,        //Allow menu to collapse corresponding content. The default value is False, the corresponding content is not closed /        /  disabled:true,            //Forbidden after the menu cannot be collapsed        //  event: ' MouseOver ',       //Set what event triggers folding        //  active:true,        //  Heightstyle: ' content '       //Fold height settings        header: ' H3 '                 // set the title label of the collapsed menu, as set to H3, In the HTML also to correspond    });

Icons The default icon to set the desired icon.

$ (' #accordion '). accordion ({//collapsible:true,//allows the menu to collapse the corresponding content. The default value is false and the corresponding content is not closed        //disabled:true,//Forbidden after menu cannot be collapsed        //Event : ' MouseOver ',//Set what event triggers the collapse        //Active:true,        //heightstyle: ' content '//folding height settings        //header: ' H3 '//Set the title label of the collapsed menu, as set to H3, in the HTML also to correspondicons: {"Header": "Ui-icon-plus",//icon when collapsed"Activeheader": "Ui-icon-minus"//Set the expand icon        }    });

Three Events for the accordion () method

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

Accordion Event Options

Create activates this event when a collapsed menu is created.
The method has two parameters (event, UI), UI parameters have two sub-properties header and panel, get the object of the current title and content options.

    $ (' #accordion '). Accordion ({        function (event, UI) {    // ) activates this event when a collapsed menu is created.             // to the currently expanded menu caption Object            alert ($ (Ui.panel.get ()). HTML ());  // to the currently expanded menu content Object         }    });

Activate starts this event when a collapsed menu is toggled.
The method has two parameters (event, UI), UI parameters have four child properties newheader , newpanel , oldheader , oldpanel . The new header object, the
New Content object, the old header object, and the old content object are obtained separately.

    $ (' #accordion '). Accordion ({        function (event, UI) {    // ) This event is started when a collapsed menu is toggled            // Gets the caption object of the previous expand menu            alert ($ (Ui.oldPanel.get ()). HTML ());  // gets the content object of the previous expand menu            // gets the title object that is currently being expanded            Alert ($ (Ui.newPanel.get ()). HTML ());  // Gets the content object that is currently being expanded         }    });

Beforeactivate starts this event before switching to a collapsed menu.
The method has two parameters (event, UI), UI parameters have four child properties newheader , newpanel , oldheader , oldpanel . Get the new header object, the new Content object, the old header object, and the old Content object, respectively.

    $ (' #accordion '). Accordion ({        function (event, UI) {    // ) start this event before switching to a collapsed menu             // Gets the caption object of the previous expand menu            alert ($ (Ui.oldPanel.get ()). HTML ());  // gets the content object of the previous expand menu            // gets the title object that is currently being expanded            Alert ($ (Ui.newPanel.get ()). HTML ());  // Gets the content object that is currently being expanded         }    });

Section 189th, jQueryUI, Folding menu UI