easyui 动态选项卡

最新推荐文章于 2023-07-13 11:41:42 发布

快乐de馒头

最新推荐文章于 2023-07-13 11:41:42 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/47019375

版权

这个博客展示了如何使用EasyUI库创建一个包含动态选项卡的界面。在页面布局中，有北、南、西、中四个区域。西部区域是一个可拆分的导航菜单，包含导航1和导航2两个条目，点击导航项可以动态添加新的选项卡，如百度和163，选项卡内容以iframe形式加载相应网站。通过`addTab`函数实现了选项卡的添加和选择功能。

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

<body class="easyui-layout">
        <div data-options="region:'north',title:''"  style=" height: 100px;"></div>
        <div data-options="region:'south'" style=" height: 30px;"></div>
        <div data-options="region:'west',split:true" title="导航菜单" style=" width: 160px;">
            <ul class="easyui-tree">
                <li><span><a href="">导航1</a></span></li>
                <li><span><a href="">导航2</a></span>
                    <ul>
                        <li><span><a href="#" οnclick="addTab('百度','http://www.baidu.com')">百度</a></span></li>
                        <li><span><a href="#" οnclick="addTab('163','http://www.163.com')">163</a></span></li>
                    </ul>
                </li>
            </ul>

        </div>
        <div data-options="region:'center'"   >
            <div id="tt" class="easyui-tabs" style="width:auto;height:800px;">
                <div title="开始">
                </div>
            </div>
        </div>

    <script>
        function addTab(title, url){
            if ($('#tt').tabs('exists', title)){
                $('#tt').tabs('select', title);
            } else {
                var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
                $('#tt').tabs('add',{
                    title:title,
                    content:content,
                    closable:true
                });
            }
        }

    </script>

    </body>