easyui布局加TAB

来源：互联网发布：多核优化的游戏编辑：程序博客网时间：2024/05/16 01:49

1、创建布局页面

<body class="easyui-layout">    <div id="top" data-options="region:'north'" style="height:80px;background:#E0ECFF">        <div id="divRequest"></div>    </div>    <div data-options="region:'west',split:true,title:'菜单导航'" style="width:180px;">        <ul id="menuTree" data-options="fit:true">            </ul>    </div>    <div data-options="region:'center'" style="background:#eee;padding :0;">        <div id="tabs" class="easyui-tabs" data-options="fit:true,border:false">        </div>    </div></body>

2编写easyui

$(function () {    $('#menuTree').tree({        url: '/Friut/GetAllMenus',        lines: true,        animate: true,        onClick: function (node) {            if (node.attributes.Url) {                newTab(node);            }        }    });    //设置tab页的首页    $('#tabs').tabs('add', {        title: '首页',        content: newIframe("/Friut/TabIndex"),        closable: false,        fit: true,    })    function newIframe(url) {        var ifrStr = "<iframe src='" + url + "' style='width:100%;height:100%;border:0px solid#000;'></iframe>";        return ifrStr;    }    //打开菜单对应的页面    function newTab(treeNode) {        var $tabs = $('#tabs');        if ($tabs.tabs('exists', treeNode.text)) {            var currTab = $tabs.tabs("getSelected");            var currTitle = currTab.panel('options').title;            if (treeNode.text == currTitle) {                $tabs.tabs('update', {                    tab: currTab,                    options: {                        content: newIframe(treeNode.attributes.Url),                    }                })            }            $tabs.tabs('select', treeNode.text);        } else {            $tabs.tabs('add', {                title: treeNode.text,                content: newIframe(treeNode.attributes.Url),                fit: true,                closable: true,            })        }            }})

0 0