jQuery EasyUI 布局教程：创建标签页（Tabs）组件

在单页面应用中，使用标签页（Tabs）可以在有限空间内切换展示不同内容。本文基于 jQuery EasyUI 框架，演示如何通过 HTML 标记快速构建 Tabs 组件，并配置面板标题、关闭按钮与图标，帮助开发者实现清晰的前端布局。

Tabs 组件功能与使用场景

Tabs 组件用于在同一页面内管理多个面板（panel），每次仅显示一个选中面板的内容。每个面板可配置独立标题、图标和关闭按钮，支持动态添加或移除，适合用于后台管理系统、设置页面或多步骤表单等需要内容分区切换的场景。

通过 HTML 标记创建 Tabs

使用 EasyUI 的声明式语法，只需在容器元素上添加 easyui-tabs 类即可初始化组件。内部每个子 div 代表一个面板，通过 title 属性定义标签页名称。

    

        First Tab
    
    

        Second Tab
    
    

        Third Tab
    

上述代码创建了一个包含三个面板的 Tabs 组件。容器尺寸通过内联样式固定为 400x100 像素，面板内容区域通过 padding:10px 保持内边距一致。

面板属性配置与交互说明

每个面板可通过属性控制其行为与外观：

• title：定义标签页显示的文本标题。
• closable="true"：启用关闭按钮，用户点击后可移除该面板。示例中第二个和第三个面板支持关闭操作。
• iconCls="icon-reload"：为标签页添加图标，此处使用 EasyUI 内置的刷新图标。

当用户点击某个标签页时，对应面板内容将自动显示，其他面板隐藏。关闭面板后，组件会自动调整剩余标签页的布局。

获取完整示例代码

如需查看完整运行环境及依赖引入方式，可下载官方提供的实例包：jeasyui-layout-tabs1.zip。解压后在浏览器中打开对应 HTML 文件即可预览效果。