首页 > 代码库 > Easyui 生成layout

Easyui 生成layout

Easyui 生成layout 

var $tabs;var $body;var $south;function appendLayout(title, href) {    if (!$body)        $body = $(document.body);    if (!$body.hasClass(‘layout‘)) {        var $centerHtml = $("<div>", {            "id": "center",            "style": "height:‘100%‘,overflow:auto",            "data-options": "region:‘center‘,split:true,collapsible:true"        });        $body.children().wrapAll($centerHtml); // 页面上的内容用 easyui layout center 包住        $tabs = $("<div>", {            "id": ‘tabs‘,            "data-options": "tools:‘#tab-tools‘"        });        $south = $("<div>", {            "id": "south",            "style": "height:280px;",            "data-options": "region:‘south‘,split:true"        }).append($tabs);        var aBtn = $("<a>", {            ‘style‘: ‘‘,            "href": "javascript:void(0);",            ‘class‘: ‘layout-button-down‘        });        var tools = $("<div>", {            ‘id‘: ‘tab-tools‘,            ‘class‘: ‘panel-tool‘        }).append(aBtn);        $body.append($south).append(tools).layout();        aBtn.on(‘click‘, function () {            closeLayout(true);        });        $tabs.tabs({            fit: true,            border: false,            onClose: function (title, index) {                var num = $(this).tabs(‘tabs‘).length;                if (num == 0)//所有的tab 都关闭时隐藏面板                {                    closeLayout();                }            }        });        $south.data(‘isExpand‘, true);    }    addTab(title, 1, href, null);}function addTab(title, id, href, text) {    if (!$south.data(‘isExpand‘)) {        openLayout();    }    var key = title + "<a  style=‘display:none‘>" + id + "</a>"    if ($tabs.tabs(‘exists‘, key)) {        $tabs.tabs(‘select‘, key);    }    else {        var html;        if (text) {            html = text;        }        else {            html = ‘<iframe id="zlifm-‘ + id + ‘" src="http://www.mamicode.com/‘ + href + ‘" width="100%" height="100%" class="main-content-itme"  frameborder="0"  style="border:0px; margin-bottom:-20px"   />‘;        }        $tabs.tabs("add", { title: key, content: html, closable: true });    }}function closeAllTab() {    var tts = $tabs.tabs("tabs");    var arr = new Array();    for (var i = 0; i < tts.length; i++) {        arr.push(tts[i].panel("options").title);    }    for (var i = 0; i < arr.length; i++) {        $tabs.tabs("close", arr[i]);    }}//打开面板function openLayout() {    if (!$south.data(‘isExpand‘))        $body.layout(‘expand‘, ‘south‘);    $south.data(‘isExpand‘, true);}//关闭面板function closeLayout(close) {    var isExpand = $south.data(‘isExpand‘) || !!close;    if (isExpand)        $body.layout(‘collapse‘, ‘south‘);    $south.data(‘isExpand‘, !isExpand);}

 

Easyui 生成layout