Борьба с JQuery UI вкладки - PullRequest
Новая
       26

Борьба с JQuery UI вкладки

0 голосов
/ 11 марта 2011

ОРИГИНАЛЬНЫЙ ВОПРОС:

Отлично работает следующее:

http://jsfiddle.net/oshirowanen/KYqyU/1/

т.е. если я нажимаю на вкладки, то нажимаю на вкладку 0, 1 или 2, он отобразит правильную вкладку в элементе управления вкладками jquery ui.

Однако я не хочу, чтобы вкладка 0 в раскрывающемся списке, я хочу, чтобы она использовалась в качестве основной кнопки для активации раскрывающегося списка, которыйзатем показывает вкладки 1 и 2, например:

http://jsfiddle.net/oshirowanen/KYqyU/3/

, но когда я делаю это, если я нажимаю на вкладку 0, она не работает должным образом.он должен отображать tab-0, когда вкладка 0 нажимается дважды.затем, когда я щелкаю его дважды, ничего не происходит, и кажется, что другие вкладки перестают работать.

Что я делаю не так?

РЕДАКТИРОВАТЬ 1:

Кажется, что переключается на вкладку 0, когда вкладка 0 нажимается 3 раза, но когда я это делаю, все остальные вкладки перестают работать

РЕДАКТИРОВАТЬ 2:

Я немного улучшил его, исправив проблему с именем класса, в jquery это был «item» вместо «items».Однако теперь, когда я нажимаю на вкладку 0 три раза, после этого просто требуется 1 щелчок, чтобы перейти на вкладку 0, она не должна переходить на вкладку 0, пока она не будет нажата дважды.

http://jsfiddle.net/oshirowanen/KYqyU/21/

РЕДАКТИРОВАТЬ 3:

Просто чтобы прояснить, не должно быть никакого переключения вкладок, если раскрывающийся список не активен.Когда раскрывающийся список активен, он должен переключиться на правильную вкладку в зависимости от того, какая из них нажата, а затем закрыть раскрывающийся список.

Ответы [ 2 ]

1 голос
/ 11 марта 2011

Вы не можете сделать это таким образом, потому что вы фильтруете каждый щелчок по Документу и после этого перенаправляете событие на эти элементы с определенными классами.Таким образом, вы не можете сказать вкладчику jQuery, что один элемент действует как вкладка, а как другая вещь

Я думаю, что лучший способ - это реструктурировать код и начать заново с другим подходом.

Это может быть сделано таким образом, но я думаю, что это как обман кода.

РЕДАКТИРОВАТЬ:

http://jsfiddle.net/KYqyU/56/

$(document).ready(function(){
$("#tabs").tabs();
$(".ui-tabs-nav").hide();

$("#tab0").click(function() {if($(this).hasClass("active"))$("#tabs").tabs( "select" , 0 );});
$("#tab1").click(function() {$("#tabs").tabs( "select" , 1 );});
$("#tab2").click(function() {$("#tabs").tabs( "select" , 2 );});

$(document).click(function(event) {
    $('.nav1.active, .nav2.active').trigger('click', true);
    $('.nav1, .nav2').removeClass("active");
});

$('.dropdown').each(function() {
    $(this).css('left', $(this).prev().position().left);
});

$('.nav1, .nav2').click(function(event, isTrigger) {
    $(this).siblings('.nav1.active, .nav2.active').trigger('click', true);

    if(!isTrigger && $(this).hasClass('active')){
        if ($(this).hasClass('nav1')) {
            /*alert("nav1 was clicked");*/
        }
        else if($(this).hasClass('nav2')) {
            /*alert("nav2 was clicked");*/
        }
    }

    $(this).toggleClass('active').next().toggle();
    event.stopPropagation();
});

$('.nav1, .nav2').disableSelection();

$('.items').click(function() {
    $(this).parent().toggle();
    $('.nav1.active, .nav2.active').removeClass('active');
});

});

0 голосов
/ 11 марта 2011

Попробуйте удалить id = "tab0" из div с помощью class = "nav1"

...