easyui的tabs控制

最新推荐文章于 2021-04-02 10:17:08 发布

涵ヂ

最新推荐文章于 2021-04-02 10:17:08 发布

阅读量467

点赞数

本文链接：https://blog.csdn.net/TZyybhs/article/details/106936940

版权

本文介绍了EasyUI的Tabs组件，详细讲解了依赖关系、创建面板（包括通过标签和JavaScript）、添加新选项卡面板、获取选择的选项卡、属性、事件、方法等内容，并提供了代码案例进行示例说明。

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

Tabs（选项卡）

tabs
代码案例

tabs

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

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

依赖关系

panel
linkbutton

使用案例

创建面板

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何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>   
</div>

2. 通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发’onSelect’事件。

$('#tt').tabs({
         
    border:false,    
    onSelect:function(title){
         
        alert(title+' is selected');    
    }    
});

添加新的选项卡面板

添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。

// add a new tab panel    
$('#tt').tabs('add',{
         
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{
         
        iconCls:&