在IE里创建可覆盖ActiveX控件的DHTML菜单

一月 20, 2007 @ 2:13 上午 | 发表在 DHTML | 留下评论

对于很多面向企业用户的网页,使用下拉式菜单是很自然的事情。企业用户通常习惯于使用MS Windows类型的用户界面,下拉式菜单是最习惯的界面元素之一。下拉式菜单有很多种,有基于DHTML的,有基于Applet的, 也有基于ActiveX控件的。其中DHTML菜单对大部分应用是最合适的。因为相对于另外两种菜单,它对客户端没有特别的要求。Applet和ActiveX菜单都需要在客户端安装对象,特别Applet还要求安装庞大的JVM,这对很多客户都不能接受。另外随着IE对安全级别的提高,用户需要修改浏览器的安全设置,这也是很多企业级用户不能接受的。而DHTML菜单唯一的要求只要浏览器支持Javascript,现在基本上所有的浏览器都支持,所以成为最合适的菜单选择。但DHTML菜单也不是没有缺点,其中一个就是下拉的菜单不能覆盖ActiveX控件。当下拉的菜单碰到ActiveX控件的时候,IE会把ActiveX控件显示在最上面,这样菜单就会被截断。没有谁会需要这样的方式,所以为了解决这个问题,很多人就会宁愿选用Applet或ActiveX菜单。

问题的根源在于IE对控件的处理方式上。每个网页的显示元素都有一个z-index值,当多个元素重叠的时候,IE通过使用z-index来决定谁覆盖谁。z-index高的元素会覆盖z-index低的元素。听起来似乎只要给菜单项一个高的z-index值就可以解决上面的问题。不是那么简单。问题就在IE对普通HTML元素和控件的z-index是分开处理的。不管HTML元素的z-index值多高,只要和控件有重叠,就会被控件覆盖。

对IE为什么要这样做非常困惑,但反正我们对于微软的类似做法早已是见多了,所以也就见怪不怪了。但问题还是要解决,Applet菜单对我是绝对不可接受的。 为了一个菜单强迫客户安装十几兆的JVM,估计产品会都被退货。

所幸的是还有一个IFrame。IFrame在IE的z-index显示结构里面地位很特别。它横跨两边。普通HTML元素显示会把它计算在内,控件显示也会考虑它。这样,我们就可以利用IFrame把控件挡在下面而显示菜单。简单地说,我们可以给控件z-index为1,创建一个和菜单一样大小的IFrame,并且设它的z-index为2,然后菜单的z-index为3。这样的话,菜单就可以成功地显示在控件上面。

IFrame可以直接用HTML来些,只要保证它的大小和上面的菜单项大小一样就可以了。一个事例代码可以是:

<IFRAME style="DISPLAY:none;LEFT:0px;POSITION:absolute;TOP:0px" src="javascript:false;" frameBorder="0" scrolling="no">
</IFRAME>

在src里面放置javascript:false的目的是防止IFrame试图载入文件。

在真正的菜单开发上,更有可能用到是动态地生成IFrame.这可以使用insertAdjacentHTML()来做到。然后可以通过改变IFrame的style来调整它的尺寸,位置和显示与否。下面的CSS属性可能会用到。

<em>iframe</em>.style.top
<em>iframe</em>.style.left
<em>iframe</em>.style.width
<em>iframe</em>.style.height
<em>iframe</em>.style.zIndex
<em>iframe</em>.style.display

如果你决定不自己开发(明智的决定,开发并维护一个菜单其实是一件耗力的事情,想想这么多的浏览器版本就知道是一件多麻烦的事了),而采用现成的菜单的话。在决定使用某一个产品之前,你可能会想知道它是否支持ActiveX控件。答案有点出人意料,支持的其实很少。在我测试过的产品中,免费的只有Yahoo的YUI支持,付费的有milonic sothink支持。在YUI中,缺省 的设置只支持IE6及以下版本的,所以如果你需要支持IE7,在代码里面把菜单项的iframe设为true就可以了。另外,ActiveX控件需要放在跟菜单不同的IFrame里。不确定为什么会这样,但测试的结果是这样.

Advertisements

发表评论 »

RSS feed for comments on this post. TrackBack URI

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

在WordPress.com的博客.
Entries评论 feeds.

%d 博主赞过: