EonerCMS——做一个仿桌面系统的CMS（三）

　　转眼似乎半个多月过去了，最近忙了点其他的事，所以这个CMS做的进度也慢了，不过昨天和今天稍微加了点班，把最大的一块制作OK了，也就是下面我要说的——

窗口

　　先看下窗口大致构成图吧：

　　窗口很简单，顶部的标题区域、中间的展示区域和底部的功能区域。首先，窗口肯定是通过图标点击后才生成的，也就是窗口不是事先加载并隐藏好，是点击某个图标后再通过jquery写入到页面里来，那我们要做的就是给图标绑定一个创建窗口的事件，我们看下代码：

//创建窗体
Core.create = function(obj){
	var sc = obj.attr('shortcut');
	var window_warp = 'window_'+shortcut[sc][0]+'_warp';
	var window_inner = 'window_'+shortcut[sc][0]+'_inner';
	var resizeTemp = '<div resize="{resize_type}" style="position:absolute;overflow:hidden;background:url(img/transparent.gif) repeat;display:block;{css}"></div>';
	_cache.resize = { 
		"t":"left:0;top:-3px;width:100%;height:5px;z-index:1;cursor:n-resize",
		"r":"right:-3px;top:0;width:5px;height:100%;z-index:1;cursor:e-resize",
		"b":"left:0;bottom:-3px;width:100%;height:5px;z-index:1;cursor:s-resize",
		"l":"left:-3px;top:0;width:5px;height:100%;z-index:1;cursor:w-resize",
		"rt":"right:-3px;top:-3px;width:10px;height:10px;z-index:2;cursor:ne-resize",
		"rb":"right:-3px;bottom:-3px;width:10px;height:10px;z-index:2;cursor:se-resize",
		"lt":"left:-3px;top:-3px;width:10px;height:10px;z-index:2;cursor:nw-resize",
		"lb":"left:-3px;bottom:-3px;width:10px;height:10px;z-index:2;cursor:sw-resize"
	};
	$('#desk').append('<div id="'+window_warp+'" window="'+shortcut[sc][0]+'" class="window-container window-current" style="width:'+shortcut[sc][4]+'px;height:'+shortcut[sc][5]+'px;top:'+shortcut[sc][6]+'px;left:'+shortcut[sc][7]+'px;z-index:'+Core.config.createIndexid+'"><div id="'+window_inner+'" style="height:100%"></div></div>');
	$("#"+window_warp).data("info",{width:shortcut[sc][4],height:shortcut[sc][5],top:shortcut[sc][6],left:shortcut[sc][7]});
	Core.config.createIndexid += 1;
	$('#'+window_inner).append('<div class="title-bar">'+shortcut[sc][1]+'<div class="title-handle"><a class="ha-hide" btn="hide" href="#ha-hide">最小化</a><a class="ha-max" btn="max" href="#ha-max">最大化</a><a class="ha-revert" btn="revert" href="#ha-revert" style="display:none">还原</a><a class="ha-close" btn="close" href="#ha-close">关闭</a></div></div>');
	$('#'+window_inner).append('<div class="window-frame"><div style="z-index:9000000;background:none;height:100%;position:absolute;width:100%;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;display:none"></div><iframe frameborder="0" id="frame'+shortcut[sc][0]+'" src="'+shortcut[sc][3]+'"></iframe></div>');
	$('#'+window_inner).append('<div class="set-bar"><div class="fr"><a id="refresh" class="btn"><i class="icon ico-refresh"></i><span class="btn-con">刷新</span></a></div></div>');
	for(var k in _cache.resize){
		var ele = FormatModel(resizeTemp,{resize_type:k, css:_cache.resize[k]});
		$('#'+window_inner).append(ele);
	}
	//绑定窗口移动事件
	Core.bindWindowMove($('#'+window_warp));
	//绑定窗口缩放事件
	Core.bindWindowResize($('#'+window_warp));
	//绑定窗口功能按钮事件
	Core.handle($('#'+window_warp));
};

　　我们先从这里看起，因为之前的定义：

	$('#desk').append('<div id="'+window_warp+'" window="'+shortcut[sc][0]+'" class="window-container window-current" style="width:'+shortcut[sc][4]+'px;height:'+shortcut[sc][5]+'px;top:'+shortcut[sc][6]+'px;left:'+shortcut[sc][7]+'px;z-index:'+Core.config.createIndexid+'"><div id="'+window_inner+'" style="height:100%"></div></div>');　（1）
	$("#"+window_warp).data("info",{width:shortcut[sc][4],height:shortcut[sc][5],top:shortcut[sc][6],left:shortcut[sc][7]});　（2）
	Core.config.createIndexid += 1;　（3）
	$('#'+window_inner).append('<div class="title-bar">'+shortcut[sc][1]+'<div class="title-handle"><a class="ha-hide" btn="hide" href="#ha-hide">最小化</a><a class="ha-max" btn="max" href="#ha-max">最大化</a><a class="ha-revert" btn="revert" href="#ha-revert" style="display:none">还原</a><a class="ha-close" btn="close" href="#ha-close">关闭</a></div></div>');　（4）
	$('#'+window_inner).append('<div class="window-frame"><div style="z-index:9000000;background:none;height:100%;position:absolute;width:100%;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;display:none"></div><iframe frameborder="0" id="frame'+shortcut[sc][0]+'" src="'+shortcut[sc][3]+'"></iframe></div>');　（5）
	$('#'+window_inner).append('<div class="set-bar"><div class="fr"><a id="refresh" class="btn"><i class="icon ico-refresh"></i><span class="btn-con">刷新</span></a></div></div>');　（6）

