使用EasyUI，tab标签使用

最新推荐文章于 2023-05-17 11:41:33 发布

一粒老仙丹

最新推荐文章于 2023-05-17 11:41:33 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： EasyUI 文章标签： EasyUI

本文链接：https://blog.youkuaiyun.com/jianshaoguang8886/article/details/81875631

EasyUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在EasyUI中使用Tab组件结合Iframe实现动态加载页面，并提供了创建、关闭及刷新Tab的方法。通过JavaScript代码实现了丰富的交互功能，如右键菜单控制Tab的打开与关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用EasyUI，tab标签使用

引入iframe页面

function createFrame(url) {
    var frame = '<iframe id="mainFrame" name="mainFrame" scrolling="auto" frameborder="0"  src="'
            + url + '" style=\"width:100%;height:98.5%;\"></iframe>';
    return frame;
}

新建tab页面

//在右边center区域打开菜单，新增tab
function addTab(text, url) {
    if ($("#tabs").tabs('exists', text)) {
        $('#tabs').tabs('select', text);
        var tab = $('#tabs').tabs('getSelected');
        /* tab.panel('refresh', url); */
        $('#tabs').tabs('update', {
            tab : tab,
            options : {
                content : createFrame(url)
            }
        });

    } else {
        $('#tabs').tabs('add', {
            title : text,
            closable : true,
            content : createFrame(url)
        });
    }
}

关闭tab页面

// 在右边center区域打开菜单，关闭tab
function closeTab(menu, type) {
    var curTabTitle = $(menu).data("tabTitle");
    var tabs = $("#tabs");

    if (type === "close") {
        tabs.tabs("close", curTabTitle);
        return;
    }

    var allTabs = tabs.tabs("tabs");
    var closeTabsTitle = [];

    $.each(allTabs, function() {
        var opt = $(this).panel("options");
        if (opt.closable && opt.title != curTabTitle && type === "Other") {
            closeTabsTitle.push(opt.title);
        } else if (opt.closable && type === "All") {
            closeTabsTitle.push(opt.title);
        }
    });

    for (var i = 0; i < closeTabsTitle.length; i++) {
        tabs.tabs("close", closeTabsTitle[i]);
    }
}

$(function() {
    // 绑定tabs的右键菜单
    $("#tabs").tabs({
        onContextMenu : function(e, title) {
            e.preventDefault();
            $('#tabsMenu').menu('show', {
                left : e.pageX,
                top : e.pageY
            }).data("tabTitle", title);
        }
    });

    // 实例化menu的onClick事件
    $("#tabsMenu").menu({
        onClick : function(item) {
            closeTab(this, item.name);
        }
    });

    // 菜单点击事件改变点击菜单样式
    $(".menu-ul").click(function() {
        var selectedItem = $(".menu-ul-li-selected");
        if (selectedItem != null && selectedItem.length > 0) {
            $.each(selectedItem, function(n, value) {
                $(value).removeClass("menu-ul-li-selected");
                $(value).removeClass("datagrid-row-selected");
                $(value).addClass("menu-ul-li");
            });
        }
        $(this).removeClass("menu-ul-li");
        $(this).addClass("menu-ul-li-selected");
        $(this).addClass("datagrid-row-selected");
    });
});

关闭当前tab标签页面，刷新另一个tab标签数据

function Wraper() {
}
Wraper.prototype = {
    //新建tab标签text:标签名称,url:页面地址
    openTab : function(text, url) {
        addTab(text, url);
    },
    //text:关闭标签名称
    closeTab : function(text) {
        var tabs = $("#tabs");
        tabs.tabs("close", text);
    },
    //closeText关闭tab标签名称,reloadText要刷新tab标签名称
    closeAndReloadTab : function(closeText, reloadText) {
        var tabs = $("#tabs");
        tabs.tabs("close", closeText);
        var tab = tabs.tabs("getTab", reloadText);
        var url = $(tab.panel('options').content).attr('src');
        if (tab != null) {
            $('#tabs').tabs('update', {
                tab : tab,
                options : {
                    content : createFrame(url)
                }
            });
        }
    }
};
window.framework = new Wraper();

添加tab标签调用

top.framework.openTab(title, url);

关闭tab标签调用

top.framework.closeTab(title);

关闭当前标签，刷新指定标签内容

top.framework.closeAndReloadTab(menuName, parentMenuName);