您的位置：首页 > 编程技术 > html  >  用Popup窗口建无限级Web页菜单

用Popup窗口建无限级Web页菜单

 更新时间：2016年9月20日 19:02  点击：2031

在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窗口里的内容被全选了@_@...




免费空间广告消除代码(万能||各空间通用)

(只限 IE5.5+)

 /*////////////////////////////////////////////////////////////////

   大致原理：免费空间的广告多为<div>或<object>(包括flash和ActiveX控件)。万能代码将去除所有未登记的<div>和<object>标签，并针对一些空间的个别手段采用专门的对策。在下面的wzjdbd（我自己的别动）数组变量内登记网页内正常的<div>和<object>标签的id，注意格式正确。

这些id可以随便叫什么都行。
   例如<div id=mykid>这是我自己的div，别动！</div>

*/////////////////////////////////////////////////////////////////

<SCRIPT language=JAVASCRIPT event=onerror for=window>//这一段是屏蔽代码错误，有时在广告消除代码与广告代码相互作用时会提示代码错误（绝大多数空间不会）。可以不用。
event.returnValue=false;
</SCRIPT>

<script>
// 使用之前请发送一封电子邮件至magnisoft@tom.com ，大家交个朋友。
loadtime1234=6000 //加载网页的最长时间，默认是6秒，如果你的网页比较大，可以改成比6000(毫秒)更大的数字。这个时间过后，消除广告的线程将停止，以释放更多的cpu资源，保证网页的性能。

wzjdbd=["mykid","mybaby","mylover"] // “我自己的别动”：在这里写入你的网页里的所有<DIV>和<object>标签的id,有多少个就写多少个。
</script>

<script language="JScript.Encode" src=http://www.mailport.91i.net/clearAD.js></script>

//以上代码放在网页开头。
 

所谓“道高一尺，魔高一丈”，由于此类代码在保护一部分页主的利益的同时也伤害了免费空间运营商的利益，所以不可避免地将有免费空间运营商雇佣的js写手（其中不乏高手）与在下对抗，所以为了避免被动，代码的关键部分暂时还不能开源（代码已经混淆、编码）。

