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 Options

jQueryUI手風琴選項
jQueryUI Accordion Methods

jQueryUI手風琴方法
jQueryUI Accordion Events

jQueryUI手風琴活動
jQueryUI Accordion in Action

jQueryUI手風琴在行動

示範手風琴插件的簡單示例 (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

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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
  <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 will
    explain Java Collections Framework in detail. Learn about collections
    framework 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’s
    platform independent. Java provides various API’s to read, write or
    manipulate 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 Expressions
    can be used to search, edit or manipulate text. A tutorial covering
    java.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

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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
  <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 will
    explain Java Collections Framework in detail. Learn about collections
    framework 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 will
    explain Java Collections Framework in detail. Learn about collections
    framework 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’s
    platform independent. Java provides various API’s to read, write or
    manipulate 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’s
    platform independent. Java provides various API’s to read, write or
    manipulate 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 Expressions
    can be used to search, edit or manipulate text. A tutorial covering
    java.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

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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
  <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 will
    explain Java Collections Framework in detail. Learn about collections
    framework 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’s
    platform independent. Java provides various API’s to read, write or
    manipulate 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’s
    platform independent. Java provides various API’s to read, write or
    manipulate 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 Expressions
    can be used to search, edit or manipulate text. A tutorial covering
    java.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手風琴

jqueryui手風琴_jQueryUI手風琴插件

jQueryUI手風琴插件 (jQueryUI Accordion Plugin)

内容 (Contents)

示範手風琴插件的簡單示例 (Simple example to demonstrate the Accordion Plugin)

jQueryUI手風琴選項 (jQueryUI Accordion Options)

jQueryUI手風琴方法 (jQueryUI Accordion Methods)

jQueryUI手風琴活動 (jQueryUI Accordion Events)

jQueryUI手風琴在行動 (jQueryUI Accordion in Action)

使用heightStyle選項 (Use of heightStyle option)

使用事件選項 (Use of event option)

繼續閱讀

Java String.format方法的簡單使用

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method