NHibernate+spring.net+jquery打造UI控件库系列(两部分)------页面布局

今天吃了5碗白饭，战斗力超强吧。心情好，当然要抽点时间写点东西哦。

接着上篇UI核心库,今天主要实现了界面布局，当然是一般的布局，不能和EXT的布局相提并论的。我也不喜欢EXT的布局，强大的配置背后以牺牲性能为代价。JQUERY的目标就是最少的代码实现你要的功能

直接上效果图:



这个是个典型的上中下+左右布局：

初步设计:勾画框架:

<div id="sw-container" class="sw-container">
<div id="sw-header" class="sw-header">头部</div>
<div id="sw-nav" class="sw-nav">导航</div>
<div id="sw-main" class="sw-main">
<div id="leftside">主体-左边内容</p></div>
<div id="centercontent">主体-主要内容</div>
<div class="clear"></div>
</div>
<div id="sw-footer" class="sw-footer">底部</div>
</div>

再加上相关的样式结果就出来。只是中间的高度处理是个问题?

这里该是写控件的时间啦

目标是：$("#sw-container").Layout(option);

其中：option= {
header: "#sw-header",
nav: "#sw-nav", //如果没有传入false
main:"#sw-main",
footer: "#sw-footer"//如果没有传入false
}

按照我们的目标，具体实现如下:

$.fn.extend({
Layout: function(options) {
return this.each(function() {
new $.sw.layout(this, options);
});
}
});
$.sw.layout = function(container, options) {
// setup configuration
this.options = options = $.extend({}, $.sw.layout.defaults, options);
this.element = container;
var elementArray = [];
$(container).addClass("sw-container");
if (options.header) {
$(options.header).addClass("sw-header");
elementArray.push($(options.header));
}
if (options.nav) {
$(options.nav).addClass("sw-nav");
elementArray.push(options.nav);
}
if (options.main.id) {
$(options.main.id).addClass("sw-main");
}
if (options.footer) {
$(options.footer).addClass("sw-footer");
elementArray.push(options.footer);
}
var size = Sw.Size.fromElement(window)
size.applyTo(document.body);
size.applyTo(container);
size.applyWidthTo(options.main.id);
var mainSize = new Sw.Size(size.width, (size.height - Sw.Size.fromArray(elementArray, 2).height));
mainSize.applyHeightTo(options.main.id);
//layout
//如果右边有菜单，大家可以扩展
if (options.main.left) {
$(options.main.left.id).sidebar({ id: options.main.left.id, centerContainer: options.main.center.id, region: "left" }, options.main.id);
//alert($(options.main.id).html())
}

};

结果是意料之中的，呵呵。但是问题又来啦。中间的布局又怎么实现呢？

不急,我们先分析下：中间布局一般有:左右，左中右

下面我以左右为例:当然大家可以参考扩展更多的布局

$.fn.sidebar = function(options, parent) {
var op = $.extend({ id: "#leftside", centerContainer: "#centercontent", region: "left", title: "左边菜单" }, options);
return this.each(function() {
var me = this;
//这时只是初步实现,以后会优化
var size = Sw.Size.fromElement(parent);
if ($("#"+ op.region + "Sidebar").html() == null) {
//bar
var bar = $("<div/>").attr("id", op.region + "Sidebar").height(size.height - 2).append($(me).html()).prependTo($(me).empty());
var barCollapse = $("<div/>").addClass("toggleCollapse").append($("<h2/>").html(op.title)).prependTo(bar);
var barToggle = $("<div/>").text("收缩").appendTo(barCollapse);
$(op.centerContainer).height(size.height - 2).width(size.width - Sw.Size.fromElement(me, 2).width - 1);
barToggle.click(function() {
bar.hide();
barClone.show();
$(op.centerContainer).height(size.height - 2).width(size.width - Sw.Size.fromElement(me, 2).width - 1);
});
}
if ($("#"+ op.region + "SidebarClone").html() == null) {
//bar clone
var barClone = $("<div/>").attr("id", op.region + "SidebarClone").hide().prependTo(me);
var barCloneCollapse = $("<div/>").addClass("collapse").height(size.height - 2).append("<div class='toggleCollapse'><div></div></div>").prependTo(barClone);
barCloneCollapse.click(function() {
bar.show();
barClone.hide();
$(op.centerContainer).height(size.height - 2).width(size.width - Sw.Size.fromElement(me, 2).width - 1);
});

}
});
}

哇，终于完工啦.由于时间的关系我只是在Safari下测试过。有问题大家留言我.

写这个系列我不是为了什么，只是觉得这里给予我太多，我也应该写点东西反馈下自己所学。目的只有一个，大家共同进步。只是有点遗憾，大家看起来好像对这个系列不大感冒。呵呵，不论怎么样，我会努力写下去。代码下载