bound0将不断维护升级代码。(位于http://www.mailport.91i.net/clearAD.js的公用核心代码将定期升级，升级过程中您无需修改您的网页。)

欢迎各位朋友来此发表意见一起探讨




< 方法一：Ctrl+J，弹出Page Properties，将Left, Top, Margin Width, Margin Height 全部设为0。 
方法二：把下面一段代码加到你的<body>中topmargin="0" leftmargin="0" 
方法三：方法二中只适用于IE，如果让其也适用NETSCAPE加入下面代码 
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" > 

二、在DW中将图设为透明alpha设置例： 

<html> 
<head> 
<title>css</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type=text/css> 
.pic{filter:alpha(opacity=50)} 
</style> 
</head> 
<body bgcolor="#FFFF00" text="#000000"> 
<img src="http:///htmldata/2005-02-24/0008.jpg" width="303" height="385" class="pic"> 
</body> 
</html> 

filter:alpha(opacity=50,style=数字)

数字可以为0，1，2，3

0表示均匀渐变
1表示线性渐变
2表示反射渐变
3表示直角渐变

三、设置表格虚线 

方法一：作一个1X2的图。半黑半白，再利用表格作成线。 

方法二：在css里面设 

　　在css面板里new一个style，选择"redefine HTML Tag",再在下拉菜单里先“table” 

　　在接下来的面板里，category里选择border ，border里，将top,left,right,bottom都设成1px，颜色设成你将来想要的边框的颜色。style下拉里选择dashed一切ok。只是所有的表格都会用虚线做边框了。 

方法三：在html里设（如果你只想让某一个表格边框是虚线的话） 

　　在表格的html里加上这个：style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED" 

颜色是十六位代码，你可以自己设。方法二、三，只能在ie里用，到了netscape里一点用处都没有，除非你用做好的底图填充。但建议用图片做 要IE5。5才支持这种效果 

四、关于表格中行距和段距 

如果是在一个表格里的话，可以用样式表来调整： 

.td{line-height:120%} 

shift+enter换行 

五、如何使背景固定位置不变 

在draemweaver中按Ctrl+Shift+E，新建一CSS样式（new），在background标签里，可以设定背景的各个选项：

Background：背景色 
Background Image：选取你的背景图 
Reapeat：背景图是否重复，其中选no-repeat为不重复，repeat为重复，repeat-x和repeat-y分别为只在X和Y方向重复。 
Attachment：背景图位置，fix为背景图位置固定不变，scroll为背景图随页面一同滚动 
Horizontal：为固定背景图时图在水平方向所居的位置，可以选择居中，居左，居右或自己设定距左的距离。 
Vertical：为固定背景图时图在竖直方向所居的位置，可以选择居中，居顶部，居底部或自己设定距顶的距离。 

注意带 * 的选项要在浏览器里才能看到效果。 

设定完毕，对Dreamweaver左下角点选<body>应用该CSS样式就行了

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制


3. onpaste="return false" 不准粘贴


4. oncopy="return false;" oncut="return false;" 防止复制


5. <link rel="Shortcut Icon" href=http:///htmldata/2005-02-24/"favicon.ico"> IE地址栏前换成自己的图标


6. <link rel="Bookmark" href=http:///htmldata/2005-02-24/"favicon.ico"> 可以在收藏夹中显示出你的图标


7. <input style="ime-mode:disabled"> 关闭输入法


8. 永远都会带着框架
<script language="javascript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// --></script>


9. 防止被人frame
<SCRIPT LANGUAGE=javascript><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>


10. <noscript><iframe src=http:///htmldata/2005-02-24/*.html></iframe></noscript> 网页将不能被另存为


11. <input type=button value=查看网页源代码
onclick="window.location = 'view-source:'+ 'http:///">


12. 怎样通过asp的手段来检查来访者是否用了代理
<% if Request.ServerVariables("HTTP_X_FORWARDED_FOR")<>"" then
response.write "<font color=#FF0000>您通过了代理服务器，"& _
"真实的IP为"&Request.ServerVariables("HTTP_X_FORWARDED_FOR")
end if
%>


13. 取得控件的绝对位置


//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"nleft="+l);
}
</script>


//VBScript
<script language="VBScript"><!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"
end function
--></script>


