jqueryui手风琴_jQueryUI手风琴插件

jqueryui手风琴

In this post, we will discuss about one of the interesting features that are very useful for the web developers, the accordion. Accordion is an expandable and collapsible stacked list of contents that can be used to present the information in a limited space.

在这篇文章中，我们将讨论对Web开发人员非常有用的有趣功能之一，即手风琴 。手风琴是一个可扩展和可折叠的内容堆叠列表，可用于在有限的空间中显示信息。

jQueryUI手风琴插件 (jQueryUI Accordion Plugin)

jQueryUI provides a plugin called accordion to display vertically stacked list of contents such as tabs or thumbnails that can be expanded to reveal the contents associate with it and you can also collapse the revealed contents.

jQueryUI提供了一个名为Accordion的插件，用于显示垂直堆叠的内容列表，例如选项卡或缩略图，可以扩展显示与之相关的内容，也可以折叠显示的内容。

内容 (Contents)

Simple example to demonstrate the Accordion Plugin 演示手风琴插件的简单示例
jQueryUI Accordion OptionsjQueryUI手风琴选项
jQueryUI Accordion MethodsjQueryUI手风琴方法
jQueryUI Accordion EventsjQueryUI手风琴活动
jQueryUI Accordion in ActionjQueryUI手风琴在行动

演示手风琴插件的简单示例 (Simple example to demonstrate the Accordion Plugin)

The following example demonstrates the default functionality of jQueryUI accordion plugin. There are four sections in this example. You can collapse or expand these sections by clicking on each section headers.

以下示例演示了jQueryUI 手风琴插件的默认功能。此示例分为四个部分。您可以通过单击每个节标题来折叠或展开这些节。

accordion-default.html

<!doctype html>
<html>
<head><title>jQuery UI Accordion - Basic Demo</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#accordion" ).accordion();});</script></head>
<body><div id="accordion"><h3>jQuery tutorial</h3><div><p>This Tutorial covers all the basic jQuery functionality.We have also included advanced topics like jQuery plugins.</p><ul><li>jQuery Events</li><li>jQuery Animations</li><li>jQuery plugins</li></ul></div><h3>Java Collections Framework Tutorial</h3><div><p>Java Collections are one of the core frameworks of Java language.We use Collections almost in every application, this tutorial willexplain Java Collections Framework in detail. Learn about collectionsframework interfaces, classes and algorithms in detail.</p></div><h3>Java XML Tutorial</h3><div><p>XML is widely used technology to store or transport data and it’splatform independent. Java provides various API’s to read, write ormanipulate XML data. This tutorial explains about DOM Parser, SAX Parser,JDOM Parser, StAX Parser and misc xml tasks.</p></div><h3>Java Regular Expression Tutorial</h3><div><p>A regular expression defines a pattern for a String. Regular Expressionscan be used to search, edit or manipulate text. A tutorial coveringjava.util.regex package classes, regular expression symbols, metacharacters,quantifiers and capturing groups in detail with example.</p></div></div></body>
</html>

You will see the following output in the browser. The first section reveals its contents by default. Click on any of the sections to toggle the content display.

您将在浏览器中看到以下输出。第一部分默认显示其内容。单击任何部分以切换内容显示。

演示地址

jQueryUI accordion plugin provides different options and methods to customize this widget to improve the user experience on our websites. We will explore all the available options and methods in the coming sections.

jQueryUI 手风琴插件提供了不同的选项和方法来自定义此小部件，以改善我们网站上的用户体验。我们将在接下来的部分中探索所有可用的选项和方法。

回到顶部

jQueryUI手风琴选项 (jQueryUI Accordion Options)

The following table briefly describes the available accordion plugin options and its usage.

下表简要描述了可用的手风琴插件选项及其用法。

Options	Syntax	Description
active	$( “.selector” ).accordion({ active: 2 });	Denotes which panel is currently open. Supports both Integer and boolean return types. False: collapse all the pannels, provided collapsible option is true. Default integer value is zero,the first panel.
animate	$( “.selector” ).accordion({ animate: 200 });	Determines how to animate the collapsing and expanding of content panels.
collapsible	$( “.selector” ).accordion({ collapsible: true });	Collapse all the active panels at once if it is set to true.
disabled	$( “.selector” ).accordion({ disabled: true });	Setting to true will disable the accordion.
event	$( “.selector” ).accordion({ event: “mouseover” });	Specifies the event used to expand or collapse the panels. You can specify multiple events separated by comma.
header	$( “.selector” ).accordion({ header: “h2” });	Specifies the selector for header element. Default: “> li > :first-child,> :not(li):even”
heightStyle	$( “.selector” ).accordion({ heightStyle: “fill” });	This option controls the height of the accordion and panels. “fill”, “auto”, and “content” are the possible values.
icons	$( “.selector” ).accordion({ icons: { “header”: “ui-icon-plus”, “activeHeader”: “ui-icon-minus” } });	This option is used to specify the icons used for headers and active headers.

