用Popup窗口建无限级Web页菜单
作者:birdshome 发布时间:2023-07-10 20:22:17
在Web上使用菜单可以极大地节约页面的空间,同时也比较的符合用户从Windows上继承下来的UI操作体验。在以往的Web页菜单设计中,我们普遍使用div嵌套table的方式来实现菜单,这样的菜单有个最致命的问题就是会被<select>覆盖。我们为了解决这个问题,有时我们干脆在显示图层菜单的同时隐藏页面上的所有下拉列表框,在菜单消失的时候,再显示他们。这个方法虽然可以解决问题,而其优化过后还可以只隐藏和下拉列表框相交的列表框,但是这些解决方法都不是十分的完美。还有些小问题,这样的菜单定位很困难,因为在<div>显示的时候,用户可以使用鼠标滚轮滚动页面,这样一来是否要让<div>菜单和页面滚动同步呢?如果不要,页面被滚走了,菜单仍显示在一个和自己毫不相关的位置上很是古怪。如果要同步,那么噩梦就来了,因为被滚动的区域不一定就是<body>区域,还可能是一些类似<div style="overflow:auto"><div>的区域,要算出菜单的位置将会非常的麻烦。
下面将介绍的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窗口里的内容被全选了@_@...
(未完待续)
猜你喜欢
- 下面给出ORACLE的一种实现方式,要分2步走:1. 建立 SEQUENCE CREATE [ OR REPLACE ] SEQUENCE
- 问:如何自己制作验证码的head.fix和body.fix文件答:1 图象绘制完成后,将文件存为24位位图格式的BMP图象文件。 2 去除前
- 如果在session级保存一个dictionary对象会降低系统的性能,而在application级保存一个dictionary对象会导致w
- show parameter processes; 然后 更改系统连接数 alter system set processes=1000 s
- 安装时建议你为MySQL管理创建一个用户和组。由该组用户运行mysql服务器并执行管理任务。(也可以以root身份运行服务器,但是不推荐)第
- 这篇论坛文章(赛迪网技术社区)详细讲解了SQL Server海量数据导入的最快方法,更多内容请参考下文:最近做某项目的数据库分析,要实现对海
- 发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS
- 阅读上一篇:微软建议的ASP性能优化28条守则(2) 技巧 5:不要将数据库连接缓存在 Application 或 Session 对象中
- CSS的学习和其他的学习一样,都需要特定的方法才能比较快的去掌握它.要想掌握CSS, 首先要学会HTML,我刚开始是从零开始学习的
- 在linux服务器lvs负载均衡、双机热备应用中经常用到mysql双机热备,安装和配置过程如下:一、 安装MYSQL# cp mysql-s
- strftime()函数的用法strftime()函数可以把YYYY-MM-DD HH:MM:SS格式的日期字符串转换成其它形式的字符串。s
- 1.弹启一个全屏窗口 <html> <body onload="win
- Q: I am working with Oracle database 8.1.7 and I have written a JAVA c
- 原来的语句是这样的: select sum(sl0000) from xstfxps2 where dhao00 in ( select d
- 什么是MySql数据库?通常意义上,数据库也就是数据的集合,具体到计算机上数据库可以是存储器上一些文件的集合或者一些内存数据的集合。我们通常
- “操作入口明确”,就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”,指的是产品内部不同模块之间的转接元素,例如在Web产品中,按
- 看下面的Java代码,目的是为了当i是3的时候,就不做输出,直接跳到下一个循环。int i = 0; 
- 随着网页制作热潮的兴起,Dreamweaver 4.0强大的功能深受众多网页制作者的喜爱。特别是Dreamweaver 4.0中有许多第三方
- Conditional-CSS允许你针对单一浏览器或浏览器组写出有逻辑条件的可维护的特定的CSS声明。使CSS针对特定的浏览器。简化你对CS
- 因为外贸网站,禁止同行抄袭,所以防止中国ip访问访问,访问的时候有密码提示,这样的代码如何写.请给一个提示.或者有好的代码,请分享下。 &n