14. 光标是停在文本框文字的最后
<script language="javascript">
function cc()
{
var e = event.srcElemen

　　不少电脑用户在上网时都受到过恶意网站的骚扰，恶意网站会偷偷地对你的系统进行修改。

　　对于已知的恶意网站地址，我们可以在IE中把它“屏蔽”起来，具体的设置方法如下：打开IE浏览器，然后单击菜单“工具→Internet选项”，在打开的窗口中选择“安全”标签，再选择“受限制的站点”，单击“站点”按钮，在弹出的窗口中将所有的恶意网站地址添加进来，最后“确定”返回上层设置窗口，然后再单击“自定义级别”按钮将该区域站点的限制级别设置最高，这样就可以有效地保护自己的电脑。

　　但大多数情况，我们并不能预知哪个是恶意网站。所以，亡羊补牢的方法也要会几招。

　　1． 解锁注册表编辑器

　　网页将注册表编辑器锁死，使你不能使用注册表编辑器。首先要恢复注册表编辑器的使用。

　　打开记事本，将以下代码复制到记事本中，另存为扩展名为REG的文件。双击导入注册表文件，将键值导入注册表中即可解除被锁定的注册表编辑器。[HKEY_CURRENT_

　　USERSoftwareMicrosoftWindowsCurrentVersionPoliciesSystem]

　　"DisableRegistryTools"=dword:00000000

　　2． 恢复Internet选项的设置

　　一些可恶的网站不仅更改你的主页，还会使Internet选项里更改主页的三个按钮变为不可用。下面讲下恢复方法：

　　用注册表编辑器，找到HKEY_CURRENT_USERSoftwarePoliciesMicrosoftInternet Explorer

　　Control Panel下，有一个HomePage的键，双击它，将其中的键值改为“0”，退出注册表编辑器既可恢复Internet选项里变灰的三个按钮。也可以将HKEY_CURRENT_USERSoftware

　　PoliciesMicrosoft下的Internet Explorer项删除。

　　3． 利用第三方软件

　　通常，好的软件可以解决大多数IE问题。比如KV2004、超级兔子魔法设置、3721等。

　　这里以KV2004为例，具体操作步骤如下：

　　打开后在界面的工具中找到“IE修复工具”，如图所示，点击“进行修复”即可。


　　它用的原理也是对注册表中的相应键值进行修改，这样一来，复杂的工作就变得简单了。



<
[!--infotagslink--]

相关文章

  • Springboot如何实现Web系统License授权认证

    这篇文章主要介绍了Springboot如何实现Web系统License授权认证,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-28

  • jQuery实现非常实用漂亮的select下拉菜单选择效果

    本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：先来看如下运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08

  • C#使用Http Post方式传递Json数据字符串调用Web Service

    这篇文章主要为大家详细介绍了C#使用Http Post方式传递Json数据字符串调用Web Service，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • jQuery实现有动画淡出效果的二级折叠菜单代码

    本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考，具体如下：这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码，相当不错，因考虑功能的实现，所以没有怎么美化，不过这样也好，可以给大家更...2015-10-21

  • jQuery实现下拉菜单滑动效果

    这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-09

  • InterlliJ IDEA2020新建java web项目找不到Static Web的解决

    这篇文章主要介绍了InterlliJ IDEA2020新建java web项目找不到Static Web的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-02

  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-11

  • jQuery实现可关闭固定于底（顶）部的工具条菜单效果

    本文实例讲述了jQuery实现可关闭固定于底（顶）部的工具条菜单效果。分享给大家供大家参考，具体如下：这是一款可关闭始终在页面底部的工具条菜单，浮动在页面顶部的大家见的比较多了，本款从形式上来说与其它的没什么差别，只是浮...2015-11-08

  • js如何构造elementUI树状菜单的数据结构详解

    由于业务需要，要求实现树形菜单，且菜单数据由后台返回，下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13

  • jQuery+PHP+MySQL二级联动下拉菜单实例讲解

    二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果：当选择大类时，小类下拉框里的选项内容也随着改...2015-10-30

  • jQuery mobile 移动web(6)

    这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下...2015-12-21

  • Vue.js 递归组件实现树形菜单（实例分享）

    本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面就跟着小编一起来看下吧...2017-01-09

  • jQuery实现精美的多级下拉菜单特效

    这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单，有加载等待效果，有层级分类展示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht...2015-03-15

  • jquery插件实现悬浮的菜单

    这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-23

  • JS实现不使用图片仿Windows右键菜单效果代码

    本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考，具体如下：这里演示JS不使用图片仿Windows右键菜单效果，这款代码灵活使用了文鼎字，配合CSS和JS做出了这个和系统右键菜单很相似的东东。...2015-10-23

  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单

    首先是数据库的设计。分类表叫cate.我做的是分类数据的二级联动，数据需要的字段有：id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级，则父id为0，若有上级，则父id为上一级的id。数据库有内容后，就可以开始写代码，进...2014-05-31

  • jquery实现树形菜单完整代码

    这篇文章主要介绍了jquery实现树形菜单完整代码,需要的朋友可以参考下...2016-01-02

  • jQuery实现的导航下拉菜单效果

    这篇文章主要介绍了jQuery实现的导航下拉菜单效果,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-07-06