EasyUI 动态添加标签页

最新推荐文章于 2021-06-10 02:52:43 发布

甲戌天火

最新推荐文章于 2021-06-10 02:52:43 发布

阅读量691

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/78262438

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>easyUI，洞天添加标签页函数</title>
    <!--第一步，引入样式库文件-->
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"/>
    <!--第二引入图标样式库文件-->
    <link rel="stylesheet" type="text/css" href="../themes/icon.css"/>
    <!--第三引入jquery文件-->
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <!--第四引入easyui文件-->
    <script src="../js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#accordion").accordion({
                height: 300
            });
            function addTab(title, url){
                if ($('#tabs').tabs('exists', title)){
                    $('#tabs').tabs('select', title);
                } else {
                    var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'"  style="width:100%;height:100%;"></iframe>';
                    $('#tabs').tabs('add',{
                        title:title,
                        content:content,
                        closable:true
                    });
                }
            }
            $("#tree").tree({
                url: '../json/tree.json',
                onClick: function (node) {
                    if (node.id == 11) {
                        addTab(node.text,'readstudent.html');
                    }
                    if (node.id == 12) {
                        addTab(node.text,'overstudent.html');
                    }
                    if (node.id == 13) {
                        addTab(node.text,'stopstudent.html');
                    }
                    if (node.id == 14) {
                        addTab(node.text,'addstudent.html');
                    }
                    if (node.id == 15) {
                        addTab(node.text,'class.html');
                    }
                }
            })
        })
    </script>
</head>
<body id="layout" class="easyui-layout">
<div data-options="region:'west',title:'导航',split:true" style="width:200px;">
    <ul id="tree">

    </ul>
</div>
<div style="width: 100%;height: 100%;" data-options="region:'center',split:true">
    <div style="width: 100%;height: 100%;float: left"  id="tabs" class="easyui-tabs" >
        <div title="主页">

        </div>
    </div>
</div>

</body>
</html>