Вкладки пользовательского интерфейса jQuery: Попытка выбрать дочерний элемент «навигатора» вместо «содержимого» - PullRequest
Новая
       6

Вкладки пользовательского интерфейса jQuery: Попытка выбрать дочерний элемент «навигатора» вместо «содержимого»

0 голосов
/ 10 сентября 2011

Я исследовал это около 4 часов, но я прошу прощения, если я пропустил, где бы это ни спрашивали / отвечали раньше.

jsFiddle: http://jsfiddle.net/3Rx3j/3/

У меня есть коробка автоматически вращающихся вкладок. В блоке есть раздел навигатора и раздел контента. Список кнопок вкладок находится в разделе навигатора, а элементы div, на которые они ссылаются, находятся в разделе содержимого. Кнопки вкладок содержат переключатели, которые я хочу иметь возможность проверять, когда выбран соответствующий div содержимого. Следующие строки кода напрямую связаны с моей проблемой: 

//$(".ui-tabs-selected > .ui-tabs-nav-item").attr("checked", "checked");
$(ui.panel).children(".ui-tabs-nav-item").attr("checked", "checked");
alert($(ui.panel).attr("id"));

Комментируемая строка выше почти делает то, что я хочу. К сожалению, когда срабатывает событие «tabsselect», класс «.ui-tabs-selected» еще не переместился на фактическую выбранную вкладку, поэтому он всегда на шаг позади. Основываясь на исследовании, я попробовал 2-ю строку выше, которая возвращает идентификатор части содержимого вкладки в div в области содержимого.

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

Спасибо за чтение.

Brandon

Ответы [ 2 ]

0 голосов
/ 10 сентября 2011

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

$("#headlines").bind("tabsselect", function(event, ui) {
    var index = ui.index + 1;
    $('#radioNav' + index).attr('checked', true);

});

Обратный вызов включает в себя индекс текущей вкладки (на основе нуля), поэтому в вашем случае он будет либо 0, 1, 2 или 3. Доступ к нему осуществляется через ui.index.Просто объедините этот номер с 'radioNav' и установите его проверенное значение на true.Это автоматически устанавливает для других значение false, поскольку только один из них может быть выбран только один раз.

Демо: http://jsfiddle.net/3Rx3j/35/

Редактировать : Или лучше, выберитеn-й переключатель с указанным вами классом: 

$("#headlines").bind("tabsselect", function(event, ui) {
    $('.ui-tabs-nav-item:eq(' + ui.index + ')').attr('checked', true);
});

Демонстрация: http://jsfiddle.net/3Rx3j/36/

0 голосов
/ 10 сентября 2011

Это, кажется, работает хорошо: http://jsfiddle.net/3Rx3j/34/

Это задержка, потому что переключение класса задерживается 

setTimeout(function(){
     $(".ui-tabs-selected .ui-tabs-nav-item").attr("checked", "checked");
,500);

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

Если все, что вам нужно, это визуальный эффект, я бы посоветовал, может быть, базовое решение css, потому что предоставляется класс, который уникален при изменении вкладки. «.ui-tabs-selected», который является родителем радиовхода, который вы пытаетесь изменить.

...