easyui

目录

官方文档地址

布局组件：layout

选项卡组件：tabs

可折叠组件：Accordion

树组件：ztree（不是EasyUI的组件，独立使用）

---

官方文档地址

布局组件：layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <!-- 核心 -->
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <!-- 主题样式 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <!-- 默认的样式 -->
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <!-- 一些图标 （不是必须额）-->
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
</head>
<body class="easyui-layout">
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;"></div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:100px;"></div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;"></div>
</body>
</html>

选项卡组件：tabs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <!-- 核心 -->
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <!-- 主题样式 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <!-- 默认的样式 -->
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <!-- 一些图标 （不是必须额）-->
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <!--easyui中文国际化-->
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;">

</div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:300px;" class="easyui-accordion">

        <div title="Title1"  style="overflow:auto;padding:10px;">


        </div>
        <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
            content2
        </div>
        <div title="Title3">
            content3
        </div>


</div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;" class="easyui-tabs">

    <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>
</body>
</html>

可折叠组件：Accordion

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <!-- 核心 -->
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <!-- 主题样式 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <!-- 默认的样式 -->
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <!-- 一些图标 （不是必须额）-->
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <!--easyui中文国际化-->
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;">

</div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:300px;" class="easyui-accordion">

        <div title="Title1"  style="overflow:auto;padding:10px;">


        </div>
        <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
            content2
        </div>
        <div title="Title3">
            content3
        </div>


</div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;" >

</div>
</body>
</html>

树组件：ztree（不是EasyUI的组件，独立使用）

下载地址

链接：https://pan.baidu.com/s/179tKganBirBxgARgHHK2zQ 
提取码：43u6

引入js

 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/ztree/jquery.ztree.all.js"></script>

 
引入css

<link rel="stylesheet" href="../js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

步骤使用:

在需要的地方添加zTree标签

 <!--树节点-->
 <ul id="treeDemo" class="ztree"></ul>

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <!-- 导入easyui类库 -->
    <!-- 核心 -->
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <!-- 主题样式 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <!-- 默认的样式 -->
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <!-- 一些图标 （不是必须额）-->
    <!--easyui中文国际化-->
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!--zTree-->
    <link rel="stylesheet" href="../js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../js/ztree/jquery.ztree.all.js"></script>

</head>
<body class="easyui-layout">
<script type="text/javascript">
    $(function () {
        //设置
        var setting = {
            data: {
                //开启简单数据格式
                simpleData: {
                    enable: true
                },
            },
            //事件回调
            callback: {
                //点击事件
                onClick: onClick
            }
        };

        //数据 根据PId来体现父子关系,如果没有pId是普通的节点,注意I大写
        var zNodes = [
            {id: 1, pId: 0, name: "搜索引擎"},
            // 父节点搜索引擎id为1 百度为子节点pId=1.是搜索引擎的id page: 可以给节点添加其他自定义属性
            {id:101,pId:1,name:"百度",page:"https://www.baidu.com"},
            // 父节点百度id为101 百度百科为子节点pId=101.是百度的id
            {id:1001,pId:101,name:"百度百科"},
            // 父节点百度百科id为1001 谷歌为子节点pId=1001.是百度百科的id
            {id:102,pId:1001,name:"谷歌",page:"https://www.baidu.com"},
        ]
        //初始化
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        //菜单点击事件
        function onClick(event, treeId, treeNode, clickFlag) {
            // 判断树菜单节点是否含有 page属性
            if (treeNode.page!=undefined && treeNode.page!= "") {
                alert(treeNode.page)
                if ($("#tabs").tabs('exists', treeNode.name)) {// 判断tab是否存在
                    $('#tabs').tabs('select', treeNode.name); // 切换tab
                } else {
                    // 开启一个新的tab页面
                    var content = '<div style="width:100%;height:100%;overflow:hidden;">'
                        + '<iframe src="'
                        + treeNode.page
                        + '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';

                    $('#tabs').tabs('add', {
                        title : treeNode.name,
                        content : content,
                        closable : true,
                        tools:[{
                            iconCls:'icon-reload', // 刷新按钮
                            handler : function(){
                                var tab = $('#tabs').tabs('getTab',treeNode.name);
                                $("iframe[src='"+treeNode.page+"']").get(0).contentWindow.location.reload(true);
                            }
                        }]
                    });
                }
            }


        }

    })



</script>
<!--北-->
<div data-options="region:'north',title:'北',split:true" style="height:100px;">

</div>
<!--南-->
<div data-options="region:'south',title:'南',split:true" style="height:100px;"></div>
<!--东-->
<div data-options="region:'east',title:'东',split:true" style="width:100px;"></div>
<!--西-->
<div data-options="region:'west',title:'西',split:true" style="width:300px;" class="easyui-accordion">

    <div title="Title1" style="overflow:auto;padding:10px;">
        <!--树节点-->
        <ul id="treeDemo" class="ztree"></ul>

    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>


</div>
<!--中-->
<div data-options="region:'center',title:'中'" style="padding:5px;background:#eee;" class="easyui-tabs">

    <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>
</body>
</html>