我的BLOG搬家到自己的站点了
站点链接
RSS
  先帖样子
    
使用层或者其他技术所实现的JS菜单不能解决的问题就是这些菜单不能跨帧，也就是说在Frame之间的时候无可奈何，所幸的是IE5+提供了createPopup这个函数，可以提供窗口的创建，使用createPopup需要注意以下几个问题:
1、函数没有任何参数
2、CreatePopup函数返回的值是新窗口的句柄，这个窗口和普通的窗口一样，所有该有的东西都有。
3、新窗口的parent属性可以对父级窗口（调用createPopup函数的窗口进行访问）
4、一个窗口只能创建一个popup窗口，新调用createPopup将会吧以前的窗口关闭。
5、新窗口的内容初始的时候是空的，没有任何内容，使用document.write和document.body.innerHTML设置值
6、窗口显示的时候调用popwindow.show函数，调用契约为 show(left,top, width, height, document.body);最后一个参数指明位置属性相对的对象
7、窗口隐藏直接调用hide函数。
8、在父级窗口中点击鼠标将会自动将popwindow隐藏。
9、销毁父亲窗口不一定销毁其创建的popwindow，前提是保存窗口句柄的对象是否被销毁。
10、使用alt-tab转换窗口的时候，有时这些新窗口会悬浮在桌面顶层，不会随IE窗口转到后台而隐藏（IE6、IE7都是）
11、新窗口的对象不能使用父窗口的CSS风格，需要手工复写
12、新窗口中的链接（Anchors）需要注意点击之后链接显示的窗口是当前的窗口，一般无效。
13、新窗口中的JavaScript出现错误的时候并不会在当前的IE状态栏中提示！
14、新窗口的CSS风格不支持expression，晕！
15、显示窗口的时候（调用show函数）必须指定窗口的位置和大小，尤其是大小，新窗口可不能自动进行缩放！

实现跨帧菜单首先确定显示方式，每一级的菜单都是显示在一个Popwindow中，如前所述，在一个窗口中只能有一个popwindow,如图显示二级菜单就无法显示了，如何解决这个问题呢？
刚才我们提到，popwindow对象本身就是一个完整的窗口对象，要解决这个问题的最直接的办法就是，下级菜单的生成有父亲菜单所在的窗口（不管是主窗口还是popwindow）调用createPopup生成，这样，各级菜单都可以拥有自己的popwindow,而且可以自动的在同级菜单中进行切换，具体的脚本如下

var ele=control==null?event.srcElement:$(control);
/*...*/
var popw=ele.document.parentWindow.window.createPopup();
/*...*/

层次结构可以构造菜单的基本样式，刚才提到，popwindow不支持CSS风格，也就是说需要手工将CSS风格写到popwindow中，写CSS风格可以使用document.write方式或者直接构造styleSheet对象然后插入rule的方式（注意，直接使用document.body.innerHTML写的style标签好像没有生效），我采用前者，主要原因是，我在主窗口中配置菜单的显示风格，而后将这些显示css风格的文本信息直接保存下来，然后对每个新窗口进行写操作，这样就可以保持每级菜单的CSS风格完全一致。
读取主窗口CSS的代码如下

FrameMenuConfig.CssText="";
    for(var n=0;FrameMenuConfig.CssPrefix!=null && FrameMenuConfig.CssPrefix.length>0 && n<document.styleSheets.length;n++)
    {
      var sts=document.styleSheets[n];
      for(var x=0;x<sts.rules.length;x++)
      {
        var rr=sts.rules[x];
        if(rr.selectorText.indexOf(FrameMenuConfig.CssPrefix)>=0)
        {
          FrameMenuConfig.CssText+=rr.selectorText+"{"+rr.style.cssText+"}";
        }
      }
    }

这里使用的是匹配FrameMenuConfig.CssPrefix的CSS风格才写入到新的窗口中。

然后涉及到菜单的数据结构的定义，这个定义比较简单，就不扯了，用膝盖也能想出来。我这边处理的时候为了防止函数被重复定义，使用了简单的类静态函数的方式进行定义。

到现在为止，我们可以画出一层一层的菜单，在每层的菜单项上挂接onmouseover处理函数就可以自动弹出下级菜单，一切看起来已经完成了。

呵呵，好像还有点东西，菜单的链接有问题，如何解决在新窗口中的Anchor链接指向的页面在我们指定的框架中显示？首先还是要强调，每个popupwindow都是一个window对象，使用parent可以取得上级的对象，我的处理方法是在主窗口中定义了一个goto(url,target)的函数，这个函数负责在主窗口中将URL正确的进行跳转，带出来的问题是，怎么让popwindw正确的调用这个函数，第一层菜单使用parent.goto，第二层菜单使用parent.parent.goto,第三层使用.....

