jQuery EasyUI 动态添加标签页（Tabs）完整教程

在使用 jQuery EasyUI 构建后台管理系统时，经常需要根据用户操作动态生成标签页。本文通过调用 add 方法并结合 iframe 加载外部页面，演示如何实现点击按钮新增或激活已有标签页的功能。掌握该方法后，可灵活扩展多页面切换场景。

创建基础 Tabs 结构

首先构建包含按钮与标签页容器的 HTML 结构。通过 EasyUI 提供的 easyui-tabs 类初始化标签页组件，并设置初始面板。

    google
    jquery
    easyui


    

    

该结构无需额外 JavaScript 初始化代码，EasyUI 会自动解析 easyui-tabs 类并渲染标签页。按钮通过 onclick 事件触发 addTab 函数，传入标题与目标 URL。

实现 addTab 函数逻辑

addTab 函数负责判断标签页是否存在，并执行新增或激活操作。核心逻辑如下：

function addTab(title, url){
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
        $('#tt').tabs('add',{
            title:title,
            content:content,
            closable:true
        });
    }
}

函数首先通过 exists 方法检查指定标题的标签页是否已存在。若存在，则调用 select 方法激活该标签页；若不存在，则构造包含 iframe 的内容字符串，并通过 add 方法添加新标签页。closable 属性设置为 true，允许用户关闭标签页。

实际应用场景与注意事项

iframe 加载外部页面的限制

使用 iframe 嵌入外部网站时，需注意同源策略与 X-Frame-Options 响应头限制。部分网站会禁止被嵌入，导致内容无法显示。建议仅加载允许嵌入的页面或使用同源资源。

标签页重复添加的优化

当前实现通过标题判断是否重复。若业务中同一 URL 可能对应不同标题，可改为基于 URL 去重，或在 add 前调用 getTab 方法获取已有面板进行比对。

扩展用法建议

可通过监听 onAdd、onSelect 等事件实现标签页状态同步。若需动态更新标签页内容，可结合 update 方法替换 content 属性。对于复杂场景，建议将标签页数据与 DOM 操作解耦，便于维护。