[英]jQuery UI Tabs - Show all Tab
Hey everyone.嘿大家。 I saw another post on using a specific jQuery UI tab to open all tab content at once.我看到另一篇关于使用特定 jQuery UI 选项卡一次打开所有选项卡内容的帖子。 This is more or less a "show all" tab.这或多或少是一个“显示全部”选项卡。 It doesn't seem to be working for me.它似乎对我不起作用。 In any event, my page structure looks like this:无论如何,我的页面结构如下所示:
<div id="tabs">
<ul class="tabs-1">
<li><a href="#tabs-1"> Some Tab </li>
<li><a href="#tabs-2"> Some Tab </li>
<li><a href="#tabs-3"> Some Tab </li>
<li><a href="#"> Show All </li>
</ul>
<fieldset id="tabs-1"> Content </fieldset>
<fieldset id="tabs-2"> Content </fieldset>
<fieldset id="tabs-3"> Content </fieldset>
</div>
This is the JavaScript that I have used, based on a previous example:这是我使用的 JavaScript,基于前面的示例:
var user_tabs = $("#tabs").tabs({
select: function(event, ui) {
if (ui.index == 3) {
$("fieldset[id^=tabs-]").show();
} else {
$("fieldset[id^=tabs-]").hide();
$(ui.panel).show()
}
}
});
The tabs that I use have initialized correctly, but the "show all tab" doesn't work at all我使用的选项卡已正确初始化,但“显示所有选项卡”根本不起作用
Any ideas?有任何想法吗?
Firstly, fix the html code within your tabs.首先,在您的选项卡中修复 html 代码。 You are missing the </a>
for all the links.您缺少所有链接的</a>
。
Then change your last tab to:然后将您的最后一个选项卡更改为:
<li><a href="#tabs-4"> Show All </a></li>
add another panel (can be empty):添加另一个面板(可以为空):
<fieldset id="tabs-4"></fieldset>
And change your javascript to this:并将您的 javascript 更改为:
var user_tabs = $("#tabs").tabs({
show: function(event, ui) {
if (ui.index == 3) {
$("fieldset[id^='tabs-']").removeClass('ui-tabs-hide');
$("fieldset[id='tabs-4']").addClass('ui-tabs-hide');
}
}
});
( Note the change from select
to show
) (注意从select
到show
的变化)
Example: http://jsfiddle.net/niklasvh/km7Le/示例: http://jsfiddle.net/niklasvh/km7Le/
This works (for me) in jQuery-ui-1.10.0.这在 jQuery-ui-1.10.0 中(对我来说)有效。 Note that I use divs, not fieldsets as done in the question.请注意,我使用 div,而不是问题中所做的字段集。
//Do the tabs
$('#tabs').tabs({
activate: function (event, ui) {
if (ui.newPanel.selector == "#tabs-4") {
$("div[id^='tabs-']").attr('style', "display:block;");
$("div[id^='tabs-']").attr('aria-expanded', true);
$("div[id^='tabs-']").attr('aria-hidden', false);
}
else {
$("div[id^='tabs-']").attr('style', "display:none;");
$("div[id^='tabs-']").attr('aria-expanded', false);
$("div[id^='tabs-']").attr('aria-hidden', true);
$(ui.newPanel.selector).attr('style', "display:block;");
$(ui.newPanel.selector).attr('aria-expanded', true);
$(ui.newPanel.selector).attr('aria-hidden', false);
}
}
});
In version jQuery UI 1.12 event changed to 'beforeActivate' and 'ui' and returns arguments newTab在 jQuery 版本中,UI 1.12 事件更改为“beforeActivate”和“ui”并返回 arguments newTab
So new function will look like:所以新的 function 看起来像:
var user_tabs = $("#tabs").tabs({ beforeActivate: function(event, ui) { if (ui.newTab.find('a').attr('href') === '#tabs-4') { $("fieldset[id^='tabs-']").removeClass('ui-tabs-hide'); $("fieldset[id='tabs-4']").addClass('ui-tabs-hide'); } } });
In JQuery UI Tabs 1.12.1, this works perfectly:在 JQuery UI Tabs 1.12.1 中,这完美地工作:
var user_tabs = $("#tabs").tabs(
{activate:
function(event, ui) {
if ( ui.newTab.find('a').attr('href') === '#tabs-4') {
$("div[id^='tabs-']").show();
}
}
}
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.