最后一个就是解决alt-tab的问题，这个问题说起来也简单，当alt-tab处理的时候隐藏IE窗口会触发document.onfocusout事件，在这个事件中对所有的popwindow 进行关闭即可，实际测试的时候，却发现如果不对IE窗口的内容进行点击操作（鼠标划过不算），不会使得document取得焦点，也就无法触发onfocusout事件，简单的做法是生成菜单之后调用一下document.focus()函数，这个函数可能会将焦点移动，所以不是很好，但是找不到解决的办法了

没啥藏着掖着的，源代码下载test.rar (7.97 kb)

以下是测试代码，包含鼠标悬停、自动创建和右键菜单，详细请参考压缩包中的东西


<style type="text/css">
  #fm_MainContainer
  {
    width:100%;
    height:20px;
    border:solid menu 1px;
    background-color:ghostwhite;
    padding:3px;
    font-size:10pt;
    color:menu;
  }
  #fm_MainContainer a
  {
    padding-left:15px;
    padding-right:15px;
    border-left:solid 2px #104E8B;
    border-right:solid 1px #104E8B;
    text-decoration=none;
    color:blue;
    font-size:10pt;
    font-weight:bold;
    background-color:;
  }
  #fm_MainContainer a:hover
  {
    text-decoration=underline;
    color:red;
    background-color:yellow;
  }
  #fm_Container
  {
    background-color:#E8E8E8;
    height:19px;    
    cursor:hand;
    width:150;
    padding-right:3px;
    border-bottom:solid 1px menu;
    border-left:solid 5px #B0C4DE;    
  }
  #fm_Container a
  {
    padding-left:15px;
    padding-right:15px;
    font-size:10pt;
    text-decoration=none;
    color:blue;
    font-weight:normal;    
  }
  #fm_Container a:hover
  {
    text-decoration=underline;
    color:red;
    background: url(goto.png) no-repeat;
  }
</style>
<script type="text/javascript" src="../framemenu.js"></script>
<script type="text/javascript">
  //系统生成的菜单如果包含有下级菜单在菜单项的左边显示的图片
  FrameMenuConfig.FolderImage="leftbtn.png";
  //系统菜单生成的结构为<div ><a>...</a></div>,此处设置div的显示风格，a的显示风格请附带在div中设置
  FrameMenuConfig.CssPrefix="#fm_Container";
  //insert函数直接插入一格记录，格式为 父亲代码、节点代码、节点显示文本、节点URL、节点的目标框架,目标框架支持_self和_blank.
  FrameMenu.insert(null,"a","滚动规划");
  //add2函数插入一个菜单，返回这个菜单的父亲节点的实例,格式为 节点显示文本、节点URL、节点的目标框架,目标框架支持_self和_blank.节点的ID自动生成
  FrameMenu.insert(null,"b","立项管理").add2("立项1").add2("立项2");
  //add函数插入一个菜单，返回这个新的菜单的实例,格式为 节点显示文本、节点URL、节点的目标框架,目标框架支持_self和_blank.节点的ID自动生成
  FrameMenu.insert(null,"c","工程实施").add("工程实施1").add("工程实施1_1");
  FrameMenu.insert(null,"d","验收管理").add2("测试用例").add2("测试用例");
  FrameMenu.insert(null,null,"系统菜单").add2("用户管理").add2("测试用例").add2("测试用例").add("角色权限").add2("角色授权").add2("用户授权").add2("资源授权");
  FrameMenu.insert(null,null,"帮助系统").add2("关于本系统").add2("退出系统");
  FrameMenu.insert("a","a1","本地文件","localfile.htm","body");
  FrameMenu.insert("a","a12","新浪网(弹出窗口)","http://wwww.sina.com","_blank");
  FrameMenu.insert("a","a13","多级菜单");
  FrameMenu.insert("a13","a13_1","新浪网(本窗口)","http://www.sina.com","_self");
  FrameMenu.insert("a13","a13_2","新浪网(本窗口)","http://www.sina.com");
  FrameMenu.insert("a13","a13_3","新浪网(Body)","http://www.sina.com","body");
</script>
<body topmargin="0" leftmargin="0" οncοntextmenu="FrameMenuConfig.showMenu();return false;">
  这个是TopFrame，Name=TopFrame
  <div id="fm_MainContainer">系统菜单是安排在这里滴，嘻嘻</div>
  <br/><button οnmοuseοver="FrameMenuConfig.showMenu()">鼠标悬停方式显示完整菜单</button>
<script defer>
  FrameMenuConfig.createFrameMenu("fm_MainContainer",false);
</script>
</body>

转载于:https://www.cnblogs.com/JeasonZhao/archive/2007/11/14/958763.html

