当前位置：文江博客话题详情

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

发布于 2024-07-24 16:46:09 字数 91 浏览 7 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我的影子我的梦 2024-07-31 16:46:09

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

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

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

A simple enough way would be to start all the tabs off with empty content, except the one that loads with the page.

From what I see from a simple view source they have this structure.

<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>

Attach onclick event listeners on #tp1.TabbedPanelsTab, and link it to an ajax request. When the user clicks the tab, it will start the request and populate the form.

It may be easier to add an ID that references where to get the data for that particular form. For example, tab one could have ID "salesRecords". Lets also say that you get all your data from getContent.php. Now when the user actives the onclick event, you use an ajax request to fetch the information from url "getContent.php?id="+this.id, which will of course use the query string to return the revelvant information.

回复收藏 0 原文

~没有更多了~