jQuery UI 选项卡 load() 方法(1)

📌 相关文章

📜 jQuery UI 选项卡 load() 方法(1)

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

jQuery UI 选项卡 load() 方法介绍

在使用 jQuery UI 创建选项卡控件时，我们可以使用 load() 方法动态加载选项卡内容，从而实现异步加载和动态更新。

基本语法

$(selector).tabs("load", index);

其中，selector 为选项卡容器的选择器，index 是要加载的选项卡索引，从 0 开始计数。

实例演示

下面是一个简单的示例，演示了如何使用 load() 方法加载选项卡内容。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs Load Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1 Content</p>
  </div>
  <div id="tabs-2">
    <p>Loading content for Tab 2...</p>
  </div>
  <div id="tabs-3">
    <p>Loading content for Tab 3...</p>
  </div>
</div>
 
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(document).ready(function() {
  $('#tabs').tabs({
    active: 0,
    beforeLoad: function(event, ui) {
      ui.panel.html('<p>Loading...</p>');
    }
  });
  $('#tabs').tabs('load', 1);
});
</script>
 
</body>
</html>

解析说明

上述示例首先创建了一个选项卡容器，并定义了三个选项卡项，分别是 "Tab 1"、"Tab 2" 和 "Tab 3"。

然后在 JavaScript 代码中，使用 tabs() 方法初始化了选项卡控件，并使用 load() 方法加载了第二个选项卡的内容。同时，使用 beforeLoad 回调函数在每次加载选项卡内容之前显示了 "Loading..." 文本。

最终的运行效果是，页面打开时展示 "Tab 1" 的内容，而 "Tab 2" 和 "Tab 3" 的内容分别被更改为 "Loading content for Tab 2..." 和 "Loading content for Tab 3..."，表示正在加载中。随后，程序会异步地加载 "Tab 2" 的内容，并将其更新到页面中。而 "Tab 3" 的内容则不会被加载，直到用户手动点击该选项卡。

总结

jQuery UI 的选项卡控件提供了丰富的 API，其中 load() 方法可以帮助我们实现异步加载和动态更新功能。使用时，我们需要通过 tabs() 方法初始化选项卡控件，并在需要动态加载的时候调用 load() 方法。同时，通过 beforeLoad 回调函数，我们可以在加载选项卡内容之前显示加载提示，增强用户体验。