用Popup窗口建无限级Web页菜单
- 发布于:2019-11-04
- 共 198 人围观
下面将介绍的Popup来实现的Web页菜单将完全解决<div>做为菜单容器时遇到的问题,Popup窗口是IE5.5及以后版本提供的一个新feature。什么是popup呢?简单说popup其实就是一个弹出窗口,它拥有以下特点(MSDN描述):
·popup窗口在用户点击它自身之外的任何地方或另一个popup打开的时候会自动关闭;
·popup在显示的时候不能获得焦点,所以用户已focused的操作将继续在其父窗口中执行;
·组成popup的DHTML可以存储在其父document或其他的document元素中;
·popup窗口中不支持文本框一类的编辑框element;
·不能选中popup窗口中的元素;
·不能在popup窗口中navigate(点击popup中的连接,不能让更新的内容显示到这个popup中);
·popup窗口一旦显示就不能移动和resize。
这里MSDN说的不全,而且有的地方不是很准确,popup窗口还有几个重要的特性。它可以超出浏览器的窗口范围而且也不会被下拉框、flash、IFrame等这些元素遮挡。实际上popup里的内容是可以被选择的,不知道MSDN说的不能选择是啥意思?。关于MSDN说popup不能获得焦点也有点问题,其实是popup里的编辑框类控件不能获得焦点,而其它的非可编辑控件是可以获得焦点的。而且popup显示的时候,IE主窗口不能获得鼠标的onmousewheel事件。
这样的一些特性,恰好表明了popup窗口非常的适合用来制作弹出菜单,并且由于popup窗口显示的时候,IE窗口内的文档是不能被移动的,这样就不存在context menu的位置同步问题了,因为毕竟popup窗口不能move(move位置需要hide以后在新的位置上重show),这个问题还比较讨厌。
使用popup窗口制作无限级别的菜单,有两个问题要解决:一个是要能在一个IE中显示多个Popup窗口,二是要能把窗口中的一些事件俘获并执行我们脚本过程。MSDN在描述popup窗口特性时,第一条就说了只要有另一个popup窗口开启,先前显示的popup窗口就会自动关闭。这下怎么办呢?不过既然都说了要实现无限级的菜单了,办法还是有的。对于popup,使用方式其实是很简单的,他一共就只包含了两个方法:hide()和show(...),和两个属性:document和isOpen。虽然在IE中我们连续的调用n次window.createPopup().show(...)只能出来一个popup窗口被显示,可是我们可以调用popup.document.parentWindow的createPopup方法,它产生的popup窗口在显示的时候就不会关闭前面已显示的popup窗口,并且对于新的popup用这个方法可以继续开启child popup。这个问题再研究下去,会发现IE实现popup的一些怪异的地方(当然这些对于我们实现这个菜单关系不太大,只是觉得混乱)。
比如我们在一个IE窗口中,var popup = window.createPopup(); var win = popup.document.parentWindow; 我们会发现 window != win,对于多个popup可以共存,这个不相等还能理解,但是当我们调用win.resizeTo(...)的时候,我们发现父IE窗口被resize了。同样我们在popup中select all,结果也是父IE窗口里的内容被全选了@_@...
一,什么是Popup
在IE5.5+中开始支持的Popup窗口有很多很特别的特性:
Popup窗口可以超出浏览器窗口区域;
可以不用担心被下拉框、flash、Iframe等这些东西遮挡;
即时窗口没有焦点,Popup窗口也可以弹出并显示
一个Popup窗口打开后,当在它的区域以外点击或者另一个Popup窗口被打开时都会自动关闭;
Popup窗口是没有焦点的;
用户不能改变Popup窗口大小;
Popup窗口中的内容是不能被选择的;
......
只是Web下的Popup比起Windows中的Popup还是弱一些,但是已经够用了。Msdn上对Popup有非常详细的介绍“Using the Popup Object (Internet Explorer - DHTML) ”
二,怎么创建一个Popup
Msdn上的示例代码:
// 创建Popup对象
var oPopup = window.createPopup();
// Popup对象和Window对象一样,里面包含了一个完整的HTML文档
var oPopupBody = oPopup.document.body;
// 在Body中插入HTML
oPopupBody.innerHTML = "Display some <B>HTML</B> here.";
// 设置显示的位置、大小、参照物
oPopup.show(100, 100, 200, 50, document.body);
三,Popup的显示
多个Popup不能共存(Popup中创建Popup除外),所以web中的Popup不方便像Msn Messenger的Popup提示那样“爬楼梯”,所以最简单有效的方法就是像Outlook2003的Popup一样,逐个Popup提醒。
(参考WebMessenger的实现)用Js建个队列,将需要Popup提示的内容都放在队列中,用一个定时器,定时从队列中取一个Popup,每个Popup显示7秒。
四,怎么知道有新帖子
在Web程序中,只能通过“拉”的技术,即定时向服务器发送请求——通过定时刷新或者是xmlhttp的Get。
我们需要有个时间戳来记录最后请求时间,这样就好根据这个时间戳来获取时间戳之后的帖子。
如果每次根据时间戳来获取最新帖子,服务器负荷比较大,因为并不是每次请求都有新帖子的,优化一下,再给每个在线用户设置有无新帖子、有无新留言的状态位,当发表新帖子后更新每个人的“有无新帖”状态位。这样每次请求时先判断有没有新帖子,如果有新帖子,才获取所有帖子的标题和内容简要。