вкладки jQuery - получение нового выбранного индекса
-
06-07-2019 - |
Вопрос
Ранее я использовал расширение jquery-ui
для загрузки страницы. фрагменты через ajax
, а также для скрытия или раскрытия скрытых div
на странице. Оба эти метода хорошо документированы, и у меня там не было проблем.
Теперь, однако, я хочу сделать что-то другое с вкладками. Когда пользователь выбирает вкладку, он должен полностью перезагрузить страницу - причина в том, что содержимое каждого раздела с вкладками довольно дорогое, поэтому я не хочу просто отправлять их все сразу и использовать обычный метод переключить отображение: нет, чтобы показать их.
Мой план состоит в том, чтобы перехватить событие select
на вкладках и заставить эту функцию перезагрузить страницу, управляя document.location.
Как в обработчике select
я могу получить недавно выбранный индекс вкладки и HTML-объект LI, которому он соответствует?
$('#edit_tabs').tabs( {
selected: 2, // which tab to start on when page loads
select: function(e, ui) {
var t = $(e.target);
// alert("data is " + t.data('load.tabs')); // undef
// alert("data is " + ui.data('load.tabs')); // undef
// This gives a numeric index...
alert( "selected is " + t.data('selected.tabs') )
// ... but it's the index of the PREVIOUSLY selected tab, not the
// one the user is now choosing.
return true;
// eventual goal is:
// ... document.location= extract-url-from(something); return false;
}
});
Есть ли атрибут события или объекта пользовательского интерфейса, который я могу прочитать, который даст индекс, идентификатор или объект недавно выбранной вкладки или тег привязки внутри нее? Р>
Или есть ли лучший способ использовать вкладки для перезагрузки всей страницы?
Решение
Я бы взглянул на события для вкладок. Следующее взято из документов JQuery:
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
ui.options // options used to intialize this widget
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the contents of the selected (clicked) tab
ui.index // zero-based index of the selected (clicked) tab
});
Похоже, ui.tab - это путь.
Другие советы
в jQuery UI - v1.9.2
ui.newTab.index()
чтобы получить базовый 0 индекс активной вкладки
select: function(e, ui){var index=ui.index;}
хорошо работает для меня. см .: http://api.jqueryui.com/tabs/#events
спасибо, jobscry - указанный вами ui.tab дал мне тег привязки, по которому я щелкнул, из которого я могу извлечь его класс, id, href и т. д. Я решил использовать id для кодирования моего URL. Мой последний вызов tabs () выглядит следующим образом:
$(document).ready(function() {
$('#edit_tabs').tabs( {
selected: [% page.selected_tab ? page.selected_tab : 0 %],
select: function(e, ui) {
// ui.tab is an 'a' object
// it has an id of "link_foo_bar"
// transform it into http://....something&cmd=foo-bar
var url = idToTabURL(ui.tab.id);
document.location = url;
return false;
}
}).show();
});
Или другой вариант, который я использовал для своего сайта, это. Это базовая система навигации по вкладкам UL / Div. Ключ к открытию правильной вкладки после нажатия на ссылку на другую страницу с прикрепленной хэш-меткой заключается в простой фильтрации вашего UL для #example, соответствующего тому, что передается через браузер. Это так.
Вот пример HTML:
<div id="tabNav">
<ul class="tabs">
<li><a href="#message">Send a message</a></li>
<li><a href="#shareFile">Share a file</a></li>
<li><a href="#arrange">Arrange a meetup</a></li>
</ul>
</div>
<div id="tabCont">
<div id="message">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="shareFile">
<p>Sed do eiusmod tempor incididunt.</p>
</div>
<div id="arrange">
<p>Ut enim ad minim veniam</p>
</div>
</div>
И Jquery, чтобы это произошло:
$(document).ready(function() {
$(function () {
var tabs = [];
var tabContainers = [];
$('ul.tabs a').each(function () {
// note that this only compares the pathname, not the entire url
// which actually may be required for a more terse solution.
if (this.pathname == window.location.pathname) {
tabs.push(this);
tabContainers.push($(this.hash).get(0));
}
});
$(tabs).click(function () {
// hide all tabs
$(tabContainers).hide().filter(this.hash).show();
// set up the selected class
$(tabs).removeClass('active');
$(this).addClass('active');
return false;
});
$(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
});
});
Это должно позаботиться об этом за вас. Я знаю, что это не самый чистый код, но он вас там найдет.
в моей реализации это работает так:
$(document).ready(function() {
$('#edit_tabs').tabs( {
selected: [% page.selected_tab ? page.selected_tab : 0 %],
select: function(e, ui) {
// ui.tab is an 'a' object
var url = ui.tab.href;
document.location = url;
return false;
}
}).show();
});
Я нашел два способа выполнить это требование, так как мне сложно разместить код здесь, вы можете посмотреть его на http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html а> р>
Надеюсь, это поможет кому-то ..
Быстрый просмотр документации дает нам решение:
$('#edit_tabs').tabs({ selected: 2 });
Вышеуказанное утверждение активирует третью вкладку.