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

Is it possible to load the content of a Spry tab when the tab is opened, rather than load all the content of all the tabs in the beginning?

打开选项卡时是否可以加载Spry选项卡的内容,而不是在开头加载所有选项卡的所有内容?

I would prefer accomplishing this without the use of an iframe.

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

1 个解决方案

#1

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.

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

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.

添加引用该特定表单的数据的位置的ID可能更容易。例如,选项卡一可以具有ID“salesRecords”。让我们说你从getContent.php获得所有数据。现在,当用户激活onclick事件时,您使用ajax请求从url“getContent.php?id =”+ this.id获取信息,这当然会使用查询字符串来返回revelvant信息。

#1