选择选项卡1.10.0
之前jQuery UI的1.10.0我曾经间接选择这样的标签:选择选项卡1.10.0
$("#tabs").tabs("select", 5);
或
$("#tabs").tabs("select", "tab6");
现在,使用相同的代码,使用jQuery UI 1.10.0,你会得到一个错误,说有“没有这样的方法'选择'选项卡小部件实例“。
我改为使用“选项”“活动”这样的代码:
$("#tabs").tabs("option","active", 5);
但是,它看起来像我可以只使用索引。通过ID选择不再有效。 因此,而不是像这样使用的ID(没有工作):
$("#tabs").tabs("option","active", "tab6");
你必须做这样的:
var idx = $('#tabs a[href="#tab6"]').parent().index();
$("#tabs").tabs("option", "active", idx);
,或者在一个较短的形式
$("#tabs").tabs("option", "active", $("#tab6").parent().index());
我读了“更新日志”(http://jqueryui.com/changelog/1.10.0/),但我没有看到有关此更改的任何内容。
是否有另一种方式在jQuery UI 1.10.0按名称选择选项卡?
我创建这里谁想尝试演示...
我结束了使用此(参见实施例):
基本上,我加入这些功能
$.fn.tabIndex = function() {
return $(this).parent().find(this).index() - 1;
};
$.fn.selectTabByID = function (tabID) {
$(this).tabs("option", "active", $('#' + tabID).tabIndex());
};
$.fn.selectTabByIndex = function (tabIndex) {
$(this).tabs("option", "active", tabIndex);
};
答使用它们是这样的:
$("#tabs").selectTabByIndex(0);
$("#tabs").selectTabByID('tab2');
正如你将看到在我的例子的HTML部分...
<div id="tabs">
<ul>
<li><a href="#tab1">[0] #tab1</a></li>
<li><a href="#tab2">[1] #tab2</a></li>
<li><a href="#tab3">[2] #tab3</a></li>
<li><a href="#tab4">[3] #tab4</a></li>
</ul>
<div id="tab1">Tab 1 Content</div>
<div id="tab2">Tab 2 Content</div>
<div id="tab3">Tab 3 Content</div>
<div id="tab4">Tab 4 Content</div>
</div>
...我有一个非常简单,定义良好的标签结构。
“真正的”应用程序包含3个级别的标签
见这个例子与2级:
,我就不清楚了另一件事是这样的:我不想触发选项卡上的“点击”,我只想“切换”到该选项卡,无需点击。 对我来说,“点击”事件会加载一个标签的内容,而且我不想在每次“选择”一个标签页时加载内容。
这工作好得多,然后在这个线程中的所有方法。谢谢你,超越这个问题让我疯狂。 – adamj 2013-12-16 14:12:42
jQuery的deprecated the select
method in v.1.9
的
select
方法,取而代之的只是更新活动选项被废弃了。您应该调用select
方法,并调用option
方法来更改活动选项。
In v.1.10 they completely removed it:
我能得到通过名称选择一个选项卡是使用href
属性选择和trigger
方法最接近的一次。
$("[href='#tab6']").trigger("click");
原来select
方法做了一些similar:
this.anchors.eq(index).trigger(this.options.event + this.eventNamespace);
只有他们通过索引而不是名称选择的选项卡。
我使用“点击”加载标签的内容。我所说的“选择”应该切换到该选项卡。我不认为原来的“选择”在标签上触发了“点击”事件(我没有时间回去测试)。我之前用过“select”,就像我在我的问题中说过的那样,它与“click”不是同一个事件。 – leoinfo 2013-05-14 19:16:49
如果您已经有大量引用这些折旧功能的遗留代码,并且迁移是一件头痛的事情,那么请创建一个桥接旧/新方法的向后兼容性模块。
$.extend(true, $.ui.tabs.prototype, {
select: function (indexOrId) {
if (typeof indexOrId == "integer")
this.option("select", indexOrId);
else
$("[href='#"+ indexOrId +"']", this.element).click();
}
// other methods..
});
我用上面的$(“[href ='#tab6']”)。trigger(“click”);由Ayman Safadi发布(谢谢!)和一个隐藏的领域,其作品很棒。 大了起来为这个职位也http://geekswithblogs.net/dotNETvinz/archive/2010/07/09/jquery-tab-retain-selected-tab-across-postbacks-in-asp.net.aspx它与Aymens答案组合帮助我得到这个最终的答案:)感谢所有
<script type="text/javascript">
$(function() {
var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val();
if (currTab == 0) {
$("[href='#tab_1_1']").trigger("click");
}
if (currTab == 1) {
$("[href='#tab_1_2']").trigger("click");
}
if (currTab == 2) {
$("[href='#tab_1_3']").trigger("click");
}
if (currTab == 3) {
$("[href='#tab_1_4']").trigger("click");
}
});
</script>
只是为了还注意到,下面的代码做的工作太多,但把我的标签为蓝色一些原因
$('#tabs').tabs();
var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val();
$('#tabs').tabs("option", "active", currTab);
真的很容易;
$("#tabs").tabs("option", "active", $("#tabs").find("#tab6").index()-1);
凡#tab6是你要选择的选项卡和#tabs的ID是你的标签控件的ID。
+1这是1中更令人恼火的变化之一。10 – BLSully 2013-02-13 22:00:51