📌  相关文章
📜  jQWidgets jqxTabs 折叠事件(1)

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

jQWidgets jqxTabs 折叠事件

简介

jQWidgets jqxTabs 是一个基于 jQuery 的 UI 库，用于创建多个选项卡和选项卡之间的内容切换，也支持选项卡的折叠。选项卡组件支持绑定事件响应函数，通过触发事件实现特定功能。本文将介绍 jQWidgets jqxTabs 的折叠事件。

折叠事件详解

选项卡折叠事件可以通过绑定 "selected" 事件实现。当某个选项卡被选中时，即触发该事件。

语法
$(selector).on('selected', function (event) {
  // Do something
});
示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQWidgets jqxTabs 折叠事件示例</title>
  <!-- 引入 jQWidgets 样式表和脚本文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/styles/jqx.base.css">
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxcore.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxtabs.js"></script>
  <script>
  $(document).ready(function () {
    // 初始化 jqxTabs 组件
    $("#jqxTabs").jqxTabs({ height: '300px', collapsible: true });
    // 绑定 selected 事件
    $("#jqxTabs").on('selected', function (event) {
      var index = event.args.item; // 获取当前选中选项卡的索引
      console.log('Selected tab index:', index);
    });
  });
  </script>
</head>
<body>
  <div id="jqxTabs">
    <ul>
      <li>选项卡 1</li>
      <li>选项卡 2</li>
      <li>选项卡 3</li>
    </ul>
    <div>选项卡 1 的内容</div>
    <div>选项卡 2 的内容</div>
    <div>选项卡 3 的内容</div>
  </div>
</body>
</html>

以上示例中，我们首先初始化 jQWidgets jqxTabs 组件，并启用折叠功能。然后通过 on() 方法绑定了 "selected" 事件，该事件在选项卡被选中时触发，并将当前选中的选项卡索引输出到控制台。

参考资料