内容をタブに読み込み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から情報を取得します。これはもちろん、クエリ文字列を使用して情報を返します。