用html&css&javascript打造自己的RIA之二

 

在笔者上一篇的文章《用 html&css&javascript 打造自己的 RIA 之一》中，通过一个简单的例子，详细介绍了用 HTML&CSS&javascript 开发 RIA 的整个过程，并简单介绍了 netbeans6.1 的使用，本文虽然采用 netbeans6.5 ，但是从操作上来讲，差别并不大，但是该版本对 js 的支持相比较 6.1 又有了比较大的进步。
通过上一个例子，已经可以看出，打造这一类的 RIA ，从技术上来讲，并不困难，都是纯静态的元素，难点在于如何去设计，颜色的选取， CSS 的设计以及考虑用户行为和心理上的方便性，前面两点都容易理解，最后一点，只要是指设计出了 UI ，如何去展现这些 UI ，以方便用户操作。
在这篇文章里，本文再介绍一个综合性的例子，以巩固读者对纯 Html&css&js 在开发 RIA 方面的理解。

• Demo 展示

该例子包含了网页跳转时等待，右键菜单，左击菜单，网页中的可拖动窗体，自制小对话框等效果。
主要界面截图：
  

点击类 Solaris 窗体的 WEB Ui 链接，弹出一个 Solaris 样式的小窗体，同时背景变暗，该窗体带阴影，可以拖动，点击左上上脚的小箭头，弹出一个菜单。点击菜单中的首页，则该小窗体中的内容跳转到 sun 公司的主页，如下图显示：


点击菜单中的浏览，则弹出一个自制的小窗体，用来输入网址，如下图：



回车即可跳转至输入页面。
点击刷新，则返回初始页面，点击关闭，则关闭该窗体。
该窗体同样可以点击右上角的 XX 关闭。
在一开始进入的窗体页面中，还存在一个右键菜单，如下图：



这个功能和点击左上角的箭头的功能大体是相同的，不同的是，执行首页，刷新会跳出 wait 框，点击刷新后出来的小窗体，输入网址回车，也会出现 wait 框。如下图：

单击关闭则会弹出一个询问是否确认关闭的小窗体，如下图：


而该对话框上的小图标，笔者也加了一个小菜单，如图：


同样通过右键菜单出来的小窗体左上脚都带了小菜单，外面的笔者在这边没有做，毕竟不是在做一个产品，所以没有重复着做。
本例中点击右上脚的小 XX 都有关闭的功能。

• 作用
  这些例子看上去好看，到底有哪些实用价值，很显然。
  

1. 可拖动的窗体，避免了同一个功能页下的多余的跳转，比如在新闻系统的消息列表中，传统做法，点击一条新闻，转到另一个页面，看完一条，再返回，再点击，如果采用这种方式，再结合 ajax ，则点击某条新闻，跳出一个窗体，在窗体中显示消息内。这么做，符合用户操作电脑的习惯，同时，该窗体可以通过某些手段装饰地非常美观，大大增强用户体验。
2. 自制的浏览窗体，这一类 UI ，对于一些只要实现某个小功能，但是又不希望在调用的时候跳转页面的情况下，比较实用，就好比，我这个地方要增加一条新闻，则可以弹出一个小框，输入信息，点击确定，马上就可以看到新增加的新闻。当然该小窗体也可以做地相当美观，自制的警告对话框也是类似的作用。
3. 弹出菜单，很显然集成一些用户常用的功能在右键菜单中，可以给用户的操作带来方便性。
4.wait 框，这一点在前一篇文章中已经讲过，在页面加载完成前，显示一个 wait 框，能够减少因为等待而造成的心理上的烦躁。
5. 变暗的背景，锁定当前窗体，锁定用户只能在当前窗体上进行操作，这个效果也只有在此种有自定义 UI 的情况下有意义，因为有弹出的 UI ，所以才有必要变暗背景，提示用户，后面已经不可点击，请关注当前操作。

• 技术要点
  

加下来，就简单介绍一下，如何制作这些效果，当然 wait 框和变暗背景，上篇文章已经讲过，这里只介绍前面 3 种情况。需要说明的是，由于上篇文章已经做过很多详细的解释，在这里，本文可能仅仅介绍做法，并不会把代码讲解的很详细，只有在关键几个功能的地方才讲解代码，因为如果要全部讲的话，可能要写个 5 篇以上的字数封顶的文章才能讲清楚。上一篇的文章，一开始发布的时候没注意字数，事后才发现字数太长，被截断了一部分，后来修剪以后才算正式搞定的，所以还请读者谅解，不过源代码都会提供下载。
在开始实现之前，先看一下项目的目录截图：


