Блог

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

Должно быть, я чего-то здесь не понимаю. Кто-нибудь может уточнить?

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

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

Генерировать вкладки из возвращенных данных было легко, но я не мог понять, как записать связанные данные. Наконец (и я должен был начать здесь), я посмотрел, что сгенерированный dom и заметил, что динамически создаваемая вкладка также создает div. Возможно, это очевидно для некоторых (это было не для меня), и если это было в документации, я пропустил это. В любом случае, этот код будет генерировать вкладки из массива, а затем добавлять html к соответствующему div при нажатии на вкладку. Мне не нужны все переменные, но я подумал, что это могло бы сделать его более читаемым. Выставьте функцию на показ перед добавлением вкладок, иначе она не будет работать!

 var _sessionDates = getSessionDates(sessionData.Sessions);
var $tabs = $("#sub-tabs");
$tabs.tabs({
    show: function(event, ui) { 
        var selected = $tabs.tabs('option', 'selected');
        var _sessionDates = getSessionDates(sessionData.Sessions);
        var grid = buildGrid(_sessionDates[selected]);
        $('#'   _sessionDates[selected]).html(grid);
    }
});

$(_sessionDates).each(function(i, dayOfShow) {
    var d = dateFormat(dayOfShow, "mediumDate");
    $tabs.tabs('add', '#'   dayOfShow, d);
});
  

Наконец, мне нужно «прокрутить» мои данные, отображаемые на вкладке, и я смог сделать это с помощью этих двух строк. Первая строка дает мне идентификатор элемента div, соответствующего выбранной вкладке (что действительно является важной частью), а вторая строка просто вызывает мой метод и передает идентификатор div за вычетом ‘#’. Моя дата — это также мой идентификатор. Есть глобальная переменная, которую я изменил за пределами этого, что заставляет его работать. Я знаю, что это плохо, и я удалю это, когда проведу рефакторинг.

 var $el = $($('#sub-tabs a')[$('#sub-tabs').tabs('option', 'selected')]).attr('href');
$($el).html(buildGrid($el.replace('#', '')));
  

select запускается при нажатии на вкладку, но до того, как вкладка была показана

load запускается после загрузки содержимого удаленной вкладки (т. Е. вкладки, содержимое которой не является частью начальной полезной нагрузки страницы, но загружается с помощью вызова ajax, когда пользователь нажимает на соответствующую вкладку)

show запускается после отображения вкладки

Документация jQuery делает это относительно понятным, но мне пришлось поэкспериментировать, чтобы полностью понять разницу между select и show .

Это стало более понятным с тех пор, как был задан первоначальный вопрос, так что теперь верно следующее:

Фактически, функциональность для «show» теперь обеспечивается с помощью «activate», а «select» выполняется с помощью «beforeActivate», в то время как «load» остается тем же.

• активировать: (ранее показывать) Запускается после активации вкладки (после завершения анимации)
• beforeActivate: (предварительно выбранный) Запускается непосредственно перед активацией вкладки.
• загрузка: запускается после загрузки удаленной вкладки.

Также предоставляются:

• beforeLoad: запускается, когда удаленная вкладка вот-вот будет загружена, после события beforeActivate.
• создать: запускается при создании вкладок.