srcpopmenu.js

JAVASCRIPT实现的popmenu

/***************************************************************************************
 *                               pop menu 2.01
 *     此代码版权归海洋工作室ocean所有，您可以非商业目的使用、复制、修改此代码，但需要
 * 保留本工作室的版权信息。如果您使用、修改此代码为商业目的，请联系本工作室取得使用许可。
 * 此脚本的商业许可为RMB30，被许可方除不能分发和转售之外，可以用于被许可方的任何项目和
 * 产品当中。
 * 如果您对本程序有什么建议，请email to:[e-mail]。
 *
 *                                                                          海洋工作室
 *                                                          http://www.oceanstudio.net
 *                                                     ocean([e-mail]) 制作
 *****************************************************************************************/
function popMenu(menuName,called,menuItem) {
	this.menuName = menuName;	//菜单名
	this.called = called;		//呼叫函数
	this.menu = null;			//菜单的指针
	this.menuItem = new Array();	//菜单项
	if (menuItem != null)
		this.menuItem = menuItem;
	this.parentObj = null;			//所依赖的对象
//样式属性		
	this.backgroundColor = "#f1f1f1";
	this.overColor = "#cccccc";
	this.textColor = "#000000";
	this.textOverColor = "#000000";
	this.width = "150";
	this.borderColor = "#999999";
	this.fontSize = "12px";
	this.cursor = "default";
	this.height = "22px";
	this.padding = "2px";

	var oDiv = document.createElement("DIV");
	with (oDiv) {
		id = "pop" + this.menuName;
		align = "left"
	}
	with (oDiv.style) {
		display = "none";
		backgroundColor = this.backgroundColor;
		color = this.textColor;
		width = this.width;
		position = "absolute";
		filter = "progid:DXImageTransform.Microsoft.Shadow(color='#777777', Direction=135, Strength=4)";
		border = "1px solid " + this.borderColor;
		fontSize=this.fontSize;
		cursor=this.cursor;
		padding=this.padding;
		zIndex = 100;
	}
	document.body.appendChild (oDiv);
	document.body.insertAdjacentElement("AfterBegin",oDiv);
	this.menu = oDiv;
	var f = new Function("event",this.menuName+".doDocumentClick()");
	document.attachEvent ("onclick",f);
	f = new Function("event",this.menuName+".doWindowResize()");
	window.attachEvent ("onresize",f);
	this.setItem();
}
//设置菜单项
popMenu.prototype.setItem = function (menuItem) {
	if (menuItem != null)
		this.menuItem = menuItem;
	
	var html = "";
	for (var i = 0;i<this.menuItem.length;i++) {
		html += '<div onclick="' + this.menuName + '.doClick(this)" onmouseover="' + this.menuName + '.doMouseOver(this)" onmouseout="' + this.menuName + '.doMouseOut(this)" style="border:1px solid '+this.backgroundColor+';height:'+this.height+';padding:3px">';
		html += this.menuItem[i] + "</div>";
	}
	this.menu.innerHTML = html;
}
//设置菜单的位置
popMenu.prototype.setPosition = function (obj,left,top) {
	if (left == null || top == null) {
		if (obj == null) {
			obj = this.parentObj;
		}
		else {
			this.parentObj = obj;
		}
		if (obj == null) return;
		this.menu.style.left = this.getLeft(obj);
		this.menu.style.top = this.getTop(obj) + obj.offsetHeight;
	}
	else {
		this.menu.style.left = left;
		this.menu.style.top = top;
	}
}
//显示菜单
popMenu.prototype.show = function (vbShow) {
	if (vbShow == null)
		vbShow = true;
	this.menu.style.display = (vbShow) ? "block" : "none";
}
//处理mouseover事件
popMenu.prototype.doMouseOver = function (oE) {
	window.event.returnValue = false;
	window.event.cancelBubble = true;
	with (oE.style) {
		backgroundColor = this.overColor;
		border ="1px solid " + this.borderColor;
		color = this.textOverColor;
	}
}
//处理mouseout事件
popMenu.prototype.doMouseOut = function (oE) {
	window.event.returnValue = false;
	window.event.cancelBubble = true;
	with (oE.style) {
		backgroundColor = "";
		color = "";
		border ="1px solid " + this.backgroundColor;
	}
}
//2.0:处理窗口大小变化事件（修正以前版本中窗口大小变化后菜单错位的bug）
popMenu.prototype.doWindowResize = function () {
	this.setPosition();
}
//处理doclick事件
popMenu.prototype.doClick = function (oE) {
	if (typeof(this.called) == "function")
		this.called(oE.innerText);
	this.show(false);
}
//处理document.onclick事件
popMenu.prototype.doDocumentClick = function () {
	this.show(false);
}
//内部函数：得到对象的左边距
popMenu.prototype.getLeft = function (obj) {
	var left = obj.offsetLeft;
	while (obj.tagName != "BODY") {
		obj = obj.offsetParent;
		left += obj.offsetLeft;
	}
	return left;
}
//内部函数：得到对象的上边距
popMenu.prototype.getTop = function (obj) {
	var top = obj.offsetTop;
	while (obj.tagName != "BODY") {
		obj = obj.offsetParent;
		top += obj.offsetTop;
	}
	return top;
}
//1.1:删除菜单
popMenu.prototype.deleteSelf = function () {
	this.menu.removeNode(true);
}
//1.1:判断菜单是否显示出来
popMenu.prototype.isShow = function () {
	return (this.menu.style.display == "none") ? false : true;
}
//2.0:增加一项（项目名，索引）
popMenu.prototype.addItem = function (item,index) {
	var length = this.menuItem.push(item);
	if (index != null && index >= 0 && index < length - 1)	{
		for (var i=length - 1;i > index;i--) {
			menuItem[i] = menuItem[i-1];
		}
		menuItem[index] = item;
	}
	this.setItem();
}
//2.0:减掉一项（索引）
popMenu.prototype.removeItem = function (index) {
	var length = this.menuItem.length;
	if (index != null && index >= 0 && index < length) {
		for (var i=index;i<length - 1;i++) {
			this.menuItem[i] = this.menuItem[i+1];
		}
	}
	this.menuItem.pop();
	this.setItem();
}