　　（1）这里我先给#desk增加了一个div，这个div也就是整个窗体的div，并且这个窗体的是为使用状态，因为新建的窗口肯定为使用状态的，不会覆盖在其他窗口下面，所以在样式里我写了z-index，并且这个值不是固定死的，（3）我在添完后马上对这个全局变量z-index进行了加1，这样就可以保证之后新建的窗体能出现在最上面。

　　（2）在添加完窗体后我马上对这个窗体绑定了它的数据，分别是width、height、top、left，这个之后会说有什么用，先跳过。

　　（4）然后我加入窗体必备的4个按钮，最小化、最大化、还原、关闭，当然其中还原按钮是隐藏着的。

　　（5）然后我加载的iframe，用于显示需要加载的页面

　　（6）最后我加入了底部功能栏

　　然后看下这段代码：

	for(var k in _cache.resize){
		var ele = FormatModel(resizeTemp,{resize_type:k, css:_cache.resize[k]});
		$('#'+window_inner).append(ele);
	}

　　上面我定义了一个数组（_cache.resize），这里在对它进行循环，在循环体内我用了一个FormatModel()，这个方法我在上篇文章里提到过，就不再介绍用法了：《自己写的一个分享按钮的插件（可扩展，内附开发制作流程）》

　　这个数组长度为8，也就是这个循环一共添加了8个div，那么这8个div到底是什么东西呢，看下这张图就明白了：

　　对了，就是8个方向，相信有童鞋应该知道是干嘛用的了，就是之后窗体缩放需要用到了，我会对这8个div分别绑定事件，让他们实现对窗体大小的缩放功能。

　　至此，窗体添加的功能大致完毕，但还需要完善，比如同个图标的窗体已经创建过，就不需要继续创建了，而只需把窗体的样式改变下，比如修改成使用状态，并且把z-index的值修改最高。具体代码我就不贴出来了，留给大家去分析吧。

任务栏

　　创建窗体的同时，也需要创建任务栏，代码很简单，稍微看下吧：

	$('.task-window li b').removeClass('focus');
	$('.task-window').append('<li window="'+shortcut[sc][0]+'"><b class="focus"><img src="'+shortcut[sc][2]+'"><span>'+shortcut[sc][1]+'</span></b></li>');

　　原理就是在添加前，把任务栏里现有的任务选中样式清除，然后添加新的任务。

切换窗口

　　切换窗口就是当我同时打开2个以上窗口时，直接在窗口上，或者任务栏里切换窗口的事件，功能比较简单，先看下代码，然后我再稍微把思路说下。

//任务栏
Core.taskwindow = function(obj){
	var window_warp = 'window_'+obj.attr('window')+'_warp';
	var window_inner = 'window_'+obj.attr('window')+'_inner';
	//改变任务栏样式
	$('.task-window li b').removeClass('focus');
	obj.children('b').addClass('focus');
	//改变窗口样式
	$('.window-container').removeClass('window-current');
	$('#'+window_warp).addClass('window-current').css({'z-index':Core.config.createIndexid}).show();
	//改变窗口遮罩层样式
	$('.window-frame').children('div').show();
	$('#'+window_inner+' .window-frame').children('div').hide();
	Core.config.createIndexid += 1;
};

//窗口
Core.container = function(obj){
	//改变任务栏样式
	$('.task-window li b').removeClass('focus');
	$('.task-window li[window="'+obj.attr('window')+'"] b').addClass('focus');
	//改变窗口样式
	$('.window-container').removeClass('window-current');
	obj.addClass('window-current').css({'z-index':Core.config.createIndexid});
	//改变窗口遮罩层样式
	$('.window-frame').children('div').show();
	obj.find('.window-frame').children('div').hide();
	Core.config.createIndexid += 1;
};

　　大致思路就是，当我点击任务栏里某个任务，找到与这个任务相对应的窗口，让它显示并更新z-index，然后把自己修改成选中状态，同理点击窗口时也会触发一个类似这样的事件，可以通过两个function里的注释看到，代码执行流程几乎都是一样的。

　　这里有个小技巧，还记得窗口由哪三部分构成么？顶部、中间和底部，中间是iframe。小技巧就是，当我创建窗体时，给iframe加了一个div遮罩层，宽高刚好和iframe一样，当窗体不在使用状态时，比如被别的窗口覆盖在下面，那个遮罩层就显示出来，刚好把iframe盖住，因为遮罩层是透明了，所以看上去没有差异。为什么要这么做呢，因为这样，在切换窗口时，点击事件可以不单单只写在顶部的标题区域，在点击iframe（实际点击的时遮罩层）也可以实现窗体切换功能，当然，切换后要马上把遮罩层隐掉。

　　今天就说要这里吧，下次我会把窗口移动、缩放的给大家说下，之所以要单独把这个拎出来，是因为我这两天就一直再搞这个，虽然现在弄好了，但感觉还是有点问题，需要优化的地方应该还有很多，所以下次我会把我的疑问抛出来，同时也希望得到大神们的解答。