EasyUi之Tabs(选项卡)

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

qq_46765422

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

阅读量285

点赞数

本文链接：https://blog.csdn.net/qq_46765422/article/details/107001271

版权

这篇博客介绍了如何使用EasyUi创建和管理Tabs（选项卡）。内容包括通过HTML标签和Javascript动态创建选项卡，添加带有小工具菜单的面板，以及如何获取选中的选项卡。同时提供了在JSP页面中调用JS代码的示例和最终效果的展示。

摘要由CSDN通过智能技术生成

@TOC

Tabs（选项卡）

使用$.fn.tabs.defaults重写默认值对象。

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。在这里插入图片描述

通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给

标签添加一个类ID’easyui-tabs’。每个选项卡面板都通过子

标签进行创建，用法和panel(面板)相同。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
<