dropmenu.js

EOS的一个很好的例子.包括页面构件、展现构件

_d=document;
ns4=(_d.layers)?true:false;
ns6=(navigator.userAgent.indexOf("Gecko")!=-1)?true:false;
mac=(navigator.appVersion.indexOf("Mac")!=-1)?true:false;
mac45=(navigator.appVersion.indexOf("MSIE 4.5")!=-1)?true:false;
if (ns6||ns4)
    mac=false;
ns61=(parseInt(navigator.productSub)>=20010726)?true:false;
ie4=(!_d.getElementById&&_d.all)?true:false;

var ua      = navigator.userAgent;
var opera   = /opera [56789]|opera\/[56789]/i.test(ua);
var ie      = !opera && /msie [56789]/i.test(ua);       // preventing opera to be identified as ie
var mozilla = !opera && /mozilla\/[56789]/i.test(ua);   // preventing opera to be identified as mz

menubarbackground="buttonface";
menubartext="buttontext";
menuitembackground="buttonface";
menuitemtext = "menutext";
menuhighlight="highlight";
menuhighlighttext ="highlighttext";

menuarray = "eosmenu";
maxmenuitem = 100;
menuobjname = "eosmenu";

subarrow1_gif_path="/fbrole/image/subarrow1.gif";
subarrow2_gif_path="/fbrole/image/subarrow2.gif";

var mydropmenu = new Array; // 保存所有的菜单的id等相关数据的数组
var dropmenubar_obj;

var overIframe = new Array();

function getoffset(e) 
{  
 var t=e.offsetTop;  
 var l=e.offsetLeft;  
 while(e=e.offsetParent) 
 {  
  t+=e.offsetTop;  
  l+=e.offsetLeft;  
 }  
 var rec = new Array(1); 
 rec[0]  = t; 
 rec[1] = l; 
 return rec 
}  

function DropMenu ()
{
	this.menuname;
	this.menuitemid;
	this.menuitemiconid;
	this.menuitemimgid;
	this.menuitemtextid;
	this.level;
	this.menubarid;
	this.menudivid;
	this.parentmenudivid;
	this.isvisible = false;
	
	this.showSubMenu = _show_sub_menu;
	this.hiddenSubMenu = _hidden_sub_menu;
	this.getMenuPath = _get_menu_path;
	
	function _show_sub_menu()
	{
	
		if (this.isvisible)
			return;
		if (this.level > 1) {
			var dropmenu = mydropmenu[this.parentmenudivid];
			dropmenu.showSubMenu();
			oversubmenuitem(gmobj(this.menuitemid), this.menuitemtextid, this.menuitemiconid, this.menuitemimgid);
			var menuid = gmobj(this.menudivid);
			var parapos = gpos(gmobj(this.parentmenudivid));
			var itempos = gpos(gmobj(this.menuitemid));
			menuid.style.position='absolute';
			menuid.style.left=parseInt(parapos[1]) + parseInt(itempos[3]);
			menuid.style.top=parseInt(parapos[0]) + parseInt(itempos[0]) - 2;
			menuid.style.visibility='visible';
		} else {
			var menuid = gmobj(this.menudivid);
			var barid = gmobj(this.menubarid);
			var barpos = gpos(barid);
			onmouseovermenu(barid);
			

			menuid.style.position='absolute';
			menuid.style.left=getoffset(dropmenubar_obj)[1] + parseInt(barpos[1])-1;
			menuid.style.top=getoffset(dropmenubar_obj)[0] + parseInt(barpos[0]) + parseInt(barpos[2])-1 ;
			menuid.style.visibility='visible';
			
			
		}
		this.isvisible = true;
		DivOverSel(menuid,this.level);
	}
function DivOutSel(level)
{

		if (overIframe[level-1] != null)
		{
			overIframe[level-1].style.visibility='hidden';
		}

}
	
function DivOverSel(obj,level)
{

	var iframe=null;
	if ( overIframe.length < level ){
		iframe = document.createElement("<iframe src='about:blank' style='position:absolute;left:0;top:0;z-index:998;display:none' scrolling='no' frameborder='0'></iframe>");
		overIframe.push(iframe);
	}
	else
		iframe = overIframe[level-1];
		document.body.insertAdjacentElement("beforeEnd",iframe);
		with(iframe.style)
		{
			top = obj.style.top;
			left = obj.style.left;
			width = obj.offsetWidth;
			height = obj.offsetHeight;
			iframe.style.visibility='visible';
			display = 'block';
		}
		obj.style.zIndex = "999";

}	
	function _hidden_sub_menu()
	{
		if (this.level > 1) {
			var dropmenu = mydropmenu[this.parentmenudivid];
			dropmenu.hiddenSubMenu();
			outsubmenuitem(gmobj(this.menuitemid), this.menuitemtextid, this.menuitemiconid, this.menuitemimgid);
			var menuid = gmobj(this.menudivid);
			menuid.style.visibility='hidden';
		} else {
			var menuid = gmobj(this.menudivid);
			menuid.style.visibility='hidden';
			var barid = gmobj(this.menubarid);
			barid.style.background=menubarbackground;
			barid.style.color=menubartext;
			
		}
		DivOutSel(this.level);
		this.isvisible = false;
	}
	
	function _get_menu_path(menutext)
	{
		var txt = menutext;
		var mymenu = this;
		while (mymenu.level > 1){
			txt = mymenu.menuname + "->" + txt;
			mymenu = mydropmenu[mymenu.parentmenudivid];
		}
		return mymenu.menuname + "->" + txt;
	}
}

