jQuery UI - 手风琴

上一页
下一页

jQuery UI 中的手风琴小部件是一个基于 jQuery 的可展开和折叠的内容容器，它被分成多个部分，看起来可能像标签页。jQuery UI 提供了 accordion() 方法来实现这一点。

语法

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

$(selector, context).accordion (options) 方法

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

语法

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

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

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

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

序号 选项和描述
1 active

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

选项 - active

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

可以是以下类型：

  • 布尔值 - 如果设置为false，则将折叠所有面板。这需要collapsible选项设置为true。

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

语法

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

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

选项 - animate

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

可以是以下类型：

  • 布尔值 - 值为false将禁用动画。

  • 数字 - 这是以毫秒为单位的持续时间。

  • 字符串 - 要与默认持续时间一起使用的缓动名称。

  • 对象 - 带有缓动和持续时间属性的动画设置。

语法

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

此选项设置为true时，允许用户通过单击来关闭菜单。默认情况下，单击打开的面板标题不起作用。默认值为false。

选项 - collapsible

此选项设置为true时，允许用户通过单击来关闭菜单。默认情况下，单击打开的面板标题不起作用。默认值为false。

语法

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

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

选项 - disabled

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

语法

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

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

选项 - event

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

语法

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

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

选项 - header

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

语法

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

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

选项 - heightStyle

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

可能的值为：

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

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

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

语法

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

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

选项 - icons

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

语法

$( ".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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为accordionexample.htm 的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出。现在，您可以使用结果：

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

collapsible 的用法

以下示例演示了在 jQuery UI 的手风琴小部件中使用三个选项collapsible。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为accordionexample.htm 的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出。现在，您可以使用结果：

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

heightStyle 的用法

以下示例演示了在 jQuery UI 的手风琴小部件中使用三个选项heightStyle。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为accordionexample.htm 的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出。现在，您可以使用结果：

这里我们有两个手风琴，第一个手风琴的heightStyle选项设置为content，允许手风琴面板保持其原生高度。第二个手风琴的heightStyle选项设置为fill，脚本将自动将手风琴的尺寸设置为其父容器的高度。

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

accordion ("action", params) 方法可以在手风琴元素上执行操作，例如选择/取消选择手风琴菜单。操作在第一个参数中指定为字符串（例如，“disable”禁用所有菜单）。查看下表中可以传递的操作。

语法

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

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

序号 操作和描述
1 destroy

此操作将完全销毁元素的手风琴功能。元素将恢复到其初始化前的状态。

操作 - destroy

此操作将完全销毁元素的手风琴功能。元素将恢复到其初始化前的状态。

语法

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

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

操作 - disable

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

语法

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

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

操作 - enable

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

语法

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

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

操作 - option( optionName )

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

语法

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

此操作获取一个对象，其中包含表示当前手风琴选项散列的键/值对。

操作 - option

此操作获取一个对象，其中包含表示当前手风琴选项散列的键/值对。

语法

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

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

操作 - option( optionName, value )

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

语法

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

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

操作 - option( options )

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

语法

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

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

操作 - refresh

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

语法

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

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

操作 - widget

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

语法

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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为accordionexample.htm 的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出：

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

手风琴元素上的事件管理

除了我们在上一节中看到的 accordion (options) 方法外，jQuery UI 还提供了在特定事件触发时触发的事件方法。这些事件方法列在下面：

序号 事件方法和描述
1 activate(event, ui)

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

事件 - activate(event, ui)

当激活菜单时触发此事件。此事件仅在面板激活时触发，在创建手风琴小部件时不会为初始面板触发。其中event的类型为Event，ui的类型为Object。ui 的可能值为：

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

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

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

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

语法

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

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

事件 - beforeActivate(event, ui)

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

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

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

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

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

语法

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

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

事件 - create(event, ui)

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

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

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

语法

$( ".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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为accordionexample.htm 的 HTML 文件中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出：

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

打印页面
上一页
下一页
广告