Выбор вкладки jQuery с помощью параметра в URL

Question

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

.

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

Answer 1

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

Answer 2

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

Answer 3

У меня немного другой подход, который не обязательно опирается на встроенную функцию 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, будут автоматически преобразованы в закладки при загрузке, сейчас или в будущем!

Answer 4

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

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

Answer 5

• http://stilbuero.de/jquery/history/index.html
• http://stilbuero.de/jquery/tabs/index.html#fragment-1

Полагаю, достаточно загрузить историю и заставить ее работать.