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="' + 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);
}