一，可拖动的窗体。
原理：
首先：这个可拖动的窗体，事实上只是一个由图片组成的表格，而中间的内容，只要内置一个 iframes ，然后通过 js 来控制 iframes 的 src 或者 location.href 属性就可以根据需要进行窗体内容的变换。
其次：可拖动效果显然也是通过 js 来制作的，无非是捕捉这几个事件，按下鼠标的事件 onmousedown ，拖拽 onmousemove ，松开鼠标 onmouseup ，在触发 onmousedown 的时候，需要做的是确定鼠标的位置，获取要移动的对象，当触发 onmousemove 的时候，让要移动对象的坐标位置随着鼠标的坐标位置做相对移动，这里为什么是相对移动呢，很显然，按下鼠标的 X ， Y 轴和对象的 X ， Y 轴往往是不一样的，对象的 X ， Y 轴通常情况下是指，对象的左上角，而鼠标点击处的 X,Y 轴才是鼠标的位置，那么如果让他们在移动的时候， X,Y 轴位置一样的话，显然一移动，鼠标就会乱跑了，所以要计算鼠标移动的距离，并把这个距离值加到要移动对象的对应的 X,Y 轴上去，事实上要做一个比较理想的拖拽效果，还是有很多细节要处理的。
最后：控制该窗体的出现或者消失，是通过 js 和 css 来共同决定的。
关键技术：
1 ，本例子采用的 Solaris 的窗体，笔者是从 OpenSolaris 下截了一张图，并通过图像处理软件 Fireworks ，抠掉中间一块，加一个阴影的特效，再通过该软件的切片功能，切一下，导出，即可生成 html 文件。推广一下，只要读者觉得有些窗口不错的，就可以这么做，本文的对话框的 UI 也是这么搞出来的。中间抠掉的一块就放置一个 iframe ，代码如下：
<iframe width="711" height="499" frameborder="0" id="content" name="content" scrolling="auto"></iframe>
width 和 height 这个视情况而定，注意一定要赋予 id 值，否则 js 要操作这个有点困难。
2. 鼠标的拖拽，原理已经讲的很明确，具体怎么去实现，大家可以参考以下文章，
http://www.365tech.net/Javascript/27498/page1
本文的例子，是采取了 YUI ， yahoo 包中已经做好的功能，在 inc 目录下有一个 yahoo 的文件夹，这个就是雅虎开发的 ajax 框架，要实现拖拽功能，只要导入以下几个 js 库
<script type="text/javascript" src="inc/yahoo/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="inc/yahoo/event/event-min.js" ></script>
<script type="text/javascript" src="inc/yahoo/dom/dom-min.js"></script>
<script type="text/javascript" src="inc/yahoo/dragdrop/dragdrop-debug.js" ></script>
<script type="text/javascript" src="inc/yahoo/animation/animation-min.js"></script>
然后再加以下一段代码，即可控制窗体的拖动：
<script type="text/javascript">
YAHOO.example.DDApp = function() {
var dd;
return {
init: function() {
dd = new YAHOO.util.DD("webpage");// 这里的 webpage 即要拖拽对象的 ID
}
}
}();
YAHOO.util.Event.onDOMReady(YAHOO.example.DDApp.init);
</script>
使窗体能够拖动，还有一个很关键的因素，即 CSS 的 position 属性，一定要设置成 absolute ，因为这里是按照绝对位置来实现定位的。
3. 要控制窗体的出现，则可以通过 CSS 的 display 属性来实现，当其值为 none 时，不显示，为 block 时则显示，而 iframe 的内容，则可通过以下的 js 来实现：
document.content.location.href=url;
其中 content 为 iframe 的 id ， url 为需要转向的地址。这个值可通过 js 自定义函数的参数来获得。
而控制出现和消失的 js 为：
var webpage=document.getElementById("webpage");
webpage.style.display="block";
webpage 为目标对象的 ID ，所谓打开则是 block ，关闭则是 none 。


二，自制的浏览窗体
这个原理和实现技术其实和第一个是类似的，不过窗体是截的 OpenSolaris 的对话框的小图，从中再抠掉一块，导出，放一些文字，一个输入框，两个按钮。出现和消失也是通过 js 和 CSS 来实现的。这里不再赘述。


三，弹出菜单
原理：
首先：这个菜单只是一个 html 的表格或者 div 组成的静态元素，而菜单项也不过是文字链接，点击其中一个链接触发 js 事件。
其次：菜单出现的位置，这个需要根据鼠标的点击位置，来做微调，决定菜单出现的位置。
关键技术：
1. 制作菜单样式，这个就不赘述了，知道了原理，自己去设计就行了。
2. 菜单出现的位置，在这个例子里，有两种情况，一个是点击左上角的小图标出现下拉菜单，还有一个就是右键菜单。不管是那种情况，都需要先确定点击处的位置，只不过第一种是左上角小图标的位置，而右键菜单就是鼠标右击处的位置。
确定位置可以用对象的 getBoundingClientRect 属性，如：
var orect =obj.getBoundingClientRect();
return orect.left;
相当于返回 X 坐标，而
return orect.top;
相当于返回 Y 坐标，其中 obj 就是页面中的对象，可通过 document.getElementById 来获得。
知道了目标对象的 X,Y 坐标，那么菜单的位置基本上就可以确定了
contextmenu.style.posLeft= document.body.scrollLeft+getX(dialogmenu)-3;
contextmenu.style.posTop= document.body.scrollTop+getY(dialogmenu)+22;
其中 dialogmenu ，即目标对象， contextmenu 即菜单对象。
这个是左击，如果是右击的话，也是类似，不过右击触发的是 oncontextmenu ，只要在触发事件的同时，调用菜单即可显示。

• 总结
  

写到这，聪明的读者应该知道本文所做的例子是如何实现的了，再推而广之，也可以知道目前大多数的特效是如何做出来的了，总体步骤：
1. 用 html 和 CSS 来设计漂亮的 UI
2. 用 js 来控制其行为
既然已经用到 js 了，这个功能基本上就可以很大地扩展下去了，因为 Ajax 说到底也是 js ，所以再聪明一点的读者，应该可以知道那些所谓的 Ajax 框架是如何做出来的了吧。
本文所介绍的例子，如果触发的 js 函数，采用了 Ajax 的方式来处理，那么也可以自己制作自己的 Ajax 框架了，当然这里面还是有很多细节要处理的，但是总体思路与本文介绍的思路类似。


   完整源代码下载