Выбор вкладки jQuery с использованием параметра в URL-адресе

В настоящее время я изучаю замену вкладок, предоставленных библиотекой тегов Struts с вкладками, предоставленными jQuery UI. Мне удалось получить вкладки, интегрированные с существующим приложением, но я борюсь за то, как установить выбранную вкладку, используя параметр входящего URL-адреса, то есть myurl.com/action.do?selectedTab=SecondTab.

Я новичок в JavaScript и jQuery; каковы некоторые указатели о том, с чего начать?

Ответы

Ответ 1

Использование 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 tab, например хэш, указывает на идентификатор панели).

Ответ 2

JQuery-UI дает вам это (почти) бесплатно: используйте внутренние ссылки. И это лучше, чем использование уродливых параметров.

Передача http://my.site.org/mypage/#foo-tab в вашем навигаторе будет автоматически выбирать вкладку с контейнером с id = "foo цвет вкладка".

Фокус в том, чтобы добавить событие для обновления URL-адреса при выборе вкладки, чтобы при перезагрузке вы не потеряли текущую вкладку:

   $(document).ready(function () {
        $("#tabs").bind('tabsselect', function(event, ui) {
            window.location.href=ui.tab;
        });
    });

Ответ 3

Следующая ссылка плагина jQuery представляется потенциальным кандидатом для решения, поскольку она предоставляет вам URL-адрес и составные части. Затем вы сможете сопоставить значение с индексом закладки, которую вы хотите выбрать, или с помощью id или класса через селектор jQuery:

http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3

Ответ 4

У меня несколько иной подход, который не обязательно зависит от встроенной функции select(), но использует плагин livequery:

http://plugins.jquery.com/project/livequery/

который является более мощной версией функции jQuery live. Он может легко связывать будущие элементы, соответствующие запросу.

Предположим, что у вас есть структура вкладок следующим образом:

<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');
});

Это будет соответствовать ему только после того, как он будет использован для табуляции и фактически 'click'.

Затем вы можете вызвать функцию табуляции без параметров:

jQuery(".Tabs").tabs();

и после его завершения вкладка будет автоматически нажата и выбрана!

Еще лучше, вы можете привязать создание вкладок к самому livequery:

jQuery(".Tabs").livequery(function(){
    jQuery(this).tabs();    
});

так что любые элементы, которые у вас есть с классом ".Tabs", будут автоматически преобразованы в вкладки при загрузке, сейчас или в будущем!