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 を追加する方が簡単な場合があります。たとえば、タブ 1 の ID は「salesRecords」です。また、getContent.php からすべてのデータを取得するとしましょう。ユーザーが onclick イベントをアクティブにすると、ajax リクエストを使用して url から情報を取得します"getContent.php?id="+this.id。これはもちろん、クエリ文字列を使用して適切な情報を返します。