function createmenubar() 
{
	var def_menubar = "";
	def_menubar = "<table id=\"eosmenu_dropmenu_bar\" cellpadding=0 cellspacing=0 border=0 class=outmenubar><tr><td>";
	def_menubar += "<table border=0 cellpadding=0 cellspacing=0 class=inmenubar>";
	def_menubar += "<tr><td height=23px><span class=menubarhand></span></td><td height=23px><span class=menubarhand></span></td>";
	for (i=1; i<=maxmenuitem; i++) {
		try {
			baritem = eval(menuarray+i);
		} catch (ee) {
			break;
		}
		var barname=menuobjname+"bar"+i;
		var menudiv=menuobjname+"div"+i;
		var hassub = true;
		try {
			var submenuvalue = eval(menuarray + i + "_1");
		} catch (ee) {
			hassub = false;
		}
		if (hassub) {
			def_menubar += "<td id="+barname+" class=menubar nowrap onMouseOver=\"showmenu('"+menudiv+"'); window.status='"+baritem[0]+"';\"";
			def_menubar += " onMouseOut=\"hiddenmenu('"+menudiv+"');window.status='';\">"+baritem[0]+"</td>";
		} else {
			def_menubar += "<td id="+barname+" class=menubar nowrap onMouseOver=\"onmouseovermenu(this);window.status='"+baritem[1]+"';\" onClick=\"doMenuBarAction('"+baritem[0]+"', '"+baritem[1]+"', '"+baritem[4]+"')\" ";
			def_menubar += " onMouseOut=\"onmouseoutmenu(this);window.status='';\">"+baritem[0]+"</td>";
		}
		def_menubar += "<td><span class=menubarsep></span></td>";
	}
	def_menubar += "<td></td></tr></table></td></tr></table>\n";
	deftext = def_menubar;
	document.write(def_menubar);
	def_menudiv = "";
	for (j=1; j<i; j++) {
		try {
			var submenuvalue = eval(menuarray + j + "_1");
		} catch (ee) {
			continue;
		}
		createmenudiv(j, 1);
		var dropmenu = new DropMenu();
		baritem = eval(menuarray+j);
		dropmenu.menudivid = menuobjname + "div" + j;
		dropmenu.menubarid = menuobjname + "bar" + j;
		dropmenu.menuname = baritem[0];
		dropmenu.level = 1;
		mydropmenu[menuobjname + "div" + j] = dropmenu;
	}
	document.write(def_menudiv);
	deftext += def_menudiv;
	dropmenubar_obj = gmobj("eosmenu_dropmenu_bar");
	return deftext;
}

function showmenu(mm) {
	mydropmenu[mm].showSubMenu();
}

function hiddenmenu(mm) {
	mydropmenu[mm].hiddenSubMenu();
}

function onmouseovermenu(mm) {
	mm.style.background=menuhighlight;
	mm.style.color=menuhighlighttext;
}

function onmouseoutmenu(mm) {
	mm.style.background=menuitembackground;
	mm.style.color=menuitemtext;
}

function doMenuBarAction(menuname, menuaction, menutarget)
{
	if (menuaction != null && menuaction != "#" && menuaction != ""){
		if (menuaction.indexOf(".") != -1 && menuaction.indexOf(".do?") == -1 && 
			menuaction.indexOf("?") == -1 && !strEndsWith(menuaction, ".do") &&
			!strEndsWith(menuaction, ".jsp"))
			menuaction = menuaction + ".do";
		if (menutarget == null || menutarget == "") {
			//在引用的html中需要包含这样的<font id="clickMenuAddress"></font>代码，才能通过点击菜单后将当前菜单的位置显示在页面中
			var clickMenuText = gmobj("clickMenuAddress");
			if (clickMenuText != null)
				clickMenuText.innerText = menuname;
			if (menuaction.indexOf("?") == -1)
				location.href=menuaction + "?clickCurrentMenuPath=" + menuname;
			else
				location.href=menuaction + "&clickCurrentMenuPath=" + menuname;
			return;
		} else {
			//在引用的html中需要包含这样的<font id="clickMenuAddress"></font>代码，才能通过点击菜单后将当前菜单的位置显示在页面中
			var clickMenuText = gmobj("clickMenuAddress");
			if (clickMenuText != null)
				clickMenuText.innerText = menuname;
			window.frames[menutarget].location.href=menuaction;
			return;
		}
	}
	return;
}

function doMenuAction(menutext, menuaction, menutarget, hassub, menudivid)
{
	if (hassub) return;
	if (menuaction != null && menuaction != "#" && menuaction != ""){
		if (menuaction.indexOf(".") != -1 && menuaction.indexOf(".do?") == -1 &&