H+后台UI框架，單擊按鈕增加新的選項卡

問題：

　　使用H+時，發現單擊按鈕不能打開新的選項卡，新頁面會直接替換掉原先的頁面

經查需要自己寫方法：

　　一種是直接在頁面中增加js方法（我采用的）；

　　另一種是修改contabs.js文件（參考：https://blog.csdn.net/wanghwang2008/article/details/80373679，但我使用未實現）

 

需求：

　　如圖,單擊后方的查看按鈕，查看該行的數據對比詳情頁面。

 

 

解決：

　　在需要調用的頁面增加該js函數：

// 打開新頁面
// 打開自定義新選項卡：<a href="#" οnclick="openTabPage('url', '自定義標題')">test</a>
// 打開系統選項卡：<a href="#" οnclick="openTabPage('url')">查看提現記錄</a>
function openTabPage(url, title) {
    var wpd = $(window.parent.document);
    var mainContent = wpd.find('.J_mainContent');
    var thisIframe = mainContent.find("iframe[data-id='"+ url +"']");
    var pageTabs = wpd.find('.J_menuTabs .page-tabs-content ')
    pageTabs.find(".J_menuTab.active").removeClass("active");
    mainContent.find("iframe").css("display", "none");
    if(thisIframe.length > 0){    // 選項卡已打開
        thisIframe.css("display", "inline");
        pageTabs.find(".J_menuTab[data-id='"+ url +"']").addClass("active");
    }else{
        var menuItem = wpd.find("a.J_menuItem[href='"+ url +"']");
        var dataIndex = title == undefined ? menuItem.attr("data-index") : '9999';
        var _title = title == undefined ? menuItem.find('.nav-label').text() : title;
        var iframe = '<iframe class="J_iframe" name="iframe'+ dataIndex +'" width="100%" height="100%" src="' + url + '" frameborder="0" data-id="' + url
                + '" seamless="" style="display: inline;"></iframe>';
        pageTabs.append(
                ' <a href="javascript:;" class="J_menuTab active" data-id="'+url+'">' + _title + ' <i class="fa fa-times-circle"></i></a>');
        mainContent.append(iframe);
        //顯示loading提示
        var loading = top.layer.load();
        mainContent.find('iframe:visible').load(function () {
            //iframe加載完成后隱藏loading提示
            top.layer.close(loading);
        });
    }
        
}

調用時傳遞url和新選項卡title就行了

<a href='javascript:;' class='btn btn-xs blue' onclick=\"openTabPage('/comparison/comp_case_detail?case_id=" + row.id + "','數據對比詳情')\" title='詳情'><span class='glyphicon glyphicon-search'></span></a>