📅 最后修改于: 2020-11-27 01:55:39 🧑 作者: Mango
jQuery UI Accordian是一个可扩展且可折叠的内容持有人，它分为几部分，可能看起来像标签。
句法：
您可以通过两种形式使用手风琴()方法：
$(selector, context).accordion (options) Method
$(selector, context).accordion ("action", params) Method
$(selector，context).accordion(options)方法：
手风琴(选项)方法指定应将HTML元素及其内容视为手风琴菜单进行管理。 options参数是一个对象，用于指定所涉及菜单的外观和行为。
句法：
$(selector, context).accordion (options);
您可以使用Javascript对象一次使用一个或多个选项。如果要提供多个选项，则必须使用逗号将它们分开，如下所示：
$(selector, context).accordion({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表：
| Option | Description |
|---|---|
| active | It specifies the index of the menu that is open when the page is first accessed. By default its value is 0. It is of two types:
boolean: if set to false will collapse all panels. This requires the collapsible option to be true. integer: The zero-based index of the panel that is active (open). a negative value selects panels going backward from the last panel.
|
| animate | The animate option is used to set how to animate changing panels. By default its value is {}.
this is of four types: boolean: a value of false will disable animations. number: this is a duration in milliseconds string: name of easing to use with default duration. object: animation settings with easing and duration properties.
|
| collapsible | This option allows users to click on the open panel’s header have no effect when it is set to false. It facilitates users to close a menu by clicking on it when it is set to true. By default its value is false. |
| disabled | If you set this option’s value true then it disables 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 | The heightStyle option is used to control the height of accordion and panels. By default its value is auto.
Its possible values are: auto: all panels will be set to the height of the tallest panel. fill: expand to the available height based on the accordion’s parent height. content: each panel will be only as tall as its content.
|
| 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 named headerselected. By default its value is { “header”: “ui-icon-triangle-1-e”, “activeheader”: “ui-icon-triangle-1-s” }. |
让我们以jQuery UI Accordion()方法为例：
jQuery UI Accordion - Default functionality
What is Java?
Java is a simple, object oriented, concurrent and general purpose programming language.
Some other important features of java are robust, secure, portable, interactive and high performance.
Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature
like platform independent and robust in the case of memory management.
Why is it called platform?
Because java has its own run time environment (JRE) and API so it is called platform.
Where is it used?
According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices
are mobile phones, games, robotics, application in banking sector etc.
Why JavaTpoint
- Life Time Validity
- Training by Java Professionals
- Get an opportunity to work on real time projects
- Interaction with Industry Experts
- Small Batches to focus on each student
手风琴(“操作”，参数)方法用于对手风琴元素执行操作，例如选择/取消选择手风琴菜单。该动作在第一个参数中指定为字符串(例如，“ disable”禁用所有菜单)。
句法：
$(selector, context).accordion ("action", params);
以下是可以通过的操作列表。
| Action | Description |
|---|---|
| destroy | This action destroys the accordion functionality of an element completely. The elements return to their pre-init state. |
| 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 specified optionname. 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. Here options is a map of option-value pairs to set. |
| refresh | This action processes any headers and panels that were added or removed directly in the dom. it then re-computes the height of the accordion panels. Results depend on the content and the heightStyle option. This method does not accept any arguments. |
| widget | This action returns the accordion widget element; the one annotated with the UI-accordion class name. |
让我们以一个示例来演示选项(optionName，value)方法的使用：
jQuery UI Accordion Example
What is Java?
Java is a simple, object oriented, concurrent and general purpose programming language.
Some other important features of java are robust, secure, portable, interactive and high performance.
Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature
like platform independent and robust in the case of memory management.
Why is it called Platform?
Because java has its own run time environment (JRE) and API so it is called platform.
Where is it used?
According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices
are mobile phones, games, robotics, application in banking sector etc.
Why JavaTpoint?
- Life Time Validity
- Training by Java Professionals
- Get an opportunity to work on real time projects
- Interaction with Industry Experts
- Small Batches to focus on each student
Disable accordion
Enable accordion