Вкладка обнаружение выбирается в разделе jQueryUI


Я пытаюсь определить, когда новая вкладка на моем компоненте jQueryUI tab нажата. Я следовал нескольким руководствам и блогам, но не могу полностью сосредоточиться на этом процессе. У меня есть следующее:

$('#tabs').tabs({
  select: function(event,ui) {
  alert('selected');
  return false;
  },                
}); 
Я не знаю, чего мне не хватает, но сигнал тревоги никогда не срабатывает. Я не силен в jQuery, поэтому, вероятно, совершаю глупую ошибку,поэтому любая помощь будет оценена.

Спасибо, Крис

Обновление: пример jsfiddle http://jsfiddle.net/T7czp/16/

5 2

5 ответов:

Вы получаете какие-либо ошибки? Трейлинг , после вашего select сломает скрипт в некоторых браузерах.

Это работает так, как показано в этой скрипке: http://jsfiddle.net/T7czp/15/

$('#tabs').tabs({
  select: function(event,ui) {
     alert('selected: '+ui.index);
  }
});

Использование последней версии

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.index);
  }
});

Вам нужно привязать событие к вкладке.

$("#tabs").bind("tabsselect", function(e, tab) {
  alert("The tab at index " + tab.index + " was selected");
});

@Kristofer

Ваш код верен.

Единственное, что вы должны удалить, чтобы вкладка была выбрана, - это строка:

return false;

Потому что в соответствии с вкладками компонентной документации :

Обратите внимание, что если обработчик события tabsselect возвращает false, то выбранная вкладка не будет выбрана (полезно, например, если переход на следующую вкладку требует проверки формы).

(событие" tabselect "соответствует событию" select" обработчик)

Пользовательский интерфейс Jquery, похоже, немного изменился с момента последнего принятого ответа.

Параметр пользовательского интерфейса, определенный в функции активации teh, теперь является объектом, который выглядит следующим образом:

Объект { oldTab={...}, oldPanel={...}, с newtab={...}, больше...}

Индексный метод находится внутри каждого из них. Таким образом, обновленный метод доступа:

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.newTab.index());
  }
});