本文概述
- 第一种方法
- jQuery UI Accordion()示例1
- 第二种方法
- jQuery UI Accordion()方法示例2
句法：
你可以通过两种形式使用Accordion()方法：
$(selector, context).accordion (options) Method$(selector, context).accordion ("action", params) Method第一种方法$（selector, context）.accordion（options）方法：
Accordion（选项）方法指定应将HTML元素及其内容视为Accordion菜单进行管理。 options参数是一个对象, 用于指定所涉及菜单的外观和行为。
句法：
$(selector, context).accordion (options);
你可以使用Javascript对象一次使用一个或多个选项。如果要提供多个选项, 则必须使用逗号将它们分开, 如下所示：
$(selector, context).accordion({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表：
| 选项 | 描述 |
|---|---|
| active | 它指定第一次访问该页面时打开的菜单的索引。默认情况下, 它的值为0。它有两种类型：布尔值：如果设置为false, 将折叠所有面板。这要求可折叠选项为true。整数：活动（打开）的面板的从零开始的索引。负值将选择从最后一个面板倒退的面板。 |
| animate | 动画选项用于设置如何为更改的面板设置动画。默认情况下, 其值为{}。这有四种类型：布尔值：值false将禁用动画。数字：这是一个持续时间, 以毫秒为单位。字符串：默认持续时间使用的缓动名称。对象：具有缓动和持续时间属性的动画设置。 |
| collapsible | 当设置为false时, 此选项允许用户单击打开的面板的标题无效。当菜单设置为true时, 它可以帮助用户通过单击菜单来关闭菜单。默认情况下, 其值为false。 |
| disabled | 如果将此选项的值设置为true, 则它将禁用Accordion。默认情况下, 其值为false。 |
| event | 该选项指定用于选择Accordion标题的事件。默认情况下, 其值为click。 |
| header | 此选项指定一个选择器或元素, 以覆盖用于标识标题元素的默认模式。默认情况下, 其值为> li> ：first-child, > ：not（li）：even。 |
| heightStyle | heightStyle选项用于控制Accordion和面板的高度。默认情况下, 其值为auto。其可能的值为：自动：所有面板将设置为最高面板的高度。 fill：根据Accordion的父高扩展到可用高度。内容：每个面板的高度仅与其内容相同。 |
| icons | 此选项是一个对象, 用于定义要用于打开和关闭面板的标题文本左侧的图标。用于封闭面板的图标指定为名为header的属性, 而用于开放面板的图标指定为名为headerselected的属性。默认情况下, 其值为{“ header”：“ ui-icon-triangle-1-e”, “ activeheader”：“ ui-icon-triangle-1-s”}。 |
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8"
<
title>
jQuery UI Accordion - Default functionality<
/title>
<
link rel="stylesheet" href="http://www.srcmini.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<
script src="http://www.srcmini.com//code.jquery.com/jquery-1.10.2.js">
<
/script>
<
script src="http://www.srcmini.com//code.jquery.com/ui/1.11.4/jquery-ui.js">
<
/script>
<
link rel="stylesheet" href="http://www.srcmini.com/resources/demos/style.css">
<
script>
$(function() {
$( "#accordion" ).accordion();
});
<
/script>
<
/head>
<
body>
<
div id="accordion">
<
h3>
What is Java?<
/h3>
<
div>
<
p>
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.
<
/p>
<
/div>
<
h3>
Why is it called platform?<
/h3>
<
div>
<
p>
Because java has its own run time environment (JRE) and API so it is called platform.
<
/p>
<
/div>
<
h3>
Where is it used?<
/h3>
<
div>
<
p>
According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices
are mobile phones, games, robotics, application in banking sector etc.
<
/p>
<
/div>
<
h3>
Why srcmini<
/h3>
<
div>
<
ul>
<
li>
Life Time Validity<
/li>
<
li>
Training by Java Professionals<
/li>
<
li>
Get an opportunity to work on real time projects<
/li>
<
li>
Interaction with Industry Experts<
/li>
<
li>
Small Batches to focus on each student<
/li>
<
/ul>
<
/div>
<
/div>
<
/body>
<
/html>
立即测试
第二种方法Accordion（“操作”, 参数）方法用于对Accordion元素执行操作, 例如选择/取消选择Accordion菜单。该操作在第一个参数中指定为字符串（例如, “ disable”禁用所有菜单）。
句法：
$(selector, context).accordion ("action", params);
以下是可以通过的操作列表。
| 行动 | 描述 |
|---|---|
| destroy | 此操作将完全破坏元素的Accordion功能。元素返回其预初始化状态。 |
| disable | 此操作将禁用所有菜单。没有点击将被考虑在内。此方法不接受任何参数。 |
| enable | 此操作将重新激活所有菜单。再次考虑点击。此方法不接受任何参数。 |
| option(optionName) | 该操作获取具有指定选项名的当前关联的Accordion元素的值。这将字符串值作为参数。 |
| option | 该操作将获得一个对象, 该对象包含表示当前Accordion选项哈希的键/值对。 |
| option(optionName, value) | 此操作设置与指定的optionName关联的Accordion选项的值。 |
| option(options) | 此操作为Accordion设置了一个或多个选项。这里的options是要设置的option-value对的映射。 |
| refresh | 此操作处理直接在dom中添加或删除的所有标题和面板。然后重新计算Accordion面板的高度。结果取决于内容和heightStyle选项。此方法不接受任何参数。 |
| widget | 此操作返回Accordion小部件元素；一个带有UIAccordion类名称的注释。 |
<
!doctype html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
jQuery UI Accordion Example <
/title>
<
link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<
script src="http://img.readke.com/220430/00022VB1-2.jpg">
<
/script>
<
script src="http://img.readke.com/220430/00022W915-3.jpg">
<
/script>
<
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 id="accordion-5">
<
h3>
What is Java?<
/h3>
<
div>
<
p>
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.
<
/p>
<
/div>
<
h3>
Why is it called Platform?<
/h3>
<
div>
<
p>
Because java has its own run time environment (JRE) and API so it is called platform.
<
/p>
<
/div>
<
h3>
Where is it used?<
/h3>
<
div>
<
p>
According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices
are mobile phones, games, robotics, application in banking sector etc.
<
/p>
<
/div>
<
h3>
Why srcmini?<
/h3>
<
div>
<
ul>
<
li>
Life Time Validity<
/li>
<
li>
Training by Java Professionals<
/li>
<
li>
Get an opportunity to work on real time projects<
/li>
<
li>
Interaction with Industry Experts<
/li>
<
li>
Small Batches to focus on each student<
/li>
<
/ul>
<
/div>
<
/div>
<
div style="margin-top:30px">
<
input type="radio" name="disable" id="disableaccordion"
value="http://www.srcmini.com/disable">
Disable accordion
<
input type="radio" name="disable" id="enableaccordion" checked
value="http://www.srcmini.com/enable">
Enable accordion
<
/div>
<
/body>
<
/html>
【jQuery UI Accordion】立即测试