使用window.createPopup创建无限级跨帧下拉菜单相关推荐

  1. 创建一个国家的下拉菜单(magento2)

    当我第一次需要访问Magento中的一组国家时,我认为它可以像所有其他数据收集一样工作,但是很震惊地发现情况并非如此.Magento不是将国家数据存储在数据库中,而是将国家数据存储在XML文件中,并在 ...

  2. Excel：创建级联下拉菜单

    本文介绍如何在 Excel 中创建两级关联下拉菜单的方法. 最终效果动图展示 ◆  ◆  ◆ 一般步骤及说明 1.首先输入数据. 2.选中 B4 单元格,点击"数据选项卡/数据工具/数据验证 ...

  3. 下拉菜单显示 隐藏html,根据在下拉列表中选择的内容隐藏和显示HTML元素

    我的网站是在ASP classic - VBScript中创建的(不是我的选择,也是我之前没有过的语言).我试图在其中创建一个网页:下拉菜单显示了基于第一个选择内容的额外下拉菜单.我正在尝试使用Jav ...

  4. WPS Excel做多级下拉菜单列表

    WPS Excel做多级下拉菜单列表 最近做表格数据需要做一个三级别关联下拉菜单,之前只知道一列下拉菜单是用数据有效性做,三级别的没做过,查了资料,记录一下. 1.一级下拉菜单 选中要添加下拉菜单的数 ...

  5. Excel：下拉菜单的设定

    本文介绍如何在Excel中创建两级关联下拉菜单的方法. 最终效果如下面的动图所示: 示例步骤及说明: 1.首先输入数据. 2.选中B4单元格,点击数据选项卡:数据工具/数据验证,如下图所示选择或输入参 ...

  6. 实现百度下拉菜单实例（利用jsonp跨域请求百度数据接口）

    JSONP:是JSON  with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指 ...

  7. python tkinter 下拉框_python中tkinter入门之Menu创建顶级菜单、下拉菜单和弹出菜单。...

    创建顶级菜单 Menu 组件通常被用于实现应用程序上的各种菜单.使用add_command可以添加菜单内容.创建后通过root.config()添加到窗口上. from tkinter import ...

  8. 创建与SharePoint 2010风格一致的下拉菜单 (续) 整合Feature Custom Action框架

    在上一篇"创建与SharePoint 2010风格一致的下拉菜单"文章中,演示了如何添加一个额外的菜单到页面顶端,并使其的样式风格与SharePoint 2010内置的菜单保持一致 ...

  9. flask html下拉列表,如何使用Flask和HTML从python列表创建下拉菜单

    我正在尝试使用来自python脚本的信息在HTML中创建一个下拉菜单.不过,到目前为止我已经让它工作了,html下拉列表将列表中的所有4个值显示为4个选项. 当前:选项1:红色.蓝色.黑色.橙色:选项 ...

最新文章

  1. Kubectl 常用命令, 开发人员常用k8s命令
  2. 电信天翼3G上网卡在Lenovo笔记本电脑windows7系统正常运行方法
  3. html中图片只是一个小图标,如何用css显示一个图片中多个小图标？
  4. 架构师课程1-多线程基础
  5. OpenCV函数学习之cvLUT
  6. 通达信波段王指标公式主图_通达信指标公式源码超赢天下主图源码
  7. Redis提供的持久化机制（RDB和AOF）
  8. 用 Python 和 OpenCV 检测和跟踪运动对象
  9. linux环境下创建MyOS虚拟机
  10. css圆角box(网上流行用b标签)
  11. html2canvas改成同步,html2canvas转为图片异步转同步问题（记录）
  12. iphone 字符串分隔与组合
  13. java 指针 地址压缩_JVM优化之压缩普通对象指针（CompressedOops）
  14. Windows中使用http-server搭建一个本地服务
  15. 关于extern的使用
  16. Kindle for PC: 优雅的 PDF 阅读器工具
  17. Shader入门精要-1-渲染流水线数学基础
  18. 一些嵌入式开发有用的github上的开源代码库
  19. MTK平台前后摄使用PMIC供电无法设置不同的DVDD电压
  20. pmv计算c语言软件,Fluent 软件

热门文章

  1. 最大字段和（动态规划，C语言）
  2. js 引用 java常量_java调用JS 与JS 调java
  3. antd 表格树如何展开_ant-design-pro protable 树形表格默认展开
  4. fillna函数_听说这些pandas函数，是数据科学家和软件工程师的最爱
  5. shell python脚本语言_python脚本里使用shell语句
  6. 干货 | 双目摄像头实现手势识别，完美还原人体运动手势
  7. FPGA实现智能小车竞速
  8. xilinx FPGA的远程更新（动态加载）详解（Using a Microprocessor to Configure 7 Series FPGAs）
  9. arcgis几何修复有作用吗_ArcGis拓扑的那些事儿（拓扑应用过程二）
  10. tensorflow环境下的识别食物_在TensorFlow+Keras环境下使用RoI池化一步步实现注意力机制...