2

jQuery UI タブを使用し、AJAX 呼び出しによってタブ コンテンツをロードするとします。

<div id="tabbed-menu">
    <ul>
        <li><a href="url1">LINK1</a></li>
        <li><a href="url2">LINK2</a></li>
        <li><a href="url3">LINK3</a></li>
    </ul>
</div>

次の Javascript コードを使用します。

$(function() {
  $("#tabbed-menu").tabs();
});

これで、document.readyでタブ付きメニューが作成され、最初のタブのコンテンツがサーバー リクエストによって読み込まれます。

この追加の不要なサーバー要求を置き換えたいとします。たとえば、最初のタブのコンテンツ全体を含むページを読み込むことができます。

この問題を解決するにはどうすればよいですか?

4

2 に答える 2

3

href最初のタブの属性で、URL の代わりに ID セレクターを指定できます。例えば：

<div id="tabbed-menu">
    <ul>
        <li><a href="#content1">LINK1</a></li>
        <li><a href="url2">LINK2</a></li>
        <li><a href="url3">LINK3</a></li>
    </ul>
    <div id="content1">
        Content of first tab.
    </div>
</div>

さらに、最初のタブを 2 回目にリロードしたい場合は、次のことができます: 1) 新しいコンテンツの URL をアンカーに追加します。

<a href="#content1" data-url="url1">LINK1</a>

2) tabbselect イベントをバインドして、静的コンテンツの読み込みをインターセプトし、コンテンツのリロードに置き換えます。例:

$("#private-area-menu").bind("tabsselect", function(event, ui) {
      if(ui.index==0){
          $('#tab-content').html(''); // required to clear the previous static data
          $('#tab-content').load($(ui.tab).attr('data-url')); // refresh data              
      }
});
于 2012-08-27T13:14:37.700 に答える
0

次のように、タブの読み込み時にコールバック関数をオーバーラップしてみることができます。

$('#example').tabs({
        load: function(event, ui) {
            $(ui.panel).delegate('a', 'click', function(event) {
                $(ui.panel).load(this.href);
                event.preventDefault();
            });
        }
});

またはタブで次のように選択します。

$('#example').tabs({
    select: function(event, ui) {
        var isValid = ... // form validation returning true or false
        return isValid;
    }
});

このスニペットはhttp://docs.jquery.com/UI/API/1.8/Tabsから取得したもので、読むことをお勧めします。

于 2012-08-27T14:10:59.857 に答える