选件	句法	描述
活性	$（“ .selector”）.accordion（{active：2}）;	表示当前打开哪个面板。同时支持Integer和boolean返回类型。 False：如果可折叠选项为true，则折叠所有面板。默认整数值为零，第一面板。
动画	$（“ .selector”）。accordion（{animate：200}）;	确定如何对内容面板的折叠和展开进行动画处理。
可折叠的	$（“ .selector”）.accordion（{可折叠：true}）;	如果将其设置为true，则一次折叠所有活动面板。
残障人士	$（“ .selector”）。accordion（{disable：true}）;	设置为true将禁用手风琴。
事件	$（“ .selector”）.accordion（{event：“ mouseover”}）;	指定用于扩展或折叠面板的事件。您可以指定多个事件，以逗号分隔。
标头	$（“ .selector”）.accordion（{header：“ h2”}）;	指定标题元素的选择器。默认值：“> li>：第一个孩子，>：not（li）：even”
heightStyle	$（“ .selector”）.accordion（{heightStyle：“ fill”}）;	此选项控制手风琴和面板的高度。 “ fill”，“ auto”和“ content”是可能的值。
图标	$（“ .selector”）.accordion（{图标：{“ header”：“ ui-icon-plus”，“ activeHeader”：“ ui-icon-minus}}）；	此选项用于指定用于标题和活动标题的图标。

You can make use of these options when you use accordion plugin in your applications. Now will look into the methods available to customize the accordion plugin.

在应用程序中使用手风琴插件时，可以使用这些选项。现在将研究可用于定制手风琴插件的方法。

回到顶部

jQueryUI手风琴方法 (jQueryUI Accordion Methods)

The following table briefly describes the available accordion plugin methods and its usage.

下表简要描述了可用的手风琴插件方法及其用法。

Methods	Usage	Description
destroy()	$(“.selector”).accordion( “destroy”);	This will remove the accordion function completely.
disable()	$( “.selector”).accordion( “disable”);	This method is used to disable the accordion.
enable()	$( “.selector” ).accordion( “enable” );	Invoking this method enables the accordion.
instance()	$(“.selector”).accordion( “instance”);	This method is used to retrieve the instance object of the accordion.
option( optionName )	$( “.selector” ).accordion( “option”, “disabled” );	This is used to get the current value specified by the option name.
option( options )	$( “.selector” ).accordion( “option”, { disabled: true } );	This is used to set one or more options.
refresh()	$( “.selector” ).accordion( “refresh” );	This method process headers and panels that are added or removed directly in the DOM and the height of the accordion panels are recomputed. The result of this process depends on the heightStyle option.
widget()	$( “.selector” ).accordion( “widget” );	This method returns the jQuery object that contains the accordion.

方法	用法	描述
破坏（）	$（“。selector”）。accordion（“ destroy”）;	这将完全删除手风琴功能。
disable（）	$（“ .selector”）。accordion（“ disable”）;	此方法用于禁用手风琴。
enable（）	$（“ .selector”）.accordion（“启用”）;	调用此方法将启用手风琴。
instance（）	$（“。selector”）。accordion（“ instance”）;	此方法用于检索手风琴的实例对象。
option（optionName）	$（“ .selector”）.accordion（“ option”，“ disabled”）;	这用于获取由选项名称指定的当前值。
选项（options）	$（“ .selector”）.accordion（“ option”，{禁用：true}）;	这用于设置一个或多个选项。
刷新（）	$（“ .selector”）.accordion（“刷新”）;	此方法处理直接在DOM中添加或删除的页眉和面板，并重新计算手风琴面板的高度。此过程的结果取决于heightStyle选项。
小部件（）	$（“ .selector”）.accordion（“ widget”）;	此方法返回包含手风琴的jQuery对象。

These are the available methods in jQueryUI accordion plugin. Now will look into the events available to customize the accordion plugin.

这些是jQueryUI 手风琴插件中的可用方法。现在将研究可用于自定义手风琴插件的事件。

回到顶部

jQueryUI手风琴活动 (jQueryUI Accordion Events)

In this section we will look into the accordion plugin event methods. The following table briefly describes the accordion event methods.

在本节中，我们将研究手风琴插件事件方法。下表简要描述了手风琴事件方法。

Event Method	Syntax	Description
activate( event, ui )	$( “.selector” ).accordion({,activate: function( event, ui ) {}});	This method is fired after the activation of a panel.
beforeActivate( event, ui )	$( “.selector” ).accordion({,beforeActivate: function( event, ui ) {}});	This method is fired before the activation of the panel
create( event, ui )	$( “.selector” ).accordion({,create: function( event, ui ) {}});	This method is fired on creation of accordion.

