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

Question

是否可以在打开选项卡时加载 Spry 选项卡的内容，而不是在开始时加载所有选项卡的所有内容？

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

Answer 1

一种足够简单的方法是使用空内容启动所有选项卡，除了与页面一起加载的选项卡。

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

<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，这当然会使用查询字符串返回相关信息。