1

所以，

我试图想出一种将内容动态加载到多个选项卡中的方法，其中每个选项卡可以包含从一个到多个元素（报告）的任何位置。

目前，报表是在页面加载时使用 jQuery $.load 加载的。我正在使用 Bootstrap 和引导选项卡。我找到了一个教如何加载多个标签的网站，但没有具体说明我需要做什么。该网站在这里： http: //www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-load-content/

相比之下，每个选项卡的设置更像这样：

<div id="tab1">
<div id="report1"></div>
<div id="report2"></div>
</div>

我不能使用顶级 div 来加载内容，因为它可能有多个孩子。我需要遍历 div，使用正则表达式解析 ID，并在选项卡更改时加载每个报告。

我还没有弄清楚正则表达式，但它应该相当简单 - 元素 id 将是这样的：“#be78f5aa3-25”。这是一个由 9 个字母数字字符组成的 dbid，后跟一个连字符，后跟一个 1-3 位整数（不是从 0 开始）。然后我需要将这两个字符串拆分为单独的变量并将它们注入到 API 调用中。

4

1 回答 1

0

任何希望将多个页面加载到引导选项卡中的人都可能会发现它很有用。我能够使用一些正则表达式（特定于我的应用程序）使其工作，将 div 放置在具有元素 ID 的选项卡窗格容器中，该元素 ID 可用于创建我想使用 $.load 加载到容器中的报告。当用户转到另一个页面然后使用后退按钮时，我还为持久选项卡添加了一些内容，如果 URL 中没有哈希值，我还添加了另一个条件来加载第一个选项卡中的内容。

我敢肯定它可以被清理，但你明白了要点.. 

$(function() {
    "use strict";
    var baseURL, $navbox;
    baseURL = window.location.protocol + "//" + window.location.hostname + "/db/";
    $navbox = $("#myTabs");
    $navbox.bind("show", function(e) {
        var contentID, pattern, selectDiv;
        pattern = /#(\Btab|tab\B)?(\Bdropdown|dropdown\B)?([1-9]{1}[0-9]*)/i;
        contentID = e.target.toString().match(pattern)[0];
        selectDiv = contentID + " > div";
        return $(selectDiv).each(function() {
            var parts = this.id.match(/(##enter regex here)/);
            if (parts) {
                $(this).load(baseURL + parts[0]);
                return;
            }
            return $("#myTabs").tab();
        });
    });
    if (window.location.hash) {
        $('#myTabs').find('a[href="'+window.location.hash+'"]').tab('show');
    }
    else { 
        var elemID = "#"+$('[class^="tab-pane active"]').attr('id') + " > div";
        $(elemID).each(function() {
            var parts = this.id.match(/(##enter regex here)/);
            $(this).load(baseURL + parts[0]);
            return $("#myTabs").tab();
        });
    }
});

$('#myTabs a').click(function (e) {
    e.preventDefault();
    var bob = jQuery(this).attr("href");
    bob = jQuery.trim(bob);
    if(bob == "" || bob == "javascript:void(0)") {
        return;
    }
    else {
        window.location.hash = $(this).attr('href');
        $(this).tab('show');
    }
});
于 2012-12-14T01:50:46.113 回答