JqueryUI - 手风琴

jQueryUI 中的 Accordion Widget 是一个基于 jQuery 的可扩展和可折叠内容容器，它被分成多个部分，可能看起来像选项卡。jQueryUI 提供了 Accordion() 方法来实现这一点。

句法

Accordion ()方法可以以两种形式使用 -

$(选择器, 上下文).accordion(选项) 方法

Accordion (options)方法声明 HTML 元素及其内容应作为手风琴菜单进行处理和管理。options参数是一个指定所涉及菜单的外观和Behave的对象。

句法

$(selector, context).accordion (options);

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 -

$(selector, context).accordion({option1: value1, option2: value2..... });

下表列出了可以与此方法一起使用的不同选项-

先生。 选项和说明
1 积极的

表示第一次访问该页面时打开的菜单的索引。默认情况下它的值为0，即第一个菜单。

选项 - 激活

表示第一次访问该页面时打开的菜单的索引。默认情况下它的值为0，即第一个菜单。

这可以是类型 -

  • Boolean − If set to false will collapse all panels. This requires the collapsible option to be true.

  • Integer − The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

Syntax

$( ".selector" ).accordion(
   { active: 2 }
);
2 动画化

此选项用于设置如何以动画方式更改面板。默认情况下，其值为{}。

Option - animate

This option is used to set how to animate changing panels. By default its value is {}.

This can be of type −

  • Boolean − A value of false will disable animations.

  • Number − This is a duration in milliseconds

  • String − Name of easing to use with default duration.

  • Object − Animation settings with easing and duration properties.

Syntax

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
3 可折叠的

当此选项设置为true时，它​​允许用户通过单击菜单来关闭菜单。默认情况下，单击打开面板的标题没有任何效果。默认情况下它的值为false。

Option - collapsible

This option when set to true, it allows users to close a menu by clicking on it. By default, clicks on the open panel’s header have no effect. By default its value is false.

Syntax

$( ".selector" ).accordion(
   { collapsible: true }
);
4 残疾人

当此选项设置为true时，将禁用手风琴。默认情况下它的值为false。

Option - disabled

This option when set to true disables the accordion. By default its value is false.

Syntax

$( ".selector" ).accordion(
   { disabled: true }
);
5 事件

此选项指定用于选择折叠式标题的事件。默认情况下，其值为click。

Option - event

This option specifies the event used to select an accordion header. By default its value is click.

Syntax

$( ".selector" ).accordion(
   { event: "mouseover" }
);
6 标头

此选项指定一个选择器或元素来覆盖用于标识标题元素的默认模式。默认情况下，其值为> li > :first-child,> :not(li):even。

Option - header

This option specifies a selector or element to override the default pattern for identifying the header elements. By default its value is > li > :first-child,> :not(li):even.

Syntax

$( ".selector" ).accordion(
   { header: "h3" }
);
7 高度样式

此选项用于控制折叠面板和面板的高度。默认情况下，其值为auto。

Option - heightStyle

This option is used to control the height of accordion and panels. By default its value is auto.

Possible values are −

  • auto − All panels will be set to the height of the tallest panel.

  • fill − Expand to the available height based on the accordion's parent height.

  • content − Each panel will be only as tall as its content.

Syntax

$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
8 图标

此选项是一个对象，它定义要在打开和关闭的面板的标题文本左侧使用的图标。用于关闭面板的图标指定为名为header的属性，而用于打开面板的图标指定为名为headerSelected的属性。默认情况下，其值为{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }。

Option - icons

This option is an object that defines the icons to use to the left of the header text for opened and closed panels. The icon to use for closed panels is specified as a property named header, whereas the icon to use for open panels is specified as a property named headerSelected. By default its value is { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Syntax

$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

以下部分将向您展示手风琴小部件功能的一些工作示例。

默认功能

以下示例演示了 Accordion 小部件功能的简单示例，不向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 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

单击标题（选项卡 1、选项卡 2、选项卡 3）可展开/折叠分成逻辑部分的内容，就像选项卡一样。

使用折叠式

下面的示例演示了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-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的使用

下面的示例演示了JqueryUI 的折叠小部件中三个选项heightStyle的用法。

<!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)方法可以对 Accordion 元素执行操作，例如选择/取消选择 Accordion 菜单。该操作被指定为第一个参数中的字符串（例如，“disable”禁用所有菜单）。查看下表中可以通过的操作。

