300分求IE5中能遮盖住Object和Select对象的js菜单！！

boarduck 2004-08-13 04:51:06

一定是在ie5中运行。。

iframe和popup都需要ie5.5以上。。。

分不够再加，我倾家荡产跪求。。

...全文

276 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

chancelin 2004-08-14

打赏
举报

菜单示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<script language="JavaScript" src="js/popup-menu.js"></script>
<script language="JavaScript">
function checkMenu(ev) {
var el = Menu.is_ie ? Menu.getElement(ev) : Menu.getTargetElement(ev);
for (; el != null; el = el.parentNode)
// FIXME: allow end-user to click some link without closing the
// calendar. Good to see real-time stylesheet change :)
if (el.tagName=='DIV'||el.tagName=='A') break;
if (el == null) {
// calls closeHandler which should hide the calendar.
hideMenu();
Menu.stopEvent(ev);
}
}
function showMenu(ev){
var el = Menu.getElement(ev);
if(Menu.timeout)clearTimeout(Menu.timeout);
//var el=document.getElementById(id);
if (el.menu != null) {
el.menu.hide();
}
el.menu.showAtElement(el); // show the calendar below it
// catch "mousedown" on document
Menu.addEvent(document, "mouseover", checkMenu);
//return false;
}
function hideMenu(ev){
var el = Menu.getElement(ev);
if(Menu.timeout)clearTimeout(Menu.timeout);
// if (el==null || el.menu == null || el.menu!=Menu._M) {
Menu.timeout=setTimeout("Menu.hide()",250);
//}
}
function showMenuAt(m,id){
var el=document.getElementById(id);
el.menu=m;
Menu.addEvent(el,"mouseover",showMenu);
Menu.addEvent(el,"mouseout",hideMenu);
}
</script>
<style type="text/css">
div.popup-menu { position: relative; }
.popup-menu, .popup-menu table {
font-size: 14px;
color: #000;
cursor: default;
background-color: #759704;
}
.popup-menu thead .headrow { /* This holds the current "month, year" */
font-weight: bold; /* Pressing it will take you to the current date */
text-align: center;
padding: 2px;
background: #89DA81;
color: #232364;
}

.popup-menu thead .hilite { /* How do the buttons in header appear when hover */
background: #afa;
color: #000;
border: 1px solid #084;
padding: 1px;
}

.popup-menu tbody .menurow { /* Cells <TD> containing month days dates */
color: #564;
background:#E1E8C8;
}
A, A:ACTIVE, A:HOVER, A:LINK, A:VISITED {
TEXT-DECORATION: none;
}
A {
COLOR: #003399;
}
A:visited {
COLOR: #003399;
}
A:hover {
COLOR: #cc6600;
TEXT-DECORATION: underline;
}
A:active {
COLOR: #dd0000;
}
.popup-menu tbody .hilite { /* Hovered cells <TD> */
background: #efd;
padding: 1px 3px 1px 1px;
border: 1px solid #bbb;
}

.popup-menu tbody .active { /* Active (pressed) cells <TD> */
background: #dec;
padding: 2px 2px 0px 2px;
}

.popup-menu tbody .selected { /* Cell showing today date */
font-weight: bold;
border: 1px solid #000;
padding: 1px 3px 1px 1px;
background: #f8fff8;
color: #000;
}

.popup-menu tbody .weekend { /* Cells showing weekend days */
color: #a66;
}

.popup-menu tbody .today { font-weight: bold; color: #0a0; }

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
visibility: hidden;
}

.popup-menu tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
display: none;
}

/* The footer part -- status bar and "Close" button */

.popup-menu tfoot .footrow { /* The <TR> in footer (only one right now) */
text-align: center;
background: #565;
color: #fff;
}

.popup-menu tfoot .ttip { /* Tooltip (status bar) cell <TD> */
padding: 2px;
background: #250;
color: #efa;
}

.popup-menu tfoot .hilite { /* Hover style for buttons in footer */
background: #afa;
border: 1px solid #084;
color: #000;
padding: 1px;
}

.popup-menu tfoot .active { /* Active (pressed) style for buttons in footer */
background: #7c7;
padding: 2px 0px 0px 2px;
}

/* Combo boxes (popup-menus that display months/years for direct selection) */

