使用Popup窗口创建无限级Web页菜单(3)-阿里云开发者社区

开发者社区> 唐玄奘> 正文

使用Popup窗口创建无限级Web页菜单(3)

简介:
+关注继续查看
菜单除了要它能显示,还要它能执行动作才是最关键的地方。popup是个子窗口,虽然他没有opener。我们有两种办法来在popup中执行脚本,一是把script代码写到其document中,让它运行,比如:
None.gif    var win = window;
None.gif    var doc = win.document; 
None.gif    var popup = win.createPopup();
None.gif    var popwin = popup.document.parentWindow;
None.gif    var popdoc = popwin.document; 
None.gif    
None.gif    popdoc.write('<script>function showAlert(){alert("a");}<' + '/script><div onclick="showAlert()">click me</div>'); 
None.gif    popup.show(0, 0, 100, 100);
    这样在弹出的popup中就可以点击"click me"出来一个alert msg box。
    另一种方法是使用attachEvent的办法,这样popup可以执行其opener窗口中的脚本,比如:
None.gif    popdoc.write('<div>click me</div>'); 
None.gif    var div = popdoc.getElementsByTagName('DIV')[0];
None.gif    div.attachEvent('onclick', Alert3);None.gif    
None.gif    popup.show(0, 0, 100, 100);
    在opener窗口中的scirpt方法:
None.gif     function Alert3() { alert(3); } 
    在第二个方法里有个undocumented的特性,使用attachEvent方法attach的事件响应函数在被触发时,第一个参数默认就是其window上的event属性。为什么说是其窗口上呢?因为popup确实是个具有自己的window对象的元素(虽然我们前面说它比较怪异)。这个特性被极好的使用在了菜单条目被点击时的响应处理上,在后面的Menu.Show()和Menu.ShowEx()里都回用到。

    我们在使用(2)中的最后说过,由于在popup的doucment对象上使用appendChild有UI效果上的问题,所以我们不得不使用innerHTML赋值方式来生成菜单的显示UI HTML代码。这样的代码和我们的JavaScript写的菜单类之间就没有了任何的联系,为了把这个联系重新建立起来,我们使用了一个全局的类似Hashtable的类__MenuCache__来存储菜单逻辑和UI HTML之间的一对一联系,这个方法不是我创造的,它是Erik Arvidsson实现的DHTML Menu 4里面的方法,我借用了一下,觉得这个方法还是挺好的。   
None.gif     var __MenuCache__ =
None.gif     {
None.gif         m_Count :        0,
None.gif         m_IdPrefix :    "__MenuObject__",
None.gif         m_ActiveItem : null,
None.gif
None.gif         NewId : function()
None.gif         {
None.gif             return this.m_IdPrefix + this.m_Count++;
None.gif         },
None.gif
None.gif         Remove : function(mi)
None.gif         {
None.gif             delete this[mi.m_Id];
None.gif         }
None.gif     };


    虽然我看了Eric的Menu4的代码,我只能说这个__MenuCache__是里面的亮点,而其他的部分写的真是有些乱,毕竟他那个Menu类前前后后历时两年,其间修复了n多bug。当然我这个Menu的实现自然有些站在巨人肩膀上的味道了emwink.gif

    再说点题外话,Eric的javascript水平是毋庸置疑的,既有webfx.eae.net上丰富的DHTML组件类,还有更震耳发聩的Bindows™。但是更让我觉得难能可贵的是他在webfx上那些详细的教程,我看了他的教程后,一个晚上就做一个Menu的prototype,后来修修补补到现在一个周已经完全实现了DHTML Menu 4菜单部分的全部功能(MenuBotton那部分我没有做,因我目前暂时用不上)。本来我可以简单的把代码一发就完事,可能还更受大家欢迎。但我觉得我在这里详细的介绍这个PopMenu的实现过程和其间遇到的一些问题,会让踏实学习的人收获到更多的东西,同时也督促我自己更加踏实的学习工作。如果能引起讨论氛围,指出我使用的方法中的错误和不足并给予建议,那更是一件让我开心的事emsmile.gif。  


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用 SAP WebIDE 创建 SAP Fiori Elements 应用
使用 SAP WebIDE 创建 SAP Fiori Elements 应用
8 0
分享录制的正则表达式入门、高阶以及使用 .NET 实现网络爬虫视频教程
我发布的「正则表达式入门以及高阶教程」,欢迎学习。 课程简介 正则表达式是软件开发必须掌握的一门语言,掌握后才能很好地理解到它的威力; 课程采用概念和实验操作 4/6 分隔,帮助大家理解概念后再使用大量的实例加深对概念的理解; 实例操作是对概念最好的理解,也是学习新语言最有效的办法; 在课程中也穿插着大量软件开发的技巧和大家分享; 应该是把晦涩的正则表达式讲解的最生动的课程; 掌握了正则表达式后,您一定会觉得这是一门最值得掌握的语言。
887 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
7379 0
lua使用io.open跨平台文件夹遍历匹配查找
-- Desc :实现在LUA_PATH中的lua文件中遍历寻找没用到PNG_PATH路径下的png图片,并将其打印出来。 -- Date :12:49:28 2014-09-04 1 print("Lua Script Start") 2 3 function getFileName( path ) 4 len = string.
826 0
图灵ios培训第一周(使用UIWebView创建简易浏览器)
       借着给学弟学妹们培训ios的机会,给大家ios新手带来一系列的新手知识博客,希望能给广大ios爱好者以及希望进入ios领域的童鞋们得到帮助。大神路过的请指点。 课前小探索 制作一个简易的浏览器 首先打开Xcode,新建一个工程。
730 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
8238 0
Android PopupWindow使用
1、含义        写的第一篇技术文章还有点小激动,话说popupwindow顾名思义就是类似于对话框样式布局显示,但是却有别于对话框,到底哪里有区别呢,还请客官您细细观看。
693 0
使用 Webix 创建 Email 客户端
Webix 是一个JavaScript UI 库,提供了多达88个UI小部件和功能丰富的 CSS/HTML5 JavaScript 控件。使用 Webix 可以有效地加快 Web 应用的开发。文本将演示了如何通过 Webix 框架,来创建一个 Email 客户端原型。
4709 0
使用IntelliJ IDEA 14和Maven创建java web项目
原文:使用IntelliJ IDEA 14和Maven创建java web项目 http://mark.leanote.com/post/%E4%BD%BF%E7%94%A8IntelliJ-IDEA-14%E5%92%8CMaven%E5%88%9B%E5%BB%BAjava-web%E9%A1%B9%E7%9B%AE 安装Maven 下载安装 去maven官网下载最新版。
1212 0
+关注
641
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载