句法

$(selector, context).accordion ("action", params);;

下表列出了可以与此方法一起使用的不同操作-

先生。 动作与描述
1 破坏

此操作完全破坏了元素的手风琴功能。元素返回到其初始化前的状态。

Action - destroy

This action destroys the accordion functionality of an element completely. The elements return to their pre-init state.

Syntax

$(".selector").accordion("destroy");
2 禁用

此操作禁用所有菜单。不会考虑任何点击。此方法不接受任何参数。

Action - disable

This action disable all menus. No click will be taken into account. This method does not accept any arguments.

Syntax

$(".selector").accordion("disable");
3 使能够

此操作将重新激活所有菜单。再次考虑点击次数。此方法不接受任何参数。

Action - enable

This action reactivate all menus. The clicks are again considered. This method does not accept any arguments.

Syntax

$(".selector").accordion("enable");
4 选项（选项名称）

此操作获取当前与指定optionName关联的折叠元素的值。这需要一个字符串值作为参数。

Action - option( optionName )

This action gets the value of currently associated accordion element with the specified optionName. This takes a String value as argument.

Syntax

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
5 选项

此操作获取一个对象，其中包含表示当前折叠选项哈希的键/值对。

Action - option

This action gets an object containing key/value pairs representing the current accordion options hash.

Syntax

var options = $( ".selector" ).accordion( "option" );
6 选项（选项名称，值）

此操作设置与指定 optionName 关联的折叠选项的值。

Action - option( optionName, value )

This action sets the value of the accordion option associated with the specified optionName.

Syntax

$( ".selector" ).accordion( "option", "disabled", true );
7 选项（选项）

此操作为手风琴设置一个或多个选项。

Action - option( options )

This action sets one or more options for the accordion. Where options is a map of option-value pairs to set.

Syntax

$( ".selector" ).accordion( "option", { disabled: true } );
8 刷新

此操作处理直接在 DOM 中添加或删除的任何标题和面板。然后它重新计算折叠面板的高度。结果取决于内容和 heightStyle 选项。此方法不接受任何参数。

Action - refresh

This action processes any headers and panels that were added or removed directly in the DOM. It then recomputes the height of the accordion panels. Results depend on the content and the heightStyle option. This method does not accept any arguments.

Syntax

$(".selector").accordion("refresh");
9 小部件

此操作返回手风琴小部件元素；用ui-accordion类名注释的一个。

Action - widget

This action returns the accordion widget element; the one annotated with the ui-accordion class name.

Syntax

var widget = $( ".selector" ).accordion( "widget" );

例子

现在让我们看一个使用上表中的操作的示例。以下示例演示了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 激活（事件，用户界面）

当菜单被激活时会触发该事件。该事件仅在面板激活时触发，在创建手风琴小部件时不会为初始面板触发该事件。

Event - activate(event, ui)

This event is triggered when a menu is activated. This event is only fired on panel activation, it is not fired for the initial panel when the accordion widget is created. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • newHeader − A jQuery object representing the header that was just activated.

  • oldHeader − A jQuery object representing the header that was just deactivated.

  • newPanel − A jQuery object representing the panel that was just activated.

  • oldPanel − A jQuery object representing the panel that was just deactivated.

Syntax

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});
2 beforeActivate（事件，用户界面）

该事件在面板激活之前触发。可以取消此事件以防止面板激活。

Event - beforeActivate(event, ui)

This event is triggered before a panel is activated. This event can be canceled to prevent the panel from activating. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • newHeader − A jQuery object representing the header that is about to be activated.

  • oldHeader − A jQuery object representing the header that is about to be deactivated.

  • newPanel − A jQuery object representing the panel that is about to be activated.

  • oldPanel − A jQuery object representing the panel that is about to be deactivated.

Syntax

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});
3 创建（事件，用户界面）

创建手风琴时会触发此事件。

Event - create(event, ui)

This event is triggered when the accordion is created. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • header − A jQuery object representing the active header.

  • panel − A jQuery object representing the active panel.

Syntax

$( ".selector" ).accordion({
   create: function( 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 的标准浏览器中打开它，您还必须看到以下输出 -

在这里，我们根据事件在底部显示文本。