📌  相关文章
📜  easyui 如何使面板可折叠 - Html (1)

📅  最后修改于: 2023-12-03 14:40:55.840000             🧑  作者: Mango

EasyUI 如何使面板可折叠

EasyUI 提供了折叠面板（Accordion）组件，可以让你的网页具有可折叠展开的功能。下面将介绍如何使用 EasyUI 的折叠面板功能。

1. 引入 EasyUI 库和样式文件

首先，在你的 HTML 文件中引入 EasyUI 库和样式文件：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/default/easyui.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui/dist/jquery.easyui.min.js"></script>
2. 创建折叠面板

然后，在 HTML 中创建一个 div 元素来作为折叠面板的容器：

<div id="accordion"></div>
3. 初始化折叠面板

在 JavaScript 中，使用 accordion 方法初始化折叠面板，并为每个面板设置标题和内容：

<script type="text/javascript">
  $(function() {
    $('#accordion').accordion({
      multiple: false, // 设置是否允许多个面板同时展开，默认为 true
      fit: true, // 设置折叠面板自适应容器大小，默认为 false
      onSelect: function(title) {
        // 面板展开时的回调函数
        console.log(title + '被选中了');
      },
      onUnselect: function(title) {
        // 面板折叠时的回调函数
        console.log(title + '被折叠了');
      }
    });

    // 添加多个面板
    $('#accordion').accordion('add', {
      title: '面板标题1',
      content: '面板内容1'
    });

    $('#accordion').accordion('add', {
      title: '面板标题2',
      content: '面板内容2'
    });
  });
</script>
4. 完整示例代码

下面是一个完整的示例代码，你可以直接复制到你的 HTML 文件中进行测试：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>EasyUI 折叠面板示例</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyui/dist/themes/default/easyui.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/easyui/dist/jquery.easyui.min.js"></script>
</head>
<body>
  <h2>折叠面板示例</h2>
  <div id="accordion"></div>
  <script type="text/javascript">
    $(function() {
      $('#accordion').accordion({
        multiple: false,
        fit: true,
        onSelect: function(title) {
          console.log(title + '被选中了');
        },
        onUnselect: function(title) {
          console.log(title + '被折叠了');
        }
      });

      $('#accordion').accordion('add', {
        title: '面板标题1',
        content: '面板内容1'
      });

      $('#accordion').accordion('add', {
        title: '面板标题2',
        content: '面板内容2'
      });
    });
  </script>
</body>
</html>
参考资料