javascript - 使用 Spry 在打开的选项卡上加载内容

Question

是否可以在打开一个 Spry 标签时加载该标签的内容，而不是一开始就加载所有标签的所有内容？

我更愿意在不使用 iframe 的情况下完成此操作。

Answer 1

一种足够简单的方法是将所有选项卡从空内容开始，除了随页面加载的选项卡。

从我从一个简单的 View 源中看到的，它们具有这种结构。

<div class="TabbedPanels" id="tp1">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent"> Tab 1 Content </div>
    <div class="TabbedPanelsContent"> Tab 2 Content </div>
    <div class="TabbedPanelsContent">
      <p>Tab 3 Content </p>
      <p>More Content</p>
      <p>More Content</p>
    </div>
    <div class="TabbedPanelsContent"> Tab 4 Content</div>
  </div>
</div>

在#tp1.TabbedPanelsTab 上附加 onclick 事件监听器，并将其链接到 ajax 请求。当用户单击选项卡时，它将启动请求并填充表单。

添加一个引用从何处获取特定表单数据的 ID 可能会更容易。例如，第一个选项卡的 ID 可能是“salesRecords”。还假设您从 getContent.php 获取所有数据。现在当用户激活 onclick 事件时，您使用 ajax 请求从 url "getContent.php?id="+this.id 获取信息，这当然会使用查询字符串返回相关信息。