· 技术要点

　　加下来，就简单介绍一下，如何制作这些效果，当然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框架了，当然这里面还是有很多细节要处理的，但是总体思路与本文介绍的思路类似。