登录
目录
当前位置： 首页 > 文档资料 > jQueryUI 入门教程 >

手风琴（Accordion）

优质
小牛编辑
136浏览
2023-12-01

jQueryUI中的Accordion Widget是一个基于jQuery的可扩展和可折叠内容持有者，它被分成几个部分，可能看起来像标签。 jQueryUI提供了accordion（）方法来实现这一点。

语法 (Syntax)

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

  • $（selector，context）.accordion（options）方法

  • $(selector, context).accordion ("action", params)方法

$（selector，context）.accordion（options）方法

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

语法 (Syntax)

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

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

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

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

Sr.No.选项和说明
1active

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

Option - active

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

这可以是 -

  • Boolean - 如果设置为false将折叠所有面板。 这要求可折叠选项为true 。

  • Integer - 活动（打开）面板的从零开始的索引。 负值选择从最后一个面板向后移动的面板。

Syntax

$( ".selector" ).accordion(
   { active: 2 }
);
2animate

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

Option - animate

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

这可以是 -

  • Boolean - 值false将禁用动画。

  • Number - 这是一个以毫秒为单位的持续时间

  • String - 默认持续时间使用的缓动名称。

  • Object - 具有缓动和持续时间属性的动画设置。

Syntax

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
3collapsible

此选项设置为true ，允许用户通过单击关闭菜单。 默认情况下，打开面板标题上的单击无效。 默认情况下，其值为false 。

Option - collapsible

此选项设置为true ，允许用户通过单击关闭菜单。 默认情况下，打开面板标题上的单击无效。 默认情况下，其值为false 。

Syntax

$( ".selector" ).accordion(
   { collapsible: true }
);
4disabled

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

Option - disabled

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

Syntax

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

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

Option - event

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

Syntax

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

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

Option - header

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

Syntax

$( ".selector" ).accordion(
   { header: "h3" }
);
7heightStyle

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

Option - heightStyle

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

可能的值是 -

  • auto - 所有面板将设置为最高面板的高度。

  • fill - 根据手风琴的父高度扩展到可用高度。

  • content - 每个面板仅与其内容一样高。

Syntax

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

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

Option - icons

此选项是一个对象，用于定义要在打开和关闭面板的标题文本左侧使用的图标。 用于关闭面板的图标被指定为名为header的属性，而用于打开面板的图标被指定为名为headerSelected的属性。 默认情况下，其值为{ "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()方法传递任何参数。

<!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的accordion小部件中collapsible的三个选项的用法。

<!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的标准浏览器中打开它，您还必须看到以下输出。

在这里，我们将折叠设置为true 。 单击手风琴标题，这样可以折叠活动部分。

使用heightStyle

以下示例演示了heightStyle的accordion小部件中三个选项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)方法可以对手风琴元素执行动作，例如选择/取消选择手风琴菜单。 该操作在第一个参数中指定为字符串（例如，“禁用”禁用所有菜单）。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No.行动和描述
1destroy

此动作完全破坏元素的手风琴功能。 元素返回到pre-init状态。

Action - destroy

此动作完全破坏元素的手风琴功能。 元素返回到pre-init状态。

Syntax

$(".selector").accordion("destroy");
2disable

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

Action - disable

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

Syntax

$(".selector").accordion("disable");
3enable

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

Action - enable

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

Syntax

$(".selector").accordion("enable");
4option( optionName )

此操作使用指定的optionName获取当前关联的accordion元素的值。 这将String值作为参数。

Action - option( optionName )

此操作使用指定的optionName获取当前关联的accordion元素的值。 这将String值作为参数。

Syntax

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

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

Action - option

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

Syntax

var options = $( ".selector" ).accordion( "option" );
6option( optionName, value )

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

Action - option( optionName, value )

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

Syntax

$( ".selector" ).accordion( "option", "disabled", true );
7option( options )

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

Action - option( options )

此操作为手风琴设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Syntax

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

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

Action - refresh

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

Syntax

$(".selector").accordion("refresh");
9widget

此操作返回accordion小部件元素; 用ui-accordion类名注释的那个。

Action - widget

此操作返回accordion小部件元素; 用ui-accordion类名注释的那个。

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了使用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的标准浏览器中打开它

在这里，我们演示了手风琴的启用和禁用。 选择相应的单选按钮以检查每个操作。

手风琴元素的活动管理

除了我们在前面部分中看到的accordion（options）方法之外，JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No.事件方法和描述
1activate(event, ui)

激活菜单时会触发此事件。 此事件仅在面板激活时触发，在创建折叠小部件时不会为初始面板触发。

Event - activate(event, ui)

激活菜单时会触发此事件。 此事件仅在面板激活时触发，在创建折叠小部件时不会为初始面板触发。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • newHeader - 表示刚刚激活的标头的jQuery对象。

  • oldHeader - 表示刚刚停用的标头的jQuery对象。

  • newPanel - 表示刚刚激活的面板的jQuery对象。

  • oldPanel - 表示刚刚停用的面板的jQuery对象。

Syntax

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});
2beforeActivate(event, ui)

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

Event - beforeActivate(event, ui)

在激活面板之前触发此事件。 可以取消此事件以防止面板激活。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • newHeader - 表示即将被激活的标头的jQuery对象。

  • oldHeader - 表示即将停用的标头的jQuery对象。

  • newPanel - 表示即将激活的面板的jQuery对象。

  • oldPanel - 表示即将停用的面板的jQuery对象。

Syntax

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});
3create(event, ui)

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

Event - create(event, ui)

创建手风琴时会触发此事件。 其中event是Event类型， ui是Object类型。 ui可能值是 -

  • header - 表示活动标头的jQuery对象。

  • panel - 表示活动面板的jQuery对象。

Syntax

$( ".selector" ).accordion({
   create: function( event, ui ) {}
});

例子 (Example)

以下示例演示了accordion小部件中的事件方法用法。 此示例演示了事件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的标准浏览器中打开它

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

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn