Вкладки пользовательского интерфейса JQuery: как изменить выбранную вкладку из обратного вызова, предоставленную для события «выбрать»?

Я использую вкладки пользовательского интерфейса JQuery и прикрепил функцию обратного вызова к событию выбора, и я хочу изменить выбранную вкладку из этой функции:

$('#tabs').tabs({
  select: funciton () {
    // here I have to change the tab, that have been just selected, to another one
  }
});

Например, у меня есть три формы, по одной на каждой вкладке. Пользователь должен заполнить их в правильном порядке, сначала, затем второй, а затем последний. Если пользователь заполняет первую форму, а затем нажимает на третью вкладку, я должен программно перенаправить его на вторую вкладку. Я достиг этой цели, визуально смоделировав выбор второй вкладки, но я думаю, что это не лучшее решение:

$('#tabs').tabs({
  select: funciton (event, ui) {
    if (ui.index > 2 && !$('#form2').valid()) {
      // here I have to change the tab, that have been just selected, to another one
      $('#tabs ul.ui-tabs-nav li').removeClass('ui-state-focus ui-tabs-selected ui-state-active');
      $('#tabs ul.ui-tabs-nav a[href="#tab2"]').parent('li').addClass('ui-state-focus ui-tabs-selected ui-state-active');
      $('#tabs div.ui-tabs-panel').addClass('ui-tabs-hide');
      $('#tabs div#tab2').removeClass('ui-tabs-hide');
    }
  }
});

jquery jquery-ui jquery-ui-tabs jquery-tabs
person Vitaliy Lebedev    schedule 21.08.2011    source источник
comment
О, забыл добавить: $('#tabs').tabs('select', 2); вызывает проблему «слишком много рекурсии»   -  person Vitaliy Lebedev    schedule 21.08.2011

Ответы (2)


arrow_upward
0
arrow_downward

Я согласен с PetersenDidIt, но, думаю, проще продемонстрировать это с помощью некоторого кода:

var $tabs = $('#tabs').tabs({ disabled: [1, 2] });

$('#buttonToEnableTab2').click(function() {
    $tabs.tabs({disabled: [2]});
});

$('#buttonToEnableAllTabs').click(function() {
    $tabs.tabs({disabled: false});
});

Пример: http://jsfiddle.net/william/ysjVU/2/

У вас также может быть какое-то событие, чтобы снова отключить вкладку.

person William Niu    schedule 22.08.2011
comment
Это очень хорошее решение, спасибо, ребята. Сейчас мне это не поможет, но в следующий раз я учту эту возможность при проектировании процесса заполнения формы в несколько шагов. - person Vitaliy Lebedev; 25.08.2011

arrow_upward
0
arrow_downward

Почему бы вам просто не отключить другие вкладки, пока они не закончат форму.

Сначала отключите все, кроме вкладки 1. Затем, как только они закончат форму на вкладке 1, включите вторую вкладку и выберите ее для них. Затем просто повторите это для каждой из вкладок.

person PetersenDidIt    schedule 21.08.2011
comment
Это хорошая идея, но проблема в том, что у меня есть форма на второй вкладке, которую нужно заполнить несколько раз и отправить на сервер через ajax. т.е. Я не могу предположить, хочет ли пользователь заполнить форму в другой раз или перейти на следующую вкладку - person Vitaliy Lebedev; 21.08.2011
comment
@ Виталий, так что не выбирайте для них вкладку автоматически, просто включите ее. - person PetersenDidIt; 22.08.2011