使用easyUI创建Tabs标签

最新推荐文章于 2025-08-11 19:52:03 发布

最新推荐文章于 2025-08-11 19:52:03 发布 · 106 阅读

文章标签：

#javascript #ViewUI

本教程指导您如何利用EasyUI库创建带有多个可动态添加或移除面板的Tabs组件，实现同一页面内展示不同实体。演示了创建包含三个面板的Tabs组件，以及通过点击关闭按钮操作面板的方法。

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

@author YHC

这个教程将告诉你如何使用easyui创建一个tabs 组件,Tabs 有多个panel可以动态的添加或移除,你可以使用tabs 显示不同的实体在相同的页面.

Tabs 一次仅仅显示一个panel,每个panel都有title,icon and close 按钮,当tabs 选中时对应的panel内容将显示.

查看 Demo

从HTML标记创建Tabs 包含一个DIV容器,和一些DIV panel.

<div class="easyui-tabs" style="width:400px;height:100px;">  
    <div title="First Tab" style="padding:10px;">  
        First Tab  
    </div>  
    <div title="Second Tab" closable="true" style="padding:10px;">  
        Second Tab  
    </div>  
    <div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">  
        Third Tab  
    </div>  
</div>

我们创建一个tabs 组件和3个panel,第二个和第三个panel可以通过点击close按钮关闭.