用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窗口里的内容被全选了@_@...
（未完待续）
0
投稿猜你喜欢
1.设置Headers有些网站不会同意程序直接用上面的方式进行访问，如果识别有问题，那么站点根本不会响应，所以为了完全模拟浏览器的工作，我们- 单下划线单下划线用作变量最常见的一种使用场景是作为变量占位符，使用场景明显可以减少代码中多余变量的使用。为了方便理解，_可以看作被丢弃的变量
- 本文实例讲述了php实现比较全的数据库操作类。分享给大家供大家参考。具体如下：<?php class database {
- 默认情况下，PyCharm中如果有无法错误或者不符合PEP8规范代码下面会有波浪线，语法错误波浪线为红色（如下图的第10行），不符合PEP8
- 错误提示如下：其实这是一个挺常见的系统报错，缺乏VC++库。我安装的是python3.5.2，这个版本需要的vc版本是2015的了，下载：M
- 本文介绍了python+opencv像素的加减和加权操作的实现，分享给大家。# 目标：# 1、在图像上进行算术操作，如加减以及按位操作# 2
- 先有个一名为student的关系，其字段以及元组如图所示：为了保持数据的一致性，现在需要将sname的多余空格去除，以及将所有的snativ
- 目录WSGI基本原理1. WSGI处理过程2. WSGI示例3. WSGI web服务器和应用程序WSGI基本原理1. WSGI处理过程浏览
- 1.虚拟环境它是一个虚拟化的概念，从电脑独立开辟出来的环境。通俗的来讲，虚拟环境就是借助虚拟机来把一部分内容独立出来，我们把这部分独立出来的
- Hypothesis是Python的一个高级测试库。它允许编写测试用例时参数化，然后生成使测试失败的简单易懂的测试数据。可以用更少的工作在代
- 目录1.什么是高阶函数？2.高阶函数-map、filter、reduce2.1map函数2.2filter函数2.3reduce函数1.什么
- 第一次使用python写程序，确实比C/C++之类方便许多。既然这个抽奖的数据不大，对效率要求并不高，所以采用python写，更加简洁、清晰
- MySQL 8.0.29 详细安装(windows zip版)，供大家参考，具体内容如下1 官网官网地址：MySQL2 下载下载地址：MyS
- 大家好，我是煎蛋哥！全国有很多彩民，其中购买最多的彩种分别是体彩大乐透和福彩双色球；虽然中大奖的概率极低，但是彩民纷至沓来，一方面抱着一份中
- 目前，各大搜索引擎如google、百度、雅虎已经对动态页面诸如asp，php有着不错的支持了，只要动态页面后面的参数不要太长，如控制在3个参
- 举例吧，这样更容易看的懂。例1：from django.core.exceptions import ObjectDoesNotExistt
- Python是一个很酷的语言，因为你可以在很短的时间内利用很少的代码做很多事情。不仅如此，它还能轻松地支持多任务，比如多进程等。Python
- 天在刷题的时候用到了正则，用的过程中就感觉有点不太熟练了，很久没有用正则都有点忘了。所以现在呢，我们就一起来review一下python中正
- 导语之前有很多小伙伴说想学习一下多线程图片下载器，虽然好像已经过去很久了，不过还是上来安排一波吧。至于题目为什么说是构建一个小型数据集，因为
- 本文实例讲述了Python常见字符串操作函数。分享给大家供大家参考，具体如下：str.split(' ')1.按某一个字符分
