26

以前、jquery-ui tabs拡張機能を使用して を介してページ フラグメントをロードしたり、ページ内の非表示のajaxを隠したり表示したりしdivました。これらの方法はどちらも十分に文書化されており、問題はありませんでした。

しかし今、私はタブで何か違うことをしたいと思っています。ユーザーがタブを選択すると、ページ全体がリロードされる必要があります。これは、タブ化された各セクションのコンテンツをレンダリングするのに多少コストがかかるためです。そのため、一度にすべてを送信して通常の方法を使用したくありませんそれらを表示するために「display:none」を切り替えます。

私の計画は、タブのイベントをインターセプトし、selectdocument.location を操作してその機能でページをリロードすることです。

selectハンドラーで、新しく選択されたタブ インデックスとそれに対応する html LI オブジェクトを取得するにはどうすればよいですか?

$('#edit_tabs').tabs(  {
        selected: 2,     // which tab to start on when page loads
        select: function(e, ui) {
            var t = $(e.target);
            // alert("data is " +  t.data('load.tabs'));  // undef
            // alert("data is " +  ui.data('load.tabs'));  // undef

            // This gives a numeric index...
            alert( "selected is " + t.data('selected.tabs') )
            // ... but it's the index of the PREVIOUSLY selected tab, not the
            // one the user is now choosing.  
            return true;

            // eventual goal is: 
            // ... document.location= extract-url-from(something); return false;
        }
});

新しく選択されたタブまたはその中のアンカータグのインデックス、ID、またはオブジェクトを与えることができるイベントまたは ui オブジェクトの属性はありますか?

または、タブを使用してページ全体をリロードするより良い方法はありますか?

4

8 に答える 8

37

タブのイベントを見てみましょう。以下はjQueryのドキュメントから抜粋したものです。

 $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     ui.options // options used to intialize this widget
     ui.tab // anchor element of the selected (clicked) tab
     ui.panel // element, that contains the contents of the selected (clicked) tab
     ui.index // zero-based index of the selected (clicked) tab
 });

ui.tabが行く方法のように見えます。

于 2008-10-08T22:56:52.710 に答える
7

jQuery UI - v1.9.2

ui.newTab.index()

アクティブなタブの基数 0 のインデックスを取得するには

于 2013-01-28T11:04:36.487 に答える
5 
select: function(e, ui){var index=ui.index;}

私にとってはうまくいきます。参照: http://api.jqueryui.com/tabs/#events

于 2010-08-25T08:32:10.047 に答える
0

ドキュメントをざっと見ると、解決策が得られます。

$('#edit_tabs').tabs({ selected: 2 });

上記のステートメントは、3番目のタブをアクティブにします。

于 2012-10-10T07:05:32.437 に答える
0

この要件を満たすための 2 つの方法を見つけました。ここにコードを記述するのは難しいため、http://ektaraval.blogspot.com/2011/09/calling-javascript-when-で確認できます。 jquery-ui-tab.html

それが誰かを助けることを願っています..

于 2011-09-09T20:41:21.743 に答える
0

ありがとう、jobscry - あなたが指摘した 'ui.tab' は、クリックされたアンカー タグを提供してくれました。そこから、そのクラス、id、href などを抽出できます... ID を使用して URL をエンコードすることにしました。私の最後の tab() 呼び出しは次のようになります。

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            // it has an id of "link_foo_bar"
            // transform it into http://....something&cmd=foo-bar
            var url = idToTabURL(ui.tab.id);

            document.location = url;
            return false;
        }
    }).show();
});
于 2008-10-08T23:29:32.537 に答える
0

または、私が自分のウェブサイトに使用した別のオプションはこれです。基本的な UL/Div タブ ナビゲーション システムです。ハッシュマークが添付された別のページへのリンクをクリックしたときに正しいタブを起動するための鍵は、ブラウザーを通過するものと一致する #example を UL でフィルター処理することです。そのようです。

HTML の例を次に示します。

    <div id="tabNav">

  <ul class="tabs">
    <li><a href="#message">Send a message</a></li>
    <li><a href="#shareFile">Share a file</a></li>
    <li><a href="#arrange">Arrange a meetup</a></li>
  </ul>
</div>

<div id="tabCont">

  <div id="message">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="shareFile">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="arrange">
    <p>Ut enim ad minim veniam</p>
  </div>

</div>

そしてそれを実現するためのJquery：

$(document).ready(function() {
$(function () {
    var tabs = [];
    var tabContainers = [];

    $('ul.tabs a').each(function () {
      // note that this only compares the pathname, not the entire url
      // which actually may be required for a more terse solution.
        if (this.pathname == window.location.pathname) {
            tabs.push(this);
            tabContainers.push($(this.hash).get(0));
        }
    });

    $(tabs).click(function () {
        // hide all tabs
        $(tabContainers).hide().filter(this.hash).show();


        // set up the selected class
        $(tabs).removeClass('active');
        $(this).addClass('active');

        return false;

});




 $(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();

  });

});

それはあなたのためにそれを処理する必要があります。私はこれが最もきれいなコードではないことを知っていますが、それはあなたをそこに連れて行きます.

于 2009-06-14T07:06:37.913 に答える
0

私の実装では、次のように機能します。

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            var url = ui.tab.href;

            document.location = url;
            return false;
        }
    }).show();
});
于 2008-10-09T10:25:46.970 に答える