jQuery UI-使用外部链接在选项卡中打开手风琴 [英] jQuery UI - Open Accordion within Tabs with an external link
问题描述
我想在每个外部链接的选项卡中打开一个手风琴.例如:www.demosite.com/site#tab1&2应该打开第一个选项卡,在该选项卡内是第二个手风琴.
I´d like to open an Accordion within an Tab per external link. For example: www.demosite.com/site#tab1&2 should open the first tab and inside the tab the second accordion.
到目前为止,我使用以下代码打开了特定的标签页:
So far I get the specific Tab open with the following code:
$( "#tabs" ).tabs({
collapsible: true,
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
要打开我的手风琴,我应该使用jQuery UI手风琴的活动函数,但是我不知道如何同时使用两者.
For opening the Accordion I thin I should use the active Function of jQuery UI Accordion, but I don´t know, how I can use both.
有人可以帮我吗?
推荐答案
您应该拆分哈希,以在其中包含两个信息.
You should split the hash, to have both information in it.
示例1:#0 | 1将打开第一个标签和第二个面板
示例2:#1 | 0将打开第二个标签和第一个面板
Example 1: #0|1 will open first tab and second panel
Example 2: #1|0 will open second tab and first panel
为此,我创建了两个函数:getHash和setHash.
For that, i created 2 functions: getHash and setHash.
$(function() {
$(document).ready(function(){
var getHash = function(key){
var parts = window.location.hash.substr(1).split(/\|/);
var _key = parseInt(key) || 0;
return _key < parts.length ? parts[_key] : false;
};
var setHash = function(key, value){
var parts = window.location.hash.substr(1).split(/\|/);
var _key = parseInt(key) || 0;
parts[_key] = value
window.location.hash = '#' + parts.join('|');
};
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
animated: 'slide',
navigation: true,
activate: function(event, ui) {
if(ui.newHeader.length > 0){
// A new accordion panel is open
setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
}else{
// In case accordion panel is closed
setHash(1, '');
}
},
active: false
});
$( "#tabs" ).tabs({
collapsible: true,
activate: function(event, ui) {
if(ui.newTab.length > 0){
// A new tab is open
var tabHash = ui.newTab.parent().children().index(ui.newTab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}else{
// In case we close tab, hash is cleared
window.location.hash = ''
}
},
create: function(event, ui){
if(ui.tab.length > 0){
var tabHash = ui.tab.parent().children().index(ui.tab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}
},
// Make sure to parseInt hash value, because jquery-ui require an integer
// Remove the " || 0 " if you want all to be closed
active: parseInt(getHash(0)) || 0
});
});
});
我在这里做了一个叉子:
http://jsfiddle.net/9nKZp/1/
结果如下:
http://jsfiddle.net/9nKZp/1/show/
I did a fork here:
http://jsfiddle.net/9nKZp/1/
And the result here:
http://jsfiddle.net/9nKZp/1/show/
这篇关于jQuery UI-使用外部链接在选项卡中打开手风琴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!