[英]jQuery UI - Open Accordion within Tabs with an external link
我想在每個外部鏈接的Tab中打開一個Accordion。 例如:www.demosite.com/site#tab1&2應打開第一個選項卡,並在選項卡內打開第二個手風琴。
到目前為止,我使用以下代碼打開特定的Tab:
$( "#tabs" ).tabs({
collapsible: true,
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
為了打開手風琴我瘦我應該使用jQuery UI Accordion的主動功能,但我不知道,我如何使用它們。
誰能幫我嗎?
在.accordion()
call中,你想使用active: N
,其中N
是你想要展開的手風琴的索引(它接受一個數字,但是你的小提琴使用它就像一個布爾值)。
現在你只需要提供N
的值而不是我的硬編碼值1
。 在您的ui.tab.hash
-method上ui.tab.hash
可能會有效。
有幾種不同的方法可以檢索查詢字符串參數,但您的網址必須類似於demosite.com/site?tab=1&accordion=2
。 做一些關於如何將查詢字符串參數轉換為Javascript變量的研究。
您應該拆分哈希,以便在其中包含兩個信息。
示例1:#0 | 1將打開第一個選項卡和第二個面板
示例2:#1 | 0將打開第二個選項卡和第一個面板
為此,我創建了兩個函數:getHash和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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.