如何使用 jQuery UI 启用手风琴折叠面板?

htmlhtml5jquery更新于 2024/11/24 20:28:17

手风琴折叠面板是一个可折叠的 UI 组件，用于提升网页的视觉吸引力。手风琴折叠面板包含多个部分和子部分，这些子部分代表可折叠的部分。每个元素都有一个标题，点击后会显示另一个部分，其中包含有关该标题的更多详细信息。

同时只允许一次打开一个标题。

一些用于启用手风琴面板的实用方法

Destroy: 用于销毁手风琴面板。

Disable: 用于禁用手风琴面板。

Enable: 用于启用手风琴面板。

以下示例中使用的一些实用事件

Activate: 在手风琴面板激活后触发。此函数接收两个参数:UI 和 Event。
BeforeActivate: 在手风琴面板激活前触发。此函数接收两个参数:UI 和 Event。
Create: 创建手风琴面板后触发。此函数也接收两个参数:UI 和 Event

方法 1:使用 .accordion() 方法

在此方法中，我们将在父容器元素上使用此方法来创建 Accordion。jQuery UI 提供了一个内置的 Accordion 小部件，可用于在 jQuery 中创建 Accordion 组件。

算法

步骤 1:创建一个包含容器和标题的基本 HTML 文件。使用 <div> 并指定容器的 id。使用 header 标签和 <P> 标签创建标题并编写相关文本。

步骤 2:在 HTML 文档的 head 部分添加所需的 jQuery 导入。

步骤 3:通过选择 <script> 中的父 div 元素来调用 .accordion() 方法。标签。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery UI Accordion</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

    <script>
      $( function() {
        $( "#accordion" ).accordion();
      });
    </script>
   
</head>
<body>
  <h2>Tutorials Point Accordion</h2>
  <div id="accordion">
    <h3>Programming Languages</h3>
    <div>
      <p>C</p>
      <p>Python</p>
      <p>Frontend</p>
      <p>C++</p>
    </div>
    <h3>Fruits</h3>
    <div>
      <p>Apple</p>
      <p>Banana</p>
      <p>Mango</p>
    </div>
    <h3>Vehicles</h3>
    <div>
      <p>Car</p>
      <p>Bike</p>
      <p>Truck</p>
    </div>
  </div>

</body>
</html>

使用 .accordion() 方法创建了基本的手风琴折叠面板，点击后会自动关闭第一个标题的内容。

方法 2:使用 ready() 函数

另一种方法是使用 .accordion() 方法和 ready() 函数。JavaScript 中的 ready() 函数用于在 DOM 完全渲染后执行特定程序。

.accordion() 方法中传递了一些可选参数，它们是:

Active: 此可选参数将活动/打开的手风琴折叠面板设置为给定的索引号。默认值为 0，即第一个索引号。您也可以将其设置为 false，以将手风琴折叠面板设置为关闭状态。

Animate: 此可选参数设置手风琴折叠面板打开/关闭时的动画效果，它获取数字/布尔值。数字定义持续时间(以毫秒为单位)，布尔值 false 将禁用所有类型的动画。

算法

步骤 1:创建 HTML 文件，在元素内创建标题和文本，并在 <head> 标签内导入所需的 jQuery UI 脚本。

步骤 2:在脚本标签内使用 .accordion() 方法以及 ready() 函数启用手风琴折叠面板。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery UI Accordion</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

    <script>
      $(document).ready(function() {
        $('#accordion').accordion({
          active: 1,
          animate: 200
        });
      });

    </script>

</head>
<body style="text-align: center;">

<h1>Tutorials Point Accordion</h1>
<h2>Javascript Web Development</h2>
  <div id="accordion">
   
    <h4>Frontend</h4>
    <div>
      <p>ReactJS</p>
      <p>NextJS</p>
      <p>Angular JS</p>
    </div>
   
    <h4>Backend</h4>
    <div>
        <p>Node.js </p>
        <p>Express.js</p>
    </div>

    <h4>Mobile Development</h4>
    <p>React Native</p>

  </div>

</body>
</html>

方法 3:使用 data-accordion 属性

另一种使用 jQuery UI 启用手风琴折叠面板的方法是结合使用 data-accordion 属性以及 .ready() 函数和 .accordion() 方法。在本例中，我们传入了 heightStyle 参数，用于设置手风琴折叠面板和每个面板的高度。该参数接受字符串值，例如"auto"、"fill"和"content"。默认值为"auto"。

算法

步骤 1:创建一个 div 元素并指定一个合适的 id 名称。同时使用 <header> 标签创建手风琴折叠面板的标题部分，并使用 data-accordion 属性，该属性的默认"active"状态为 false。

步骤 2:现在在 <script> 标签内添加 accordion() 方法以及 ready() 函数。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery UI Accordion</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

    <script>
      $(document).ready(function() {
        $('#accordion').accordion({
          header: "> h3",
          heightStyle: "content",
        });
      });
    </script>

</head>
<body style="text-align: center;">
  <h1>Tutorials Point Accordion</h1>
  <h2>Programming Languages</h2>

  <div id="accordion" style="text-align: center;">
   
    <h3 data-accordion="{'active': false}">OOPS</h3>
    <div>
      <p data-accordion="{'heightStyle': 'content'}">Java</p>
      <p data-accordion="{'heightStyle': 'content'}">Python</p>
      <p data-accordion="{'heightStyle': 'content'}">C++</p>
    </div>

    <h3 data-accordion="{'active': false}">Game Development</h3>
    <div>
      <p data-accordion="{'heightStyle': 'content'}">Java</p>
      <p data-accordion="{'heightStyle': 'content'}">C#</p>
    </div>

    <h3 data-accordion="{'active': false}">Mobile Development</h3>
    <div>
      <p data-accordion="{'heightStyle': 'content'}">Objective C</p>
      <p data-accordion="{'heightStyle': 'content'}">Kotlin</p>
      <p data-accordion="{'heightStyle': 'content'}">React Native</p>

    </div>
  </div>

</body>
</html>