В чем разница между .select, .show и .load на вкладках jquery-ui? - PullRequest
Новая
       6

В чем разница между .select, .show и .load на вкладках jquery-ui?

0 голосов
/ 20 мая 2011

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

Я должен что-то здесь упустить.Кто-то может уточнить?

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

Мне пришлось сгенерироватьдинамические вкладки на основе данных, возвращаемых при вызове 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('#', '')));

Ответы [ 2 ]

2 голосов
/ 20 мая 2011

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

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

show срабатывает после отображается вкладка

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

0 голосов
/ 27 июня 2018

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

По сути, функциональность для "show" теперь предоставляется посредством "activ", а "select" выполняется с помощью«beforeActivate», пока «load» остается прежней.

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

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

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