jQuery UI - 使用外部链接在选项卡中打开手风琴

jQuery UI - Open Accordion within Tabs with an external link

本文关键字：选项 手风琴 链接 UI 外部 jQuery      更新时间：2023-09-26

我想在每个外部链接的选项卡中打开一个手风琴.例如：www.demosite.com/site#tab1&2 应打开第一个选项卡，并在选项卡中打开第二个手风琴。

到目前为止，我使用以下代码打开了特定的选项卡：

$( "#tabs" ).tabs({
  collapsible: true,
  select: function(event, ui) {
    window.location.hash = ui.tab.hash;
  }
});

为了打开手风琴，我应该使用jQuery UI手风琴的活动功能，但我不知道，我如何同时使用两者。

谁能帮我？

http://jsfiddle.net/bMeLL

您应该拆分哈希，以包含两个信息。

示例 1：#0|1 将打开第一个选项卡和第二个面板
示例 2：#1|0 将打开第二个选项卡和第一个面板

为此，我创建了 2 个函数：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/

在 .accordion() -call 中，您希望使用 active: N 其中 N 是要扩展的手风琴的索引（它接受一个数字，但您的小提琴像布尔值一样使用它）。

现在你只需要提供N的值，而不是我的硬编码值1。基于ui.tab.hash方法构建可能会起作用。

有

几种不同的方法来检索查询字符串参数，但您的 URL 必须类似于 demosite.com/site?tab=1&accordion=2 .对如何将查询字符串参数放入 Javascript 变量进行一些研究。

这是你的小提琴的叉子

相关文章：