JqueryUI - 手风琴小部件
jQueryUI 中的 Accordion Widget 是一个基于 jQuery 的可扩展和可折叠的内容容器，它被分成多个部分，可能看起来像选项卡。 jQueryUI 提供 accordion() 方法来实现这一点。
语法
accordion() 方法有两种形式 −
$ (selector, context).accordion (options) 方法
accordion (options) 方法声明 HTML 元素及其内容应作为手风琴菜单进行处理和管理。 options 参数是指定所涉及菜单的外观和行为的对象。
语法
$(selector, context).accordion (options);
您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −
$(selector, context).accordion({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 −
| 序号 | 选项 & 说明 |
|---|---|
| 1 | active
指示首次访问页面时打开的菜单的索引。 默认情况下，它的值为 0，即第一个菜单。 |
| 2 | animate
此选项用于设置如何动画更改面板。 默认情况下，它的值为 {}。 |
| 3 | collapsible
当此选项设置为 true 时，它允许用户通过单击关闭菜单。 默认情况下，点击打开面板的标题没有任何效果。 默认情况下，它的值为 false。 |
| 4 | disabled
此选项设置为 true 时会禁用手风琴。 默认情况下，它的值为 false。 |
| 5 | event
此选项指定用于选择手风琴标题的事件。 默认情况下，其值为 click。 |
| 6 | header
此选项指定一个选择器或元素来覆盖用于标识标题元素的默认模式。 默认情况下它的值为 > li > :first-child,> :not(li):even。 |
| 7 | heightStyle
此选项用于控制手风琴和面板的高度。 默认情况下，它的值为auto。 |
| 8 | icons
此选项是一个对象，它定义了用于打开和关闭面板的标题文本左侧的图标。 用于关闭面板的图标被指定为名为 header 的属性，而用于打开面板的图标被指定为名为 headerSelected 的属性。 默认情况下它的值为 { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }。 |
以下部分将向您展示手风琴小部件功能的一些工作示例。
默认功能
以下示例演示了手风琴小部件功能的一个简单示例，不向 accordion() 方法传递任何参数。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-1" ).accordion();
});
</script>
<style>
#accordion-1{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-1">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 accordionexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
单击标题（Tab 1、Tab 2、Tab 3）以展开/折叠分成逻辑部分的内容，就像标签一样。
可折叠的使用
下面的例子演示了三个选项collapsible 在JqueryUI 的accordion widget 中的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-2" ).accordion({
collapsible: true
});
});
</script>
<style>
#accordion-2{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-2">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 accordionexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
这里我们将 collapsible 设置为 true。 单击手风琴标题，这允许折叠活动部分。
heightStyle 的使用
以下示例演示了三个选项 heightStyle 在JqueryUI 的手风琴小部件中的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<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 style = "height:250px">
<div id = "accordion-3">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
</div>
</div><br><br>
<h3>Height style-Fill</h3>
<div style = "height:250px">
<div id = "accordion-4">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
</div>
</div>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 accordionexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
这里我们有两个手风琴，第一个将 heightStyle 选项设置为 content，这允许手风琴面板保持其原始高度。 第二个手风琴的 heightStyle 选项设置为 fill，脚本会自动将手风琴的尺寸设置为其父容器的高度。
$ (selector, context).accordion ("action", params) 方法
accordion ("action", params) 方法可以对手风琴元素执行操作，例如选择/取消选择手风琴菜单。 该操作在第一个参数中指定为字符串（例如，"禁用"禁用所有菜单）。 在下表中查看可以传递的操作。
语法
$(selector, context).accordion ("action", params);;
下表列出了可与此方法一起使用的不同actions操作 −
| 序号 | 操作 & 说明 |
|---|---|
| 1 | destroy
此操作完全破坏了元素的手风琴功能。 元素返回到它们的预初始化状态。 |
| 2 | disable
此操作禁用所有菜单。 不会考虑任何点击。 此方法不接受任何参数。 |
| 3 | enable
此操作重新激活所有菜单。 再次考虑点击次数。 此方法不接受任何参数。 |
| 4 | option( optionName )
此操作获取当前关联的具有指定 optionName 的手风琴元素的值。 这需要一个字符串值作为参数。 |
| 5 | option
此操作获取一个对象，其中包含代表当前手风琴选项哈希的键/值对。 |
| 6 | option( optionName, value )
此操作设置与指定 optionName 相关联的手风琴选项的值。 |
| 7 | option( options )
此操作为手风琴设置一个或多个选项。 |
| 8 | refresh
此操作处理直接在 DOM 中添加或删除的任何标题和面板。 然后它重新计算手风琴面板的高度。 结果取决于内容和 heightStyle 选项。 此方法不接受任何参数。 |
| 9 | widget
此操作返回手风琴小部件元素； 用 ui-accordion 类名注释的那个。 |
示例
现在让我们看一个使用上表中的操作的示例。 以下示例演示了 option( optionName, value ) 方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://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>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</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>
让我们将上面的代码保存在一个 HTML 文件 accordionexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
在这里，我们演示了手风琴的启用和禁用。 选择相应的单选按钮以检查每个操作。
手风琴元素的事件管理
除了我们在前面部分看到的手风琴（选项）方法之外，JqueryUI 还提供了为特定事件触发的事件方法。 下面列出了这些事件方法 −
| 序号 | 事件方法 & 说明 |
|---|---|
| 1 | activate(event, ui)
激活菜单时会触发此事件。 此事件仅在面板激活时触发，在创建手风琴小部件时不会为初始面板触发。 |
| 2 | beforeActivate(event, ui)
此事件在激活面板之前触发。 可以取消此事件以防止面板激活。 |
| 3 | create(event, ui)
创建手风琴时会触发此事件。 |
示例
以下示例演示了手风琴小部件中的事件方法用法。 此示例演示事件 create、beforeActive 和 active 的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<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 id = "accordion-6">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<hr />
<span id = result></span>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 accordionexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
这里我们根据事件在底部显示文本。
