easyui_ 快速入门之tree树&&tabs选项卡

顾北良生

已于 2022-05-05 23:13:43 修改

阅读量812

点赞数

分类专栏： easyui 文章标签： elementui 蓝桥杯 linq

于 2022-05-05 23:10:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_67785529/article/details/124599906

版权

easyui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript实现树形控件和选项卡。对于树形控件，展示了如何使用<ul>和<li>标签创建树节点，并通过easyui库实现交互。同时，也提到了通过JavaScript动态加载数据的方法。在选项卡部分，通过<div>标签创建选项卡面板，可以设置标题、是否可关闭、图标等属性，并演示了如何通过Javascript创建和管理选项卡，包括监听选中事件。

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

一.使用案例（tree树）

1.树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中

<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>

2.树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

<ul id="tt"></ul>  

$('#tt').tree({    
    url:'tree_data.json'   
});

二.使用案例（tabs选项卡）

创建面板

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和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');    
    }    
});