Виджет jQuery UI Tabs

Некоторые моменты относительно jQuery UI Tabs widget.

У jQuery UI виджета Tabs имеются некоторые проблемы, видимо, с совместимостью разных версий. Дело в том, что в многочисленной найденной в сети устаревшей документации говорится об опции selected, но в той версии виджета, над которой я экспериментировал, её нет, и вместо неё используется опция active. Поэтому экспериментируйте с этими опциями т.к. в разных версиях виджета они меняются. В своих примерах я использовал стандартный идентификатор (id) tabs для блока с табами (вкладками), поэтому поменяйте у себя, если у вас он другой.

Как выбрать конкретный элемент во время его инициализации? Передаём в метод объект со свойством active со значением номером необходимой в вкладки:

$( "#tabs" ).tabs({ active: 2 }); // работает

В метод tabs можно передавать не только объекты, но и обычные значения в правильной последовательности, но только после того как объект вкладок будет создан.

Неправильно:

$("#tabs").tabs( "option", "active", 2 ); // не работает, Uncaught Error: cannot call methods on tabs prior to initialization; attempted to call method 'option'

Правильно:
Создаём вкладки, объект вкладок возвращаем в переменную. У объекта созданных вкладок вызываем метод tabs и передаём ему 3 параметра:

var oTabs = $('#tabs').tabs();
oTabs.tabs('option', 'active', 2);

Вообще, если надо по ходу работать с вкладками, то естественно объект вкладок нужно получить в переменную, чтобы потом к этому объекту обращаться:

var oTabs = $('#tabs').tabs();

Получить номер открытой вкладки:

oTabs.tabs('option', 'active');

Установить номер открытой вкладки:

oTabs.tabs('option', 'active', 2);

Теперь полные куски кода для установки и настройки вкладок.

Установка вкладок по-умолчанию.

$(function() {
  $( "#tabs" ).tabs();
});

Установка вкладок с выбором случайной активной вкладки. Из своей собственной библиотеки взял функцию getRandomInt, которая генерирует случайное число в заданном диапазоне.

$(function() {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  $( "#tabs" ).tabs({ active: getRandomInt(1, $('#tabs > div').length) });
});

Протестировать код выше можно, например, так. Выведем на консоль номер необходимой открытой вкладки:

$(function() {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  var nSelectedItem = getRandomInt(1, $('#tabs > div').length);
  console.log(nSelectedItem);
  $( "#tabs" ).tabs({ active: nSelectedItem });
});