事件方法	句法	描述
activate（event，ui）	$（“ .selector”）.accordion（{，activate：function（event，ui）{}}）;	激活面板后将触发此方法。
beforeActivate（event，ui）	$（“ .selector”）.accordion（{，beforeActivate：function（event，ui）{}}）;	在激活面板之前会触发此方法
create（event，ui）	$（“ .selector”）.accordion（{，create：function（event，ui）{}}）;	在创建手风琴时会触发此方法。

回到顶部

jQueryUI手风琴在行动 (jQueryUI Accordion in Action)

In this section, you will see some examples of accordion plugin using some of the options.

在本节中，您将看到一些使用某些选项的手风琴插件示例。

使用heightStyle选项 (Use of heightStyle option)

The following example demonstrates the use of heightStyle option. In this example, you can see the dimensions of the accordion automatically set to the height of its parent container to fill the allocated vertical space by the container. We use the option heightStyle:”fill” to achieve this.

下面的示例演示了heightStyle选项的heightStyle 。在此示例中，您可以看到手风琴的尺寸自动设置为其父容器的高度，以填充该容器分配的垂直空间。我们使用heightStyle：“ fill”选项来实现。

accordion-heightStyle.html

<!doctype html>
<html>
<head><title>jQuery UI Accordion - HeightStyle</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#accordion" ).accordion({heightStyle: "fill"});});</script></head>
<body><div id="accordion"><h3>jQuery tutorial</h3><div><p>This Tutorial covers all the basic jQuery functionality.We have also included advanced topics like jQuery plugins.</p><ul><li>jQuery Events</li><li>jQuery Animations</li><li>jQuery plugins</li></ul></div><h3>Java Collections Framework Tutorial</h3><div><p>Java Collections are one of the core frameworks of Java language.We use Collections almost in every application, this tutorial willexplain Java Collections Framework in detail. Learn about collectionsframework interfaces, classes and algorithms in detail.</p><p>Java Collections are one of the core frameworks of Java language.We use Collections almost in every application, this tutorial willexplain Java Collections Framework in detail. Learn about collectionsframework interfaces, classes and algorithms in detail.</p></div><h3>Java XML Tutorial</h3><div><p>XML is widely used technology to store or transport data and it’splatform independent. Java provides various API’s to read, write ormanipulate XML data. This tutorial explains about DOM Parser, SAX Parser,JDOM Parser, StAX Parser and misc xml tasks.</p><p>XML is widely used technology to store or transport data and it’splatform independent. Java provides various API’s to read, write ormanipulate XML data. This tutorial explains about DOM Parser, SAX Parser,JDOM Parser, StAX Parser and misc xml tasks.</p></div><h3>Java Regular Expression Tutorial</h3><div><p>A regular expression defines a pattern for a String. Regular Expressionscan be used to search, edit or manipulate text. A tutorial coveringjava.util.regex package classes, regular expression symbols, metacharacters,quantifiers and capturing groups in detail with example.</p></div></div></body>
</html>

You can play with the following output

您可以播放以下输出

演示地址

使用事件选项 (Use of event option)

The following example demonstrates the event option usage. In this example we use mouseover event with this option.

下面的示例演示事件选项的用法。在此示例中，我们将mouseover事件与此选项一起使用。

accordion-eventOption.html

<!doctype html>
<html>
<head><title>jQuery UI Accordion - Event Option</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#accordion" ).accordion({event: "mouseover"});});</script></head>
<body><div id="accordion"><h3>jQuery tutorial</h3><div><p>This Tutorial covers all the basic jQuery functionality.We have also included advanced topics like jQuery plugins.</p><ul><li>jQuery Events</li><li>jQuery Animations</li><li>jQuery plugins</li></ul></div><h3>Java Collections Framework Tutorial</h3><div><p>Java Collections are one of the core frameworks of Java language.We use Collections almost in every application, this tutorial willexplain Java Collections Framework in detail. Learn about collectionsframework interfaces, classes and algorithms in detail.</p></div><h3>Java XML Tutorial</h3><div><p>XML is widely used technology to store or transport data and it’splatform independent. Java provides various API’s to read, write ormanipulate XML data. This tutorial explains about DOM Parser, SAX Parser,JDOM Parser, StAX Parser and misc xml tasks.</p><p>XML is widely used technology to store or transport data and it’splatform independent. Java provides various API’s to read, write ormanipulate XML data. This tutorial explains about DOM Parser, SAX Parser,JDOM Parser, StAX Parser and misc xml tasks.</p></div><h3>Java Regular Expression Tutorial</h3><div><p>A regular expression defines a pattern for a String. Regular Expressionscan be used to search, edit or manipulate text. A tutorial coveringjava.util.regex package classes, regular expression symbols, metacharacters,quantifiers and capturing groups in detail with example.</p></div></div></body>
</html>

You can play with the output here.

您可以在此处使用输出。

演示地址

That’s all for now and you will see the details of more jQuery Plugins in the coming posts.

到此为止，您将在接下来的文章中看到更多jQuery插件的详细信息。

翻译自: https://www.journaldev.com/5665/jqueryui-accordion-plugin

jqueryui手风琴