1

そう、

各タブに 1 つから複数の要素 (レポート) を含めることができる複数のタブにコンテンツを動的に読み込む方法を考え出そうとしています。

現在、レポートは jQuery $.load を使用してページの読み込み時に読み込まれます。Bootstrap と 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 で始まらない) が続きます。次に、これら 2 つの文字列を個別の変数に分割し、API 呼び出しに挿入する必要があります。

4

1 に答える 1

0

複数のページをブートストラップ タブにロードしようとしている人は誰でも、これが役に立つと思うかもしれません。$.loadを使用してコンテナにロードしたいレポートを作成するために使用できる要素IDを持つタブペインコンテナ内にdivを配置して、いくつかの正規表現（私のアプリケーションに固有）を使用して動作させることができました。また、ユーザーが別のページに移動してから [戻る] ボタンを使用したときの固定タブと、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 に答える