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


19

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

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

  0

http://stackoverflow.com/questions/439463/ как-get-get-and-post-variables-with-jquery 06 сен. 112011-09-06 01:29:20

22

Использование 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); 
}); 

С documentation:

#select 

Подпись:

.tabs('select' , [index]) 

Выберите вкладку, как если бы она была нажата. Второй аргумент - это индекс на основе нуля выбранной вкладки или селектор идентификаторов панели, с которой связана вкладка (идентификатор фрагмента href вкладки, например хеш, указывает на идентификатор панели).


1

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

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


0

Я предполагаю, что это достаточно, чтобы загрузить историю и получить эту работу.

  0

эти ссылки больше не работают 13 ноя. 132013-11-13 06:58:41


1

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

становится довольно сложно, так как метод выбора() поддерживает только целое число индексы, и что происходит, когда вы меняете свои вкладки?

Предположив вы можете получить параметр 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' будут автоматически преобразованы в закладки от нагрузки, в настоящее время или в будущем !


24

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

без правильного синтаксиса «/»: http://my.site.org/mypage#foo-tab 08 окт. 102010-10-08 14:52:36

+2

@ kralco626: https://docs.djangoproject.com/en/dev/#the-view-layer не является недопустимым синтаксисом. Приветствия. 01 дек. 112011-12-01 08:44:19

+1

Правильно, что вы: вам понадобилось 6 месяцев, чтобы понять это? ;) 08 дек. 112011-12-08 18:44:22

+4

Мне не потребовалось 6 месяцев, чтобы забыть, как это сделать! 10 дек. 112011-12-10 18:57:29