0

このフィドルをご覧ください: http://jsfiddle.net/9Kq66/

私が欲しいもの:ユーザーが表示しているときに、最初の 3 つのタブtab 1のtab 2いずれかtab 3がアクティブな場合、前のリンクは非表示になり、誰も戻ることができなくなり、最後の 3 つのタブtab 4のtab 5いずれかtab 6がアクティブな場合は、次のリンクが表示されます。誰も先に進めないように隠します。どうすればそれを手に入れることができますか？(可能であれば動的に)

私が使用しているJqueryコードは次のとおりです。

$(".wrapper #tab1,.wrapper #tab2").tabs({active: 0}).tabs({
        collapsible: false,
        hide: {
                effect: "slideUp",
                duration: 20
        },
        show: {
                effect: "slideDown",
                duration: 200
        }
});

var all = $('.wrapper .main').addClass("passiv");

var i = -1;

$('.wrapper .prev').click(function(e) {
        e.preventDefault();
        ctrlcontent( i = !i ? all.length - 1 : --i );
});
$('.wrapper .next').click(function(e) {
        e.preventDefault();
        ctrlcontent( i = ++i % all.length );
}).click();

function ctrlcontent(ele) {
        all.removeClass("active").addClass("passiv");
        all.eq(ele).removeClass("passiv").addClass("active");
}


$(function() {
        $( ".wrapper .inner" ).buttonset();
});

注意:私は Jquery Ui を初めて使用します。可能であれば詳細を回答してください。

ありがとうございました

4

2 に答える 2

1

実際には、既存のコードに 2 つの小さな変更を加えるだけで済みます。

  • まず、2 つの .click() ハンドラで「サイクル」機能を無効にします。
  • 2 番目 - ctrlcontent() 関数に条件を追加して、次/前のリンクを表示/非表示にします

クリック ハンドラーは次のようになります。

$('.wrapper .prev').click(function(e) {
    e.preventDefault();

    // Remove this line, since this causes the "cycle" effect
    // ctrlcontent( i = !i ? all.length - 1 : --i );

    // Use this logic:
    // When we are on first tab then do nothing, since there is no previous tab
    if (i == 0) {
        // Do not call ctrlcontent, since there is no previous tab
    } else {
        i -= 1;
        ctrlcontent(i);
    }
});

$('.wrapper .next').click(function(e) {
    e.preventDefault();

    // Also remove this line and add the condition below:
    //ctrlcontent( i = ++i % all.length );

    // When we are on the last tab then do nothing, since there is no next tab
    if (i == all.length-1) {
        // Do nothing, since there is no next tab
    } else {
        i += 1;
        ctrlcontent(i);
    }
}).click();

ctrlcontent 関数には、表示するリンクを決定するためのいくつかの条件が必要です。

function ctrlcontent(index_to_show) {
   all.removeClass("active").addClass("passiv");
   all.eq(index_to_show).removeClass("passiv").addClass("active");

    // now check if we need to show/hide the prev/next links
    if (index_to_show == 0) {
        // We are on first page, so hide the "prev"-link
        prev.hide();
    }

    if (index_to_show == all.length-1) {
        // We are on the last tab, so hide the "next"-link   
        next.hide();
    }

    if (index_to_show > 0) {
        // We are on a tab _after_ the first one, so there should be a "prev"-link
        prev.show();
    }

    if (index_to_show < all.length-1) {
        // We are a tab _before_ the last one, so we need the "next"-link
        next.show();
    }
}

注: 上記の例は最適化されていません。もっと短く書くことができます。

私からの別の発言:変数「i」の名前を「current_tab」などに変更する必要があります。これにより、コードが読みやすくなり、デバッグしやすくなります。

以下は、短いバージョンの同じコードです。

$(".wrapper #tab1,.wrapper #tab2").tabs({active: 0}).tabs({
        collapsible: false,
        hide: {
                effect: "slideUp",
                duration: 20
        },
        show: {
                effect: "slideDown",
                duration: 200
        }
});

var all = $('.wrapper .main').addClass("passiv");
var prev = $('.wrapper .prev');
var next = $('.wrapper .next');
var tab_count = all.length-1;
var i = -1; // I suggest to call this "current", etc. "i" is no good ides...

prev.click(function(e) {
    e.preventDefault();   

    if (i != 0) {
        i -= 1;
        ctrlcontent(i);
    }
});

next.click(function(e) {
    e.preventDefault();

    if (i < tab_count) {
        i += 1;
        ctrlcontent(i);
    }
}).trigger('click');

function ctrlcontent(index_to_show) {
   all.removeClass("active").addClass("passiv");
   all.eq(index_to_show).removeClass("passiv").addClass("active");

   if (index_to_show == 0) prev.hide();
   if (index_to_show == tab_count) next.hide();
   if (index_to_show > 0) prev.show();
   if (index_to_show < tab_count) next.show();
}


$(function() {
        $( ".wrapper .inner" ).buttonset();
});
于 2013-05-19T21:23:43.280 に答える
1

これがあなたができることです。jquery ui event を使用すると、現在のタブのインデックスを取得できます。

var activeIdx = 0; /* probably starting off at the zero index */

クリック イベントでタブがクリックされると、上記の activeIdx が設定されます。したがって、タブ自体の初期化に選択イベントを追加します。

beforeActivate: function(event, ui){
    activeIdx = ui.index
}

if(activeIdx <= 2){
  // hide ur prev button or create a disabled class.
} else {
  // hide ur next btn or add disabled class.
}

したがって、基本的には、他のイベントやアンカーに関係なく、タブの選択されたインデックスまたはアクティブなインデックスをチェックするだけであり、それ以下の場合は、最初のタブのセットにいることがわかります。わかる？

編集:タブを次のような変数に設定することもできます:

var _tabs = $(".wrapper #tab1,.wrapper #tab2").tabs(); // omit above hide/show for brevity.

次に、インデックスをそのまま取得します。

activeIdx = _tabs.tabs('option', 'selected');
于 2013-05-19T21:03:23.150 に答える