В настоящее время я занимаюсь заменой вкладок, предоставляемых библиотекой тегов Struts 1, вкладками, предоставляемыми пользовательским интерфейсом jQuery. . Мне удалось интегрировать вкладки с существующим приложением, но я изо всех сил пытаюсь установить выбранную вкладку, используя параметр входящего URL-адреса, то есть myurl.com/action.do?selectedTab=SecondTab.
Я новичок в JavaScript и jQuery; какие подсказки с чего начать?
Использование http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2:
$(document).ready(function(){
var param = $(document).getUrlParam('selectedTab');
$('#menu').tabs('select', param);
});
Из документации:
#select
Подпись:
.tabs( 'select' , [index] )
Выберите вкладку, как если бы она была нажата. Второй аргумент — это отсчитываемый от нуля индекс выбираемой вкладки или селектор идентификатора панели, с которой связана вкладка (идентификатор фрагмента href вкладки, например, хэш, указывает на идентификатор панели).
Jquery-UI дает вам это (почти) бесплатно: используйте внутренние ссылки. И это лучше, чем использовать уродливые параметры получения.
Передача http://my.site.org/mypage/#foo-tab в вашем навигаторе автоматически выберет вкладку с контейнером, имеющим id="foo-tab".
Хитрость заключается в том, чтобы добавить событие для обновления URL-адреса при выборе вкладки, чтобы при перезагрузке вы не потеряли текущую вкладку:
$(document).ready(function () {
$("#tabs").bind('tabsselect', function(event, ui) {
window.location.href=ui.tab;
});
});
У меня немного другой подход, который не обязательно зависит от встроенной функции select(), но использует плагин livequery:
http://plugins.jquery.com/project/livequery/
которая является более мощной версией живой функции jQuery. Он может легко связывать будущие элементы, соответствующие запросу.
Предположим, у вас есть следующая структура вкладок:
<div class="Tabs">
<ul class="nav">
<li><a id="tab1">Link 1</a></li>
<li><a id="tab2">Link 2</a></li>
<li><a id="tab3">Link 3</a></li>
</ul>
..
..
</div>
в идеале вам нужна такая структура URL:
mydomain/mypage?tab=tab2
это становится довольно сложным, потому что метод select() поддерживает только целочисленные индексы, и что происходит, когда вы меняете вкладки?
Предположим, вы можете получить параметр url в переменной, как указано выше, чтобы сделать следующее:
Сначала вы находите целевой элемент и добавляете к нему класс:
jQuery('a#' + param).addClass('selectMe');
Затем вы привязываете функцию livequery к элементу:
jQuery('.ui-tabs-nav a.selectMe').livequery(function(){
jQuery(this).removeClass('selectMe').triggerHandler('click');
});
Это будет соответствовать ему только после того, как он будет преобразован с табуляцией и фактически «щелкнет» по нему.
Затем вы можете вызвать функцию вкладок без параметров:
jQuery(".Tabs").tabs();
и как только это будет завершено, вкладка будет автоматически нажата и выбрана!
Еще лучше, вы можете привязать создание вкладок к самому livequery:
jQuery(".Tabs").livequery(function(){
jQuery(this).tabs();
});
так что любые элементы, которые у вас есть с классом «.Tabs», будут автоматически преобразованы во вкладки при загрузке, сейчас или в будущем!
Следующая ссылка плагина jQuery кажется возможным кандидатом на решение, поскольку она предоставляет вам URL-адрес и составные части. Затем вы сможете сопоставить значение либо с индексом вкладки, которую вы хотите выбрать, либо с идентификатором или классом через селектор jQuery:
http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3
