轉眼似乎半個多月過去了，最近忙了點其他的事，所以這個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（實際點擊的時遮罩層）也可以實現窗體切換功能，當然，切換后要馬上把遮罩層隱掉。

　　今天就說要這里吧，下次我會把窗口移動、縮放的給大家說下，之所以要單獨把這個拎出來，是因為我這兩天就一直再搞這個，雖然現在弄好了，但感覺還是有點問題，需要優化的地方應該還有很多，所以下次我會把我的疑問拋出來，同時也希望得到大神們的解答。

總結

以上是生活随笔為你收集整理的EonerCMS——做一个仿桌面系统的CMS（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。