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前端开发淘汰，你需要掌握哪些技术？