Tab的改造

背景：很多后台管理系统为了方便浏览，都需要做多Tab的形式(多页签)，而metronic这点我觉得很烂。

改造方案：利用ligerui的tab进行改造

效果：

所需文件：
ligerui/base/base.js
ligerui/plugins/ligerTab.js

HTML代码

<div class="page-content-wrapper">
    <div class="page-content" style="padding:0;">
        
        <div id="content-main"></div>
    </div>
    
</div>

JavaScript代码
<script type="text/javascript">
$(function(){
var tabItems = [];
//Tab
$("#content-main").ligerTab({
    height: '100%',
    showSwitchInTab : true,
    showSwitch: true,
    onAfterAddTabItem: function (tabdata)
    {
        tabItems.push(tabdata);
          saveTabStatus();
    },
    onAfterRemoveTabItem: function (tabid)
    {
        for (var i = 0; i < tabItems.length; i++)
        {
            var o = tabItems[i];
            if (o.tabid == tabid)
            {
                tabItems.splice(i, 1);
                  saveTabStatus();
                break;
            }
        }
    }
});
tab = $("#content-main").ligerGetTabManager();
$(".J_menuItem").on("click", function(event) {
    event.preventDefault();
    //var right = $(this).data("right");
    //if (right && !Business.verifyRight(right)) return false;
    var tabid = $(this).attr("tabid"),
         href = $(this).attr("href"),
         showClose = $(this).attr("showClose"),
         tabTxt = $(this).attr("tabTxt") || $(this).text().replace(">", ""),
         parentOpen = $(this).attr("parentOpen");
    return parentOpen == "true" ? parent.tab.addTabItem({
        tabid: tabid,
        text: tabTxt,
        url: href
    }) : tab.addTabItem({
        tabid: tabid,
        text: tabTxt,
        url: href
    }), false
});
tab.addTabItem({
    tabid: "index",
    text: "首页",
    url: "${base}/admin/dashboard",
    showClose: false
});
});

function f_addTab(tabid, text, url) {
    tab.addTabItem({
        tabid: tabid,
        text: text,
        url: url
    });
}
</script>

猜你喜欢