【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，所以才有必要变暗背景，提示用户，后面已经不可点击，请关注当前操作。