</style>
<body>
<script language="JavaScript">
var menu=new Menu();
menu.add("text1","href2");
menu.add("text2","href3","_blank","Only");
menu.add("text3","href4");
menu.add("text4","href5");
menu.add("text5","href6");
menu.create();
var menu2=new Menu("Only Test2");
menu2.add("text21","href22");
menu2.add("text22","href32");
menu2.add("text23","href42");
menu2.add("text24","href52");
menu2.add("text25","href62");
menu2.create();

</script>
<a href="#" id="a">show1</a><br>
defhuiaewhfuowoefhefheofhoew<a href="#" id="b">show12</a><br>
<script language="JavaScript">
showMenuAt(menu,'a');
showMenuAt(menu2,'b');

</script>
</body>
</html>

chancelin 2004-08-14

打赏
举报

盖不住就不能隐藏起来吗？这是我自己写的菜单：
Menu = function(title){
this.count=0;
this.title=title;
this.items=new Array();
this.timeout=null;
}
Menu.timeout=null;
Menu._M=null;
Menu.is_ie = ( (navigator.userAgent.toLowerCase().indexOf("msie") != -1) &&
(navigator.userAgent.toLowerCase().indexOf("opera") == -1) );

Menu.getAbsolutePos = function(el) {
var r = { x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent) {
var tmp = Menu.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};

Menu.getElement = function(ev) {
if (Menu.is_ie) {
return window.event.srcElement;
} else {
return ev.currentTarget;
}
};

Menu.getTargetElement = function(ev) {
if (Menu.is_ie) {
return window.event.srcElement;
} else {
return ev.target;
}
};

Menu.stopEvent = function(ev) {
if (Menu.is_ie) {
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
ev.preventDefault();
ev.stopPropagation();
}
};

Menu.addEvent = function(el, evname, func) {
if (Menu.is_ie) {
el.attachEvent("on" + evname, func);
} else {
el.addEventListener(evname, func, true);
}
};

Menu.removeEvent = function(el, evname, func) {
if (Menu.is_ie) {
el.detachEvent("on" + evname, func);
} else {
el.removeEventListener(evname, func, true);
}
};
Menu._onTableMouseOver = function(ev){
if(Menu.timeout)clearTimeout(Menu.timeout);
}
Menu.hide = function(){
if(Menu._M)Menu._M.hide();
}
Menu.prototype.create = function (_par) {
var parent = null;
if (! _par) {
parent = document.getElementsByTagName("body")[0];
} else {
parent = _par;
}

var table = document.createElement("table");
this.table = table;
table.cellSpacing = 1;
table.cellPadding = 0;

var div = document.createElement("div");
this.element = div;
div.className = "popup-menu";
div.style.position = "absolute";
div.style.display = "none";
div.appendChild(table);
div.menu = this;
Menu.addEvent(div, "mouseover", Menu._onTableMouseOver);

var cell = null;
var row = null;
if(this.title){
var thead = document.createElement("thead");
table.appendChild(thead);
row = document.createElement("tr");
thead.appendChild(row);
row.className = "headrow";
cell = document.createElement("td");
row.appendChild(cell);
cell.appendChild(document.createTextNode(this.title));
}

var tbody = document.createElement("tbody");
table.appendChild(tbody);
var hyperlink=null;
for(var i=0;i<this.count;i++){
row = document.createElement("tr");
row.className = "menurow";
tbody.appendChild(row);
cell = document.createElement("td");
cell.item=this.items[i];
row.appendChild(cell);
hyperlink=document.createElement("a");
hyperlink.className="link";
hyperlink.appendChild(document.createTextNode(cell.item.text));
hyperlink.href=cell.item.href;
if(cell.item.title)hyperlink.title=cell.item.title;
if(cell.item.target)hyperlink.target=cell.item.target;
cell.appendChild(hyperlink);
}
parent.appendChild(this.element);
}

Menu.prototype.destroy = function () {
var el = this.element.parentNode;
el.removeChild(this.element);
delete el;
};
Menu.prototype.add = function(text,href,target,title){
this.items[this.count++]=new MenuItem(text,href,target,title);
}
Menu.prototype.show = function () {
if(Menu._M)Menu._M.hide;
this.element.style.display = "block";
this.hideShowCovered();
Menu._M=this;
};

Menu.prototype.hide = function () {
this.element.style.display = "none";
};

Menu.prototype.showAt = function (x, y) {
var s = this.element.style;
s.left = x + "px";
s.top = y + "px";
this.show();
};

Menu.prototype.showAtElement = function (el) {
var p = Menu.getAbsolutePos(el);
this.showAt(p.x + el.offsetWidth, p.y+5);
};
Menu.prototype.hideShowCovered = function () {
var tags = new Array ('applet', 'iframe', 'select');
var el = this.element;

var p = Menu.getAbsolutePos(el);
var EX1 = p.x;
var EX2 = el.offsetWidth + EX1;
var EY1 = p.y;
var EY2 = el.offsetHeight + EY1;

for (var k = 0; k < tags.length; k++) {
var ar = document.getElementsByTagName(tags[k]);
var cc = null;

for (var i = 0; i < ar.length; i++) {
cc = ar[i];

p = Menu.getAbsolutePos(cc);
var CX1 = p.x;
var CX2 = cc.offsetWidth + CX1;
var CY1 = p.y;
var CY2 = cc.offsetHeight + CY1;

if ((CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
cc.style.visibility = "visible";
} else {
cc.style.visibility = "hidden";
}
}
}
};

MenuItem = function(text,href,target,title){
this.text=text;
this.href=href;
this.target=target;
this.title=title;
}
MenuItem.prototype.element = function(){
var hyperlink=document.createElement("a");
hyperlink.className="link";
hyperlink.appendChild(document.createTextNode(this.text));
hyperlink.href=this.href;
if(this.title)hyperlink.title=this.title;
if(this.target)hyperlink.target=this.target;
return hyperlink;
}

boarduck 2004-08-14

打赏
举报

可是我要隐藏的是长400px+，宽500px+的activex控件啊。。

191301587 2004-08-14

打赏
举报

菜单层显示时，隐藏显示域下的select控件

boarduck 2004-08-14

打赏
举报

As of Microsoft® Internet Explorer 5.5, the iframe object is windowless and supports the zIndex property. In earlier versions of Internet Explorer, the iframe object is windowed and, like all windowed controls, ignores the zIndex property. If you maintain Web pages that were designed for earlier versions of Internet Explorer that do not support the zIndex property, you might want to redesign the pages, especially if the pages contain iframe objects that are stacked on top of windowed controls, such as select objects. You can use the visibility attribute to hide windowed controls that you want an iframe object to overlap. You can also position windowed controls so that iframe objects do not overlap them.

z-index需要ie5.5支持，晕，没这个属性也无法完整显示菜单，圆满了我..

boarduck 2004-08-14

打赏
举报

谢谢了，现在忙，一会再结贴..

evafly920 2004-08-13

打赏
举报

<HTML><HEAD><TITLE>如何盖住(下拉列表框) Select ?</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=gb2312"></HEAD>
<BODY text="#000000" bgcolor="#ffffff">
<div style="font:14;width:60;color:white;background:black;padding:4"
onmouseover="menu1.style.display=''" onmouseout="menu1.style.display='none'">
菜单 </div><br>
<OBJECT id=menu1 style="display:none;z-index:1000; position:absolute; top:40; left:7; width:152; height: 200;" type="text/x-scriptlet" data="about:<div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>

<div>菜单１</div><div>菜单２</div><div>菜单３</div><div>菜单４</div><div>菜单５</div><div>菜单６</div><div>菜单７</div></div>" onmouseover="menu1.style.display=''" onmouseout="menu1.style.display='none'"></OBJECT>
<SELECT name="select">
<OPTION value="fdsa" selected>fdsgdsfgdsfgdfgdsgdsfgdsgdsa</OPTION>
</SELECT><br><iframe></iframe>
</BODY></HTML>

----------------------------------------------------------
http://www.cn5135.com
诚邀志同道合的朋友共同创业！
MSN:eFongNet@Hotmail.com QQ:7733349

boarduck 2004-08-13

打赏
举报

iframe的确在ie4里就支持了，但是里面有些属性是ie5.5以上才支持。。
<iframe src='' style=\"position:absolute; visibility:inherit; top:0px; left:0px; width:89px; height: "+(i-0.4)*25+"px ; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe>

比如上面的filter属性是在ie5.5里加上去的。。但我去掉filter这一段，我的菜单还是无法显示。。

msdn帮助上的iframe也是ie5.5才支持。。

能否告诉我是不是position或visibility,z-index等属性哪个是ie5能支持，哪些是不支持的？