使用URL中的参数选择jQuery选项卡


19

我目前正在调查使用jQuery UI提供的选项卡替换Struts 1标记库提供的选项卡。我已成功设法将标签与现有应用程序集成,但我正在努力如何使用传入URL上的参数设置选定标签,即myurl.com/action.do?selectedTab=SecondTab。

我是JavaScript和jQuery的新手;从哪里开始有什么指点?

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]) 

选择一个标签,就好像它被点击一样。第二个参数是要选择的选项卡的零基索引或选项卡所关联的面板的id选择器(选项卡的href片段标识符,例如散列,指向面板的id)。


1

下面的jQuery插件链接似乎是解决方案的可能候选者,因为它提供了URL和组件部分。然后,您将能够值与您要选择或者通过jQuery选择ID或类标签的任一指标匹配:

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


0

我想这是足以载入历史,得到这个工作。

  0

这些链接不无“/”正确的语法不再起作用 13 11月. 132013-11-13 06:58:41


1

我有一个稍微不同的方法,并不一定依靠内置的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'的任何元素将被自动转换成负载时,标签现在或将来!


24

jQuery的UI给你(几乎)免费:使用内部链接。它比使用丑陋的get参数要好。

通过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 10月. 102010-10-08 14:52:36

+1

正确的你是:)它花了你6个月来弄清楚了吗? ;) 08 12月. 112011-12-08 18:44:22

+4

不,它花了我6个月,忘记了如何做! 10 12月. 112011-12-10 18:57:29