求jquery的layout如何嵌套使用（解决立即给分）

Question

现在要求页面布局分为west和center，center中，有要分为north、center、south，求如和实现。

Answer 1

别人写的jslayout插件 可以分为 north、center、south
/*!
 * jLayout JQuery Plugin v0.17
 *
 * Licensed under the new BSD License.
 * Copyright 2008-2009 Bram Stein
 * All rights reserved.
 */
/*global jQuery jLayout*/
if (jQuery && jLayout) {
(function ($) {
/**
 * This wraps jQuery objects in another object that supplies
 * the methods required for the layout algorithms.
 */
function wrap(item, resize) {
var that = {}; $.each(['min', 'max'], function (i, name) {
that[name + 'imumSize'] = function (value) {
                    var l = item.data('jlayout');
                    
if (l) {
return l[name + 'imum'](that);
} else {
return item[name + 'Size'](value);
}
};
}); $.extend(that, {
doLayout: function () {
                    var l = item.data('jlayout');
                    
if (l) {
                        l.layout(that);
}
item.css({position: 'absolute'});
},
isVisible: function () {
return item.isVisible();
},
insets: function () {
var p = item.padding(),
b = item.border(); return {
                        'top': p.top, 
'bottom': p.bottom + b.bottom + b.top, 
'left': p.left, 
'right': p.right + b.right + b.left
                    };
},
bounds: function (value) {
var tmp = {}; if (value) {
if (typeof value.x === 'number') {
tmp.left = value.x;
}
if (typeof value.y === 'number') {
tmp.top = value.y;
}
if (typeof value.width === 'number') {
tmp.width = (value.width - (item.outerWidth(true) - item.width()));
tmp.width = (tmp.width >= 0) ? tmp.width : 0;
}
if (typeof value.height === 'number') {
tmp.height = value.height - (item.outerHeight(true) - item.height());
tmp.height = (tmp.height >= 0) ? tmp.height : 0;
}
item.css(tmp);
return item;
} else {
tmp = item.position();
return {
                           'x': tmp.left,
                         'y': tmp.top,
'width': item.outerWidth(false),
'height': item.outerHeight(false)
                        };
}
},
preferredSize: function () {
var minSize,
maxSize,
margin = item.margin(),
size = {width: 0, height: 0},
                        l = item.data('jlayout'); if (l && resize) {
size = l.preferred(that); minSize = that.minimumSize();
maxSize = that.maximumSize(); size.width += margin.left + margin.right;
size.height += margin.top + margin.bottom; if (size.width < minSize.width || size.height < minSize.height) {
size.width = Math.max(size.width, minSize.width);
size.height = Math.max(size.height, minSize.height);
} else if (size.width > maxSize.width || size.height > maxSize.height) {
size.width = Math.min(size.width, maxSize.width);
size.height = Math.min(size.height, maxSize.height);
}
} else {
                        size = that.bounds();
size.width += margin.left + margin.right;
size.height += margin.top + margin.bottom;
}
return size;
}
});
return that;
} $.fn.layout = function (options) {
var opts = $.extend({}, $.fn.layout.defaults, options);
return $.each(this, function () {
var element = $(this),
o = $.metadata && element.metadata().layout ? $.extend(opts, element.metadata().layout) : opts,
elementWrapper = wrap(element, o.resize); if (o.type === 'border' && typeof jLayout.border !== 'undefined') {                
$.each(['north', 'south', 'west', 'east', 'center'], function (i, name) {
if (element.children().hasClass(name)) {
o[name] = wrap(element.children('.' + name + ':first'));
}
});
element.data('jlayout', jLayout.border(o));
} else if (o.type === 'grid' && typeof jLayout.grid !== 'undefined') {
o.items = [];
element.children().each(function (i) {
if (!$(this).hasClass('ui-resizable-handle')) {
o.items[i] = wrap($(this));
}
});
element.data('jlayout', jLayout.grid(o));
} else if (o.type === 'flexGrid' && typeof jLayout.flexGrid !== 'undefined') {
o.items = [];
element.children().each(function (i) {
if (!$(this).hasClass('ui-resizable-handle')) {
o.items[i] = wrap($(this));
}
});
element.data('jlayout', jLayout.flexGrid(o));
} else if (o.type === 'column' && typeof jLayout.column !== 'undefined') {
o.items = [];
element.children().each(function (i) {
if (!$(this).hasClass('ui-resizable-handle')) {
o.items[i] = wrap($(this));
}
});
element.data('jlayout', jLayout.column(o));
} else if (o.type === 'flow' && typeof jLayout.flow !== 'undefined') {
o.items = [];
element.children().each(function (i) {
if (!$(this).hasClass('ui-resizable-handle')) {
o.items[i] = wrap($(this));
}
});
element.data('jlayout', jLayout.flow(o));
}
                
if (o.resize) {
elementWrapper.bounds(elementWrapper.preferredSize());
}
                
elementWrapper.doLayout();
element.css({position: 'relative'});
if ($.ui !== undefined) {
element.addClass('ui-widget');
}
});
}; $.fn.layout.defaults = {
resize: true,
type: 'grid'
};
})(jQuery);
}

Answer 2

$('#my-container').layout();<div id="my-container" class="{layout: {type: 'border' }}">
    <div class="center">Center</div>
    <div class="north">North</div>
    <div class="center">Center?</div>
</div>

Answer 3

四楼的就可以，再加上样式。如果是js可以拼接字符长，然后innerHtml

Answer 4

<div region="center" border="false" split="true">
    <div class="easyui-layout" fit="true">
        <div region="north" split="true">
        </div>
        <div region="center" split="true">
        </div>
        <div region="south" split="true">
        </div>
    </div>
</div>