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

代码框架在(4)里面已经全部列出来了,现在工作就是按流程把他们完成。本来实现一个prototype的Menu菜单类只需要最多300行代码,可是后来做了一些操作习惯支持和UI显示上的优化后,代码猛增到了1000多行。不过final版本看起来确实比土不拉叽的prototype强很多哦emteeth.gif

    为了比较直观的说明代码的作用,我就从菜单的显示开始说。要显示一个菜单显必须构建一个菜单的实例,实例构建的完整代码如下:
None.gif<div oncontextmenu="return ShowContextMenu(this);" style="width: 200; height: 200; border: solid 1px blue;">
None.gif    
<table width="100%" height="100%" border="0">
None.gif         
<tr>
None.gif             
<td valign="middle" align="center">
None.gif                  right click me
None.gif             
</td>
None.gif         
</tr>
None.gif    
</table>
None.gif
</div>
None.gif<script language="javascript">
None.giffunction ShowContextMenu(elmt)
None.gif{
None.gif    
if ( !elmt.contextMenu )
None.gif    {
None.gif         elmt.contextMenu 
= CreateContextMenu();
None.gif    }
None.gif    
var win = window; 
None.gif    elmt.contextMenu.Show(win);
None.gif    
return false
None.gif}

ContractedBlock.gifExpandedBlockStart.gifCreateMenu#region CreateMenu
InBlock.giffunction CreateContextMenu()
InBlock.gif{
InBlock.gif    
var menu = new Menu();
InBlock.gif    
for ( var i=1 ; i < 6 ; i++ )
InBlock.gif    {
InBlock.gif         
var mi = new MenuItem('Menu Item 1-+ i, Alert);
InBlock.gif         menu.Add(mi);
InBlock.gif    }
InBlock.gif    
var submenu = new Menu();
InBlock.gif    
for ( var i=1 ; i < 5 ; i++ )
InBlock.gif    {
InBlock.gif         
var mi = new MenuItem('Menu I&tem 3-+ i, Alert);
InBlock.gif         submenu.Add(mi); 
InBlock.gif    }
InBlock.gif    
var submenu2 = new Menu();
InBlock.gif    submenu2.Add(
new MenuItem('&Menu Item 2-1', nullnullnull, submenu));
InBlock.gif    
var mi2 = new MenuItem('Me&nu Item 1-6', Alert, 'images/paste.small.png', null, submenu2);
InBlock.gif    menu.AddAt(mi2, 
2);
InBlock.gif    
return menu;
InBlock.gif}

ExpandedBlockEnd.gif
#endregion
</script>
   contextmenu2.gif   

生成的Context Menu效果


    这是完全手工添加菜单条目生成的一个Context Menu,最后会完成一个自动解析菜单数据来生成菜单的方法。

    我们现在来看这个Menu.prototype.Show(win)方法,这是菜单的第一级显示时的方法,它是由用户来调用的,因为菜单需要定位于用户给定位置(ContextMenu的用户给定位置就是鼠标点击的位置)。在菜单显示出第一级后,后续的子菜单的显示,都是在Menu类内部来处理的,子菜单位置是相对于parent menu,后续逻辑就都封装在Menu类内部了。Show()方法代码如下:
None.gifMenu.prototype.Show = function(win)
None.gif{
None.gif    if ( !win )
None.gif    {
None.gif        
return;
None.gif    }
None.gif    
var menuObj = this;
None.gif    menuObj.m_Opener 
= win;
None.gif    menuObj.__resumeItem();
None.gif    
var win = menuObj.m_Opener;
None.gif    
var popup, popwin, popdoc;
None.gif    
// 判断菜单的容器popup是否建立
None.gif
    if ( !menuObj.m_Popup )
None.gif    {
None.gif        popup 
= win.createPopup();
None.gif        popup.document.body.bgColor 
= 'windowtext';
None.gif        popup.document.body.style.backgroundColor 
= 'window';
None.gif        menuObj.m_Popup 
= popup;
None.gif    }
None.gif    
else
None.gif    {
None.gif        popup 
= menuObj.m_Popup;
None.gif        menuObj.__resumeAll();
None.gif    }
None.gif    popdoc 
= popup.document;
None.gif    popwin 
= popdoc.parentWindow;
None.gif    
// 判断是否需要重绘菜单的内容
None.gif
    if ( menuObj.m_Invalidate || !menuObj.m_Drawn )
None.gif    {
None.gif        popdoc.body.innerHTML 
= menuObj.Render().outerHTML;
None.gif        
// popdoc.body.appendChild(menuObj.Render());
None.gif
        menuObj.m_Invalidate = false;
None.gif        menuObj.m_Drawn 
= true;
None.gif    }
None.gif    
// 获取菜单的主table(菜单是使用table来实现的)
None.gif
    var menuHtml = popup.document.getElementById('menu');
None.gif    
// 这个show只是为了测量菜单的bounds而调用的
None.gif
    popup.show(0011);
None.gif    
var w = popdoc.body.scrollWidth; 
      // 判断菜单条目的Text的显示宽度是否在许可范围内,
      // 如果超出许可范围则ellipsis处理并返回新的MenuItem的width

None.gif    w 
= this.__isEllipsis(this, menuHtml);
None.gif    
var h = popdoc.body.scrollHeight;
None.gif    
var x = win.event.clientX + win.screenLeft;
None.gif    
var y = win.event.clientY + win.screenTop;
None.gif    popup.show(x, y, w, h); 
      // 菜单的显示特效,使用filter实现的
None.gif    
this.FadeinEffect(Menu.Attributes.ShowMenuEffect);
None.gif    menuObj.m_Bounds 
= 
None.gif    {
None.gif        top: x, left: y,
None.gif        width: menuHtml.offsetWidth,
None.gif        height: menuHtml.offsetHeight
None.gif    }; 
      // 把菜单操作的事件attach到菜单上,鼠标和键盘操作等
None.gif    menuObj.AttachEvents(menuHtml);
None.gif};
    上面注解应该都比较清楚了,只是这个popup.show(0, 0, 1, 1);比较有意思哈,当我们向popup里添加好了菜单的HTML元素后,我们发现在popup没有显示过之前,是根本取不到构成Menu UI的那个Table element的bounds信息的。这里show上一下后,就是为了让IE算出其bounds信息,然后再使用实际的bounds信息show菜单。这算一个小hack吧,也是这个Menu中比较有效率的地方,因为除了这个show(0, 0, 1,1)就在没有计算菜单bounds的地方了,当然也用不着了。然而为什么又没有把bounds计算也做成lazy load象popup的生成那样呢?是因为用户可能在菜单显示后修改IE的字体大小(比如按住Ctrl再滚动鼠标滚轮),这样保证了再次显示菜单时能修正菜单的实际bounds。而后面把menu的bounds存了起来是为了在显示子菜单时,方便判断其默认向右展开空间是否足够,如果不够宽则从parent menu左侧展开。 

    to be continued ...

转载于:https://www.cnblogs.com/birdshome/archive/2004/12/17/78200.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/305902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【gRPC】ProtoBuf 语言快速学习指南

继上篇【gRPC】 在.Net core中使用gRPC了解了gRPC的使用&#xff0c;gRPC基于HTTP/2和ProtoBuf&#xff0c;ProtoBuf就非常有必要好好了解一下了&#xff0c;那么ProtoBuf究竟是什么&#xff1f;ProtoBuf Google Protocol Buffer是一种语言无关、平台无关、可扩展的序列化结构数…

vspythonqt混合_PYQT5 vscode联合操作qtdesigner的方法

除了使用pycharm外&#xff0c;还可使用vscode来操作pyqt&#xff0c;方法如下&#xff1a;1. 在vscode中配置相关的pyqt的相关根据自己实际情况修改第一项pyqt的路径2. 创建一个文件夹&#xff0c;右键&#xff0c;最后一项可以创建一个新窗口创建的新窗口后缀为 .ui右键中有以…

发现 ASP.Net 的一个关于回车提交的 Bug ? 必须多于一个 Text 域回车提交,Server: ButtonX_Click 才能截获!...

ASP.Net 中: 如果 Text 类型的域只有一个,此时按下回车提交,WebServer 端 ButtonX_Click 竟然截获不到,只能在 WebServer 端 Page_Load 里截获,与传统的 Web Form 提交到 Action CGI 没区别了!假如 Text 类型的域多于一个,此时按下回车提交,在 WebServer 端 ButtonX_Click 可以…

TIOBE 1 月榜单:Python年度语言四连冠,C 语言再次第一

喜欢就关注我们吧&#xff01;TIOBE 公布了 2021 年 1 月的编程语言排行榜。TIOBE 本月公布了 2020 年度编程语言&#xff0c;Python 获得四连冠&#xff0c;是过去一年中最受欢迎的编程语言。Python 在 2020 年实现了 2.01&#xff05; 的正增长&#xff1b;C 紧随其后&#x…

java 验证登陆_java登陆界面验证

展开全部以下代码就是了。详细参照附件import java.awt.GridLayout;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JPanel;import javax.swin…

A piecture of J2EE Core Patterns

这张图是J2EE Core Patterns里面的一幅图片,在Enterprise Solution Patterns Using Microsoft.Net里面虽然模式的概念与应用大同小异&#xff0c;但是那张表现架构模式整体的图感觉有点不直观,相比之下这幅图显得更清晰一点。 发到这里供大家参考学习&#xff1a;&#xff09…

孙丕恕离开浪潮 仪器厂历时60年成为服务器龙头企业

2020年12月31日浪潮集团有限公司董事会选举邹庆忠为公司董事长&#xff08;法定代表人&#xff09;&#xff1b;孙丕恕不再担任公司董事长&#xff1b;公司不再聘任孙丕恕为首席执行官。另外&#xff0c;经省委研究决定&#xff0c;拟任省直部门&#xff08;单位&#xff09;副…

java 数组 树_java使用顺序数组实现二叉树

顺序数组实现二叉树实现原理对于下标为index的节点其满足1.左孩子节点的下标为2index12.右孩子节点的下标为2index2代码实现package tree;public class ArrayBinaryTree {private int[] arr;public ArrayBinaryTree(int[] arr){this.arrarr;}public void preOrder(int index){i…

hack 入侵 142 主机的过程

时间 2005 3 29 iis 日志文件显示有黑客痕迹 常用的iis 分析软件的介绍 使用 find 命令 入侵检测的常用方法参考 http://www.xfocus.net/articles/200208/440.html 编写日志脚本参考 http://www.blueidea.com/bbs/archivecontent.asp?id1304500 sql 注入方法介绍和预防 http:/…

【Docker】Asp.net core在docker容器中的端口问题

还记得【One by one系列】一步步学习docker&#xff08;三&#xff09;——实战部署dotnetcore中遇到的问题么&#xff1f;容器内部启动始终是80端口&#xff0c;并不由命令左右。docker run --name container-name -p 81:5000 mywebapi所谓知其然就要知其所以然&#xff0c;浅…

新华字典java_新华字典查询示例代码

package api.binstd.zidian;import java.net.URLEncoder;import api.util.HttpUtil;import net.sf.json.JSONArray;import net.sf.json.JSONObject;public class Word {public static final String APPKEY "your_appkey_here";// 你的appkeypublic static final Str…

.net 5.0 中的 JsonConsole

asp.net core 5.0 中的 JsonConsoleIntroasp.net core 5.0 中日志新增了 JsonConsole&#xff0c;还是输出日志到 Console&#xff0c;但是会应用 Json 格式的一个 Formatter 把日志格式化成 json 再输出到控制台Sample一起来看一个示例&#xff0c;以我的一个小项目为例子来演…

采用开源软件搭建WebGIS系统(6)数据格式

[本文版权由xiaotievip.sina.com所有&#xff0c;转载需得到作者同意。] 在国家基础地理信息中心下载到的数据格式是Shape file数据。Shape file数据由3个文件构成&#xff0c;*.shp&#xff0c;*.dbf和*.shx&#xff0c;分别存储空间数据、属性数据和两者间的关系。*.shp得专门…

java 按符号分割字符串_JAVA字符串按分隔符号字符串分割

在处理有规律的字符串的时候.有些字符串分割需要注意了..如下例子:public class Split {public static void main(String[] args) {String str1 "1,2,3,4,5";String str2 "1,2,3,4,";String str3 "1,,2,3,";String str4",,,,";System.…

.NET Core 使用Topshelf方式创建Windows服务

Topshelf是一个.NET Standard库&#xff0c;它消除了在.NET Framework和.NET Core中创建Windows服务的那些麻烦。安装Install-Package Topshelf代码using System; using System.Collections.Generic; using System.Text; using Topshelf;namespace ConsoleApp2222 {public clas…

用VC++修改注册表----让我们踏出第一步(适合初学者)

用VC修改注册表----让我们踏出第一步(适合初学者)转载自&#xff1a;www.csdn.net 开场白 你是不是非常期待通过自己的双手&#xff0c;写出一个有模有样的&#xff02;系统修改&#xff08;维护&#xff09;工具软件&#xff02;&#xff1f;我想答案应该是肯定的&…

Repeater分页

//ASP.NET中的DataList和Repeater提供了简单快速的方法來显示,其间&#xff0c;我们可以使用<ItemTemplate>更是使我们能随心所欲的控制数据的排放样式&#xff01;//.可惜的是它们不像Datagrid那样&#xff0c;有内置的分页功能。////如何解决呢&#xff1f;////其实我们…

单一职责在.NET中

单一职责是降低耦合度的指导思想&#xff0c;适用于一个微服务&#xff0c;一个类型&#xff0c;一个方法。微服务层&#xff1a;微服务一般按业务的领域来进行拆分&#xff1a;药房微服务就是药房的业务&#xff0c;护士站微服务就是护士站的业务&#xff0c;广义上没有什么问…

PDG转PDF的方法

下面是我在“小文论坛”发的关于PDG转PDF的办法转贴请注明出自“小文论坛”.点击链接访问小文论坛前些天在坛子里看到一位朋友发的通过代理登录教育网超星的办法,试了试,还不错,下下来了几本吉他方面和计算机方面的书。但下下来的书是加密保存的&#xff0c;当该用户过期后又怎…

Roslyn 使用 Directory.Build.props 管理多个项目配置

在一些大项目需要很多独立的仓库来做&#xff0c;每个仓库之间都会有很多相同的配置&#xff0c;本文告诉大家如何通过 Directory.Build.props 管理多个项目配置在我的 MVVM 框架需要三个不同的库&#xff0c;一个是 Framework 另外两个是 WPF 和 UWP 这三个库有很多重复的配置…