窗体制作 – 开发WebOS(二)

By | 2013年12月14日

花了将近一天的时间终于将样子看上去还行的窗体画出来了,再次感谢@Hooray 的博客,感谢Web+, 有他们的思路,真实代码,我就厚着脸皮直接模仿了,呵呵。
参考@Hooray和web+加上自己的理解画出来的窗体结构跟以上2位均不相同,这是因为自己DIV+CSS处理页面的水平实在有限,对前端布局设计之类的完全没有概念,模仿web+的结构和自认为用简单的结构画出来的界面。结果图如下:
2

html结构如下:3

为了实现窗体边缘的8个方向的调整大小的按钮,这里实际上在窗体周围增加了8个层来实现的。

经过画窗体这个过程,开始慢慢对css熟悉起来了,界面花完了,当然是开始开发功能了,这里我遇到一个问题,就是关于代码如何组织的问题,对js的设计模式完全不懂,唯一知道的一个还是工厂模式,关于这点,我同时也在看@汤姆大叔 的深入理解Javascript系列>的文章,只能边看边学习同时慢慢应用了。
针对窗体接下来的开发主要是功能性的,包括:关闭,最小化,拖动,改变界面大小,刷新。
要点:
1.为了防止同一个图表打开多个窗口,定义了个窗口编号数组,每次创建窗口时会检查是否已经创建
2.创建窗口时的位置,目前我才用的是随机数来随机定位窗口在页面上的位置,后面会改进这里
3.最新打开的窗口应该置于所有窗口的前面,这个使用过修改窗口的z-index来实现,全局有个z-index变量而且总是增加的。
4.最小化,目前的思路是隐藏或者改变z-index.
5.改变大小通过修改内部iframe来实现,注意窗体的最小机值还是限制一下比较好。

开发时遇到的问题:
0.Jasascript代码组织,设计模式。
1.关于元素事件绑定的问题,比如窗体的关闭,页面初次打开时,我在ready()事件中使用on()为关闭按钮绑定关闭事件,每个窗体打开时都是重新创建的元素,此时关闭事件没有绑定上去。目前我的处理方式是,创建完窗体后,为关闭按钮绑定关闭事件,这样做似乎不是很好。
2.DIV圆角问题,CSS不是很强,所以目前窗体的圆角只能先去查资料怎么用,明白原理才能做了
3.不会PS,这个问题暂时没办法了,只能一个一个使用零碎的图片了,对css sprite技术,也只能望而兴叹了。

总结一下,今天完成的功能:
1.代码优化,统一了全局命名空间,优化了Var声明方式(参考:编写高质量JavaScript代码的基本要点)
2.完成了窗体的绘制
3.窗体交互事件开发:仅仅完成了关闭按钮。

在线测试地址:http://www.yuanxj.net/YOS/index.html

 

发表评论