JQuery UIタブでajaxを使用してドキュメントフラグメントをロード

JQuery UIタブを使用しており、生成されたページからフラグメントをロードしたいとします。ただし、ページ全体が読み込まれます。コードは次のとおりです。JQuery UIタブでajaxを使用してドキュメントフラグメントをロード

<head> 
<script src="/js/jquery-ui-1.8.15.custom.min.js"></script> 
<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
</script> 
</head> 


<div id="tabs"> 
<ul > 
    <li><a href="/page #content">Tab Head</a></li> 
</ul> 
</div>

これは簡単な方法ですか？また、.load（）または.get（）ajax呼び出しを使用するTabsプラグインですか？

出典

2011-09-16 kpentchev

良い質問：HTMLは次のようになります

$('#tabs').tabs({ select: function(event, ui) { var $tabAnchor = $(ui.tab); if (ui.index == 0 && !$tabAnchor.data('completed')) { $($tabAnchor.attr('href')).load($tabAnchor.data('content-url'), function() { // indicate the content has been loaded $tabAnchor.data('completed', true); }); } } });

：だから、それは次のようになります。 HREFのスペースを削除するとどうなりますか？ – Blazemonger

目的のタブを傍受してコンテンツを読み込むことで、自分で行う必要がある場合があります。たとえば、データ属性にフラグメントをロードする実際のURL、たとえばdata-content-url="/page #content"を含め、selectイベント。

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs1" data-content-url="/page #content">Tab Head</a></li> 
     <li><a href="#tabs2">Tab 2</a></li> 
    </ul> 

    <div id="tabs1"></div> 
    <div id="tabs2">...</div> 
</div>

出典

2011-09-18 01:11:46

ありがとう！まだこれを行うためのより一般的な方法があるべきだと思っています。 JQueryの.load仕様を見ると、実装するのは簡単です... – kpentchev

ロード済みのコンテンツを解析/準備/編集してページの断片を取得するために、ロードイベント（「このイベントはリモートタブのコンテンツが読み込まれた後にトリガーされます。」）を使用できます。

出典

2011-09-16 13:38:11 Christian

JQuery UIタブでajaxを使用してドキュメントフラグメントをロード

答えて

関連する問題