jQuery UI 手风琴 Widget() 方法(1)

📌 相关文章

📜 jQuery UI 手风琴 Widget() 方法(1)

📅 最后修改于: 2023-12-03 15:16:45.851000 🧑 作者: Mango

jQuery UI 手风琴 Widget() 方法介绍

简介

jQuery UI 是一个基于 jQuery 的 UI 组件库，手风琴 Widget() 是其中一种组件，用于创建可折叠的手风琴效果。

使用方法

下面是一个简单的使用例子：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI 手风琴 Widget() 方法</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    .accordion {
      width: 500px;
      margin: 50px auto;
    }
  </style>
</head>
<body>
<div class="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Content for section 1.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Content for section 2.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Content for section 3.</p>
  </div>
</div>
<script>
  $(function() {
    $('.accordion').accordion();
  });
</script>
</body>
</html>

上面的代码中，我们首先引入了 jQuery 库和 jQuery UI 库，接着创建了一个 div 元素并为其添加 class 为 accordion，然后在 div 内部添加了三个折叠的区块，每个区块里都有一段示例内容。最后在 JavaScript 部分使用了 accordion() 方法来调用手风琴组件，让这些折叠区块变成手风琴样式。

参数

手风琴 Widget() 支持的参数如下：

active：指定默认打开哪个折叠区块，默认为 0。
animate：指定切换时是否使用动画效果，默认为 true。
collapsible：是否需要支持全部关闭，默认为 false。
disabled：禁用某个折叠区块，可以为一个布尔值或数组，如 $('.accordion').accordion({disabled: [1, 2]});。
event：指定触发展开/收缩的事件类型，默认为 click。
header：指定头部的选择器，默认为 "h3"。

事件

手风琴 Widget() 支持的事件如下：

activate：切换完成时触发。
beforeActivate：切换之前触发。

示例代码：

$('.accordion').accordion({
  activate: function( event, ui ) {
    console.log('展开的区块序号:' + ui.newHeader.index());
  }
});

总结

手风琴 Widget() 方法可以帮助我们快速创建一个可折叠的手风琴效果，使用起来非常方便实用，同时还支持多种参数和事件，可以满足不同场景的需求。