2

jQuery UIタブを設定していますが、別のページへのリンクで発生している問題は、ページのすべてのコンテンツがタブに読み込まれることです。これには、フッター、ヘッダー、およびタブに表示したくないその他のナビゲーションバーが含まれます。そのページから単一のIDのみをロードしたい場合はどうなりますか？

私のタブは次のように設定されています。

<div id="mytabs">
<ul>
 <li><a href="derpsite.com/awesomepage">Awesome page</a></li>
 <li><a href="derpsite.com/foo">Foo</a></li>
</ul>
</div>

jQueryでは何も起こっていません...

$(function() {
$( "#mytabs" ).tabs();
});

これが「awesomepage」（最初のリンクが対象とする）のhtmlであるとしましょう。

<html>
<head>
<title>awesome page</title>
</head>
<body>
<div id="header">bla</div>
<div id="awesomeness">awesomeness!</div>
<div id="footer">fdsfd</div>
</body>
</html>

...そして、タブをページからロードするだけです#awesomeness。どうすればこれを行うことができますか？HTMLに属性を追加することでそれを行ういくつかのガイドを読みましたdata-target="#youridhere"が、JavaScriptの実装方法についてはまだ混乱しています。すべてのページで同じIDをターゲットにするわけではないので、これは便利なソリューションのようです。javascriptを機能させる方法についての手がかりはありますか？

前もって感謝します！

4

2 に答える 2

2

応答の部分的なコードをロードできるようにする関数は、$。load（）関数です。残念ながら、tabs（）機能はこの関数を使用しませんが、代わりに$.ajaxを使用します。

このソリューションを試すことができます：

beforeLoadコールバックでデフォルトの処理を停止し、$。load（）メソッドを使用してajax呼び出しを管理することができます。

（1.9のドキュメントに基づいて、適応する必要があります）

$('#tabs').tabs({

// Callback run when selecting a tab
beforeLoad: function(event, ui) {

    // If the panel is already populated do nothing
    if (ui.panel.children().size() > 0)
        return false;

    // Make your own ajax load (with fragment feature)
    ui.panel.load(ui.tab.attr('href') + ' #yourFragment');

    // stop the default process (default ajax call should not be launched)
    return false;
});

注意：でURLを抽出するui.tab.attr('href')かどうかはわかりませんが、どのオブジェクトがui.tabであるかを確認してください。ただし、hrefパラメータを簡単に取得できるはずです。

幸運を

于 2012-12-14T05:24:02.517 に答える
0

data-target解決策を得ました:)回答の1つを参照ポイントとして使用して、タブは属性で指定された単一の要素をロードできるようになりました。変更されたバージョンは次のとおりです。

$(function() {
$('#tabs').tabs(
{
beforeLoad: function(event, ui) {
if (ui.panel.children().size() > 0)
    return false;
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));
return false;
}
});
});
于 2012-12-15T07:42:17.850 に答える