【IT168 技术】摘要：接上篇文章《用html&css&javascript打造自己的RIA之一》，大量运用CSS，javascript编写1个比较实用的综合性的例子，进一步深化如何使用html&css&javascript来制作自己的RIA。开发工具采用netbeans6.5，由于在上篇中，已经介绍过相关的原理以及工具的使用，所以只在关键几个点上讲解，其他部分不再赘述。本文例子运行环境IE6.0及以上。

　　在笔者上一篇的文章《用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，代码如下：

　　width和height这个视情况而定，注意一定要赋予id值，否则js要操作这个有点困难。

　　2.鼠标的拖拽，原理已经讲的很明确，具体怎么去实现，大家可以参考以下文章，

　　http://www.365tech.net/Javascript/27498/page1

　　本文的例子，是采取了YUI，yahoo包中已经做好的功能，在inc目录下有一个yahoo的文件夹，这个就是雅虎开发的ajax框架，要实现拖拽功能，只要导入以下几个js库

     　然后再加以下一段代码，即可控制窗体的拖动：

1<script type="text/javascript">
2YAHOO.example.DDApp = function() ...{
3var dd;
4return ...{
5init: function() ...{
6dd = new YAHOO.util.DD("webpage");//这里的webpage即要拖拽对象的ID
7}
8}
9}();
10YAHOO.util.Event.onDOMReady(YAHOO.example.DDApp.init);
11</script>
12

 　　使窗体能够拖动，还有一个很关键的因素，即CSS的position属性，一定要设置成absolute，因为这里是按照绝对位置来实现定位的。

　　3.要控制窗体的出现，则可以通过CSS的display属性来实现，当其值为none时，不显示，为block时则显示，而iframe的内容，则可通过以下的js来实现：

　　其中content为iframe的id，url为需要转向的地址。这个值可通过js自定义函数的参数来获得。

　　而控制出现和消失的js为：

　　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坐标，那么菜单的位置基本上就可以确定了

　　其中dialogmenu，即目标对象，contextmenu即菜单对象。

　　这个是左击，如果是右击的话，也是类似，不过右击触发的是oncontextmenu，只要在触发事件的同时，调用菜单即可显示。

　　· 总结

　　写到这，聪明的读者应该知道本文所做的例子是如何实现的了，再推而广之，也可以知道目前大多数的特效是如何做出来的了，总体步骤：

　　1.用html和CSS来设计漂亮的UI

　　2.用js来控制其行为

　　既然已经用到js了，这个功能基本上就可以很大地扩展下去了，因为Ajax说到底也是js，所以再聪明一点的读者，应该可以知道那些所谓的Ajax框架是如何做出来的了吧。

　　本文所介绍的例子，如果触发的js函数，采用了Ajax的方式来处理，那么也可以自己制作自己的Ajax框架了，当然这里面还是有很多细节要处理的，但是总体思路与本文介绍的思路类似。