jQuery UI Accordion
jQuery UI Accordion
jQuery UI Accordian是一种可扩展且可折叠的内容持有人，它分成几部分，可能看起来像标签。
语法:
您可以以两种形式使用手风琴()方法:
$(selector, context).accordion (options)
$(selector, context).accordion ("action", params)
第一种方法
$(selector, context).accordion (options)方法:
accordion (options)方法指定应将HTML元素及其内容作为手风琴菜单进行管理。 options参数是一个对象，用于指定所涉及菜单的外观和行为。
语法:
$(selector, context).accordion (options);
您可以使用Javascript对象一次使用一个或多个选项。如果要提供多个选项，则必须使用逗号将它们分开，如下所示:
$(selector, context).accordion({option1: value1, option2: value2.....});
以下是可与该方法一起使用的不同选项的列表:
| 选项 | 说明 |
| active | 它指定第一次访问页面时打开的菜单的索引。默认情况下，其值为0。它有两种类型: boolean: 如果设置为false，将折叠所有面板。这要求可折叠选项为true。 integer: 活动(打开)的面板的从零开始的索引。负值将选择从最后一个面板倒退的面板。 |
| animate | "动画"选项用于设置如何为更改的面板设置动画。默认情况下，其值为{}。 这有四种类型: boolean: false值将禁用动画。 number: 这是一个持续时间(以毫秒为单位) string: 默认持续时间使用的缓动名称。 object: 具有缓动和持续时间属性的动画设置。 |
| collapsible | 此选项允许用户单击打开面板的标题(设置为false时不起作用)。当菜单设置为true时，它可以帮助用户通过单击菜单来关闭菜单。默认情况下，其值为false。 |
| disabled | 如果将此选项的值设置为true，则它将禁用手风琴。默认情况下，其值为false。 |
| event | 此选项指定用于选择手风琴标题的事件。默认情况下，其值为click。 |
| header | 此选项指定一个选择器或元素，以覆盖用于标识标题元素的默认模式。默认情况下，其值为< li<:first-child，<:not(li): even。 |
| heightStyle | heightStyle选项用于控制手风琴和面板的高度。默认情况下，其值为auto。 其可能的值为: 自动: 将所有面板设置为最高面板的高度。 fill: 根据手风琴的父高扩展到可用高度。 内容: 每个面板的高度仅与其内容相同。 |
| icons | 此选项是一个对象，用于定义要用于打开和关闭面板的标题文本左侧的图标。用于封闭面板的图标指定为名为header的属性，而用于开放面板的图标指定为名为headerselected的属性。默认情况下，其值为{"header": "ui-icon-triangle-1-e"，"activeheader": "ui-icon-triangle-1-s"}。 |
jQuery UI Accordion()示例1
让我们以jQuery UI Accordion()方法为例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/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 bianchenghao6</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>
第二种方法
$(selector, context).accordion({option1: value1, option2: value2.....})方法用于对手风琴元素执行操作，例如选择/取消选择手风琴菜单。该操作在第一个参数中指定为字符串(例如，"禁用"将禁用所有菜单)。
语法:
$(selector, context).accordion ("action", params);
以下是可以通过的动作的列表。
| 动作 | 说明 |
| destroy | 此操作将完全destroy元素的手风琴功能。元素返回其初始状态。 |
| disable | 此操作将禁用所有菜单。没有点击将被考虑在内。此方法不接受任何参数。 |
| enable | 此操作将重新激活所有菜单。再次考虑点击。此方法不接受任何参数。 |
| option(optionName) | 此操作获取具有指定选项名的当前关联的手风琴元素的值。这需要一个字符串值作为参数。 |
| option | 此操作将获取一个对象，该对象包含表示当前手风琴选项哈希的键/值对。 |
| option(optionName，value) | 此操作设置与指定的optionName相关的手风琴选项的值。 |
| option(options) | 此操作为手风琴设置一个或多个选项。这里的options是要设置的option-value对的映射。 |
| refresh | 此操作处理直接在dom中添加或删除的所有标题和面板。然后重新计算手风琴面板的高度。结果取决于内容和heightStyle选项。此方法不接受任何参数。 |
| widget | 此操作返回手风琴小部件元素；带有UI手风琴类名称。 |
jQuery UI Accordion()方法示例2
让我们以一个示例来演示选项(optionName，value)方法的使用:
<!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://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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 bianchenghao6?</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="disable">Disable accordion
<input type="radio" name="disable" id="enableaccordion" checked
value="enable">Enable accordion
</div>
</body>
</html>