EasyUI 动态添加标签页

来源：互联网发布：火线知乎编辑：程序博客网时间：2024/06/04 17:50
<!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>
阅读全文
0 0