EonerCMS——做一個仿桌面系統的CMS（三）

　轉眼似乎半個多月過去了，最近忙了點其他的事，是以這個CMS做的進度也慢了，不過昨天和今天稍微加了點班，把最大的一塊制作OK了，也就是下面我要說的——

視窗

　　先看下視窗大緻構成圖吧：

　　視窗很簡單，頂部的标題區域、中間的展示區域和底部的功能區域。首先，視窗肯定是通過圖示點選後才生成的，也就是視窗不是事先加載并隐藏好，是點選某個圖示後再通過jquery寫入到頁面裡來，那我們要做的就是給圖示綁定一個建立視窗的事件，我們看下代碼：

<code>Core.create =</code><code>function</code><code>(obj){</code>

<code> </code><code>var</code> <code>sc = obj.attr(</code><code>'shortcut'</code><code>);</code>

<code> </code><code>var</code> <code>window_warp =</code><code>'window_'</code><code>+shortcut[sc][0]+</code><code>'_warp'</code><code>;</code>

<code> </code><code>var</code> <code>window_inner =</code><code>'window_'</code><code>+shortcut[sc][0]+</code><code>'_inner'</code><code>;</code>

<code> </code><code>var</code> <code>resizeTemp =</code><code>'<div resize="{resize_type}" style="position:absolute;overflow:hidden;background:url(img/transparent.gif) repeat;display:block;{css}"></div>'</code><code>;</code>

<code> </code><code>_cache.resize = {</code>

<code> </code><code>"t"</code><code>:</code><code>"left:0;top:-3px;width:100%;height:5px;z-index:1;cursor:n-resize"</code><code>,</code>

<code> </code><code>"r"</code><code>:</code><code>"right:-3px;top:0;width:5px;height:100%;z-index:1;cursor:e-resize"</code><code>,</code>

<code> </code><code>"b"</code><code>:</code><code>"left:0;bottom:-3px;width:100%;height:5px;z-index:1;cursor:s-resize"</code><code>,</code>

<code> </code><code>"l"</code><code>:</code><code>"left:-3px;top:0;width:5px;height:100%;z-index:1;cursor:w-resize"</code><code>,</code>

<code> </code><code>"rt"</code><code>:</code><code>"right:-3px;top:-3px;width:10px;height:10px;z-index:2;cursor:ne-resize"</code><code>,</code>

<code> </code><code>"rb"</code><code>:</code><code>"right:-3px;bottom:-3px;width:10px;height:10px;z-index:2;cursor:se-resize"</code><code>,</code>

<code> </code><code>"lt"</code><code>:</code><code>"left:-3px;top:-3px;width:10px;height:10px;z-index:2;cursor:nw-resize"</code><code>,</code>

<code> </code><code>"lb"</code><code>:</code><code>"left:-3px;bottom:-3px;width:10px;height:10px;z-index:2;cursor:sw-resize"</code>

<code> </code><code>$(</code><code>'#desk'</code><code>).append(</code><code>'<div id="'</code><code>+window_warp+</code><code>'" window="'</code><code>+shortcut[sc][0]+</code><code>'" class="window-container window-current" style="width:'</code><code>+shortcut[sc][4]+</code><code>'px;height:'</code><code>+shortcut[sc][5]+</code><code>'px;top:'</code><code>+shortcut[sc][6]+</code><code>'px;left:'</code><code>+shortcut[sc][7]+</code><code>'px;z-index:'</code><code>+Core.config.createIndexid+</code><code>'"><div id="'</code><code>+window_inner+</code><code>'" style="height:100%"></div></div>'</code><code>);</code>

<code> </code><code>$(</code><code>"#"</code><code>+window_warp).data(</code><code>"info"</code><code>,{width:shortcut[sc][4],height:shortcut[sc][5],top:shortcut[sc][6],left:shortcut[sc][7]});</code>

<code> </code><code>Core.config.createIndexid += 1;</code>

<code> </code><code>$(</code><code>'#'</code><code>+window_inner).append(</code><code>'<div class="title-bar">'</code><code>+shortcut[sc][1]+</code><code>'<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>'</code><code>);</code>

<code> </code><code>$(</code><code>'#'</code><code>+window_inner).append(</code><code>'<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'</code><code>+shortcut[sc][0]+</code><code>'" src="'</code><code>+shortcut[sc][3]+</code><code>'"></iframe></div>'</code><code>);</code>

<code> </code><code>$(</code><code>'#'</code><code>+window_inner).append(</code><code>'<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>'</code><code>);</code>

<code> </code><code>for</code><code>(</code><code>var</code> <code>k</code><code>in</code> <code>_cache.resize){</code>

<code> </code><code>var</code> <code>ele = FormatModel(resizeTemp,{resize_type:k, css:_cache.resize[k]});</code>

<code> </code><code>$(</code><code>'#'</code><code>+window_inner).append(ele);</code>

<code> </code><code>//綁定視窗移動事件</code>

<code> </code><code>Core.bindWindowMove($(</code><code>'#'</code><code>+window_warp));</code>

<code> </code><code>//綁定視窗縮放事件</code>

<code> </code><code>Core.bindWindowResize($(</code><code>'#'</code><code>+window_warp));</code>

<code> </code><code>//綁定視窗功能按鈕事件</code>

<code> </code><code>Core.handle($(</code><code>'#'</code><code>+window_warp));</code>

　　我們先從這裡看起，因為之前的定義：

<code>$(</code><code>'#desk'</code><code>).append(</code><code>'<div id="'</code><code>+window_warp+</code><code>'" window="'</code><code>+shortcut[sc][0]+</code><code>'" class="window-container window-current" style="width:'</code><code>+shortcut[sc][4]+</code><code>'px;height:'</code><code>+shortcut[sc][5]+</code><code>'px;top:'</code><code>+shortcut[sc][6]+</code><code>'px;left:'</code><code>+shortcut[sc][7]+</code><code>'px;z-index:'</code><code>+Core.config.createIndexid+</code><code>'"><div id="'</code><code>+window_inner+</code><code>'" style="height:100%"></div></div>'</code><code>);　（1）</code>

<code>$(</code><code>"#"</code><code>+window_warp).data(</code><code>"info"</code><code>,{width:shortcut[sc][4],height:shortcut[sc][5],top:shortcut[sc][6],left:shortcut[sc][7]});　（2）</code>

<code>Core.config.createIndexid += 1;　（3）</code>

<code>$(</code><code>'#'</code><code>+window_inner).append(</code><code>'<div class="title-bar">'</code><code>+shortcut[sc][1]+</code><code>'<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>'</code><code>);　（4）</code>

<code>$(</code><code>'#'</code><code>+window_inner).append(</code><code>'<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'</code><code>+shortcut[sc][0]+</code><code>'" src="'</code><code>+shortcut[sc][3]+</code><code>'"></iframe></div>'</code><code>);　（5）</code>

<code>$(</code><code>'#'</code><code>+window_inner).append(</code><code>'<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>'</code><code>);　（6）</code>

　　（1）這裡我先給#desk增加了一個div，這個div也就是整個窗體的div，并且這個窗體的是為使用狀态，因為建立的視窗肯定為使用狀态的，不會覆寫在其他視窗下面，是以在樣式裡我寫了z-index，并且這個值不是固定死的，（3）我在添完後馬上對這個全局變量z-index進行了加1，這樣就可以保證之後建立的窗體能出現在最上面。

　　（2）在添加完窗體後我馬上對這個窗體綁定了它的資料，分别是width、height、top、left，這個之後會說有什麼用，先跳過。

　　（4）然後我加入窗體必備的4個按鈕，最小化、最大化、還原、關閉，當然其中還原按鈕是隐藏着的。

　　（5）然後我加載的iframe，用于顯示需要加載的頁面

　　（6）最後我加入了底部功能欄

　　然後看下這段代碼：

<code>for</code><code>(</code><code>var</code> <code>k</code><code>in</code> <code>_cache.resize){</code>

<code> </code><code>var</code> <code>ele = FormatModel(resizeTemp,{resize_type:k, css:_cache.resize[k]});</code>

<code> </code><code>$(</code><code>'#'</code><code>+window_inner).append(ele);</code>

　　這個數組長度為8，也就是這個循環一共添加了8個div，那麼這8個div到底是什麼東西呢，看下這張圖就明白了：

　　對了，就是8個方向，相信有童鞋應該知道是幹嘛用的了，就是之後窗體縮放需要用到了，我會對這8個div分别綁定事件，讓他們實作對窗體大小的縮放功能。

　　至此，窗體添加的功能大緻完畢，但還需要完善，比如同個圖示的窗體已經建立過，就不需要繼續建立了，而隻需把窗體的樣式改變下，比如修改成使用狀态，并且把z-index的值修改最高。具體代碼我就不貼出來了，留給大家去分析吧。

工作列

　　建立窗體的同時，也需要建立工作列，代碼很簡單，稍微看下吧：

<code>$(</code><code>'.task-window li b'</code><code>).removeClass(</code><code>'focus'</code><code>);</code>

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

　　原理就是在添加前，把工作列裡現有的任務選中樣式清除，然後添加新的任務。

切換視窗

　　切換視窗就是當我同時打開2個以上視窗時，直接在視窗上，或者工作列裡切換視窗的事件，功能比較簡單，先看下代碼，然後我再稍微把思路說下。

<code>Core.taskwindow =</code><code>function</code><code>(obj){</code>

<code> </code><code>var</code> <code>window_warp =</code><code>'window_'</code><code>+obj.attr(</code><code>'window'</code><code>)+</code><code>'_warp'</code><code>;</code>

<code> </code><code>var</code> <code>window_inner =</code><code>'window_'</code><code>+obj.attr(</code><code>'window'</code><code>)+</code><code>'_inner'</code><code>;</code>

<code> </code><code>//改變工作列樣式</code>

<code> </code><code>$(</code><code>'.task-window li b'</code><code>).removeClass(</code><code>'focus'</code><code>);</code>

<code> </code><code>obj.children(</code><code>'b'</code><code>).addClass(</code><code>'focus'</code><code>);</code>

<code> </code><code>//改變視窗樣式</code>

<code> </code><code>$(</code><code>'.window-container'</code><code>).removeClass(</code><code>'window-current'</code><code>);</code>

<code> </code><code>$(</code><code>'#'</code><code>+window_warp).addClass(</code><code>'window-current'</code><code>).css({</code><code>'z-index'</code><code>:Core.config.createIndexid}).show();</code>

<code> </code><code>//改變視窗遮罩層樣式</code>

<code> </code><code>$(</code><code>'.window-frame'</code><code>).children(</code><code>'div'</code><code>).show();</code>

<code> </code><code>$(</code><code>'#'</code><code>+window_inner+</code><code>' .window-frame'</code><code>).children(</code><code>'div'</code><code>).hide();</code>

<code>Core.container =</code><code>function</code><code>(obj){</code>

<code> </code><code>$(</code><code>'.task-window li[window="'</code><code>+obj.attr(</code><code>'window'</code><code>)+</code><code>'"] b'</code><code>).addClass(</code><code>'focus'</code><code>);</code>

<code> </code><code>obj.addClass(</code><code>'window-current'</code><code>).css({</code><code>'z-index'</code><code>:Core.config.createIndexid});</code>

<code> </code><code>obj.find(</code><code>'.window-frame'</code><code>).children(</code><code>'div'</code><code>).hide();</code>

　　大緻思路就是，當我點選工作列裡某個任務，找到與這個任務相對應的視窗，讓它顯示并更新z-index，然後把自己修改成選中狀态，同理點選視窗時也會觸發一個類似這樣的事件，可以通過兩個function裡的注釋看到，代碼執行流程幾乎都是一樣的。

　　這裡有個小技巧，還記得視窗由哪三部分構成麼？頂部、中間和底部，中間是iframe。小技巧就是，當我建立窗體時，給iframe加了一個div遮罩層，寬高剛好和iframe一樣，當窗體不在使用狀态時，比如被别的視窗覆寫在下面，那個遮罩層就顯示出來，剛好把iframe蓋住，因為遮罩層是透明了，是以看上去沒有差異。為什麼要這麼做呢，因為這樣，在切換視窗時，點選事件可以不單單隻寫在頂部的标題區域，在點選iframe（實際點選的時遮罩層）也可以實作窗體切換功能，當然，切換後要馬上把遮罩層隐掉。

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

本文轉自胡尐睿丶部落格園部落格，原文連結：http://www.cnblogs.com/hooray/archive/2011/09/17/2179368.html，如需轉載請自行聯系原作者

EonerCMS——做一個仿桌面系統的CMS（三）

繼續閱讀

一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑

前端學習之路---移動web開發（二）

css雪碧圖（css sprite）

移動端touch事件和滑鼠事件

Angular——子產品懶加載

在2016年如何學習JavaScript？

實用css技巧——清除浮動方法總結

css3中的結構僞類選擇器

圖檔下載下傳圖檔放大

mockjs 的正确使用姿勢mockjs fetch的使用思路

css display={block,inline,inline-block}的認識

前端開發日記之window.onload

webstorm中配置git

Vue圖檔切換過渡設計

測試工程師面試解析～

2018年不想被web前端開發淘汰，你需要掌握哪些技術？