右键菜单实现javascript
2008-09-08 14:00
351 查看
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body bgcolor="#eeeeee">
<br /><br /><br /><br /><br /><span style='font-size:40px;'>点击右键试试吧</span>
<script language="javascript">
function AttachEvent(obj, PjBnqAI_l96, CFl97, AjdjOLf_98)
{
if(obj["addEventListener"])
{
var qiVTmdtA99 = (typeof(AjdjOLf_98) != "undefined" && AjdjOLf_98) ? true : false;
obj["addEventListener"](PjBnqAI_l96, CFl97, qiVTmdtA99);
}
else
{
obj["attachEvent"]("on"+ PjBnqAI_l96, CFl97);
}
}
/*
功能：菜单类
作者：梨花街网站__巍巍乎
目期：2007.1.15
版本：1.0
修改：无
仅支持ie，不兼容firefox，有兴趣的朋友可以自己改，大至思路在这里
*/
function ContentClass()
{
var _oDiv = null;
var _oTable = null;
var nSelected = -1;
var _fnArray = new Array(30);
var _oRows = null;
var _nCurrent = 0;
var oClick = null;
var oKeyDown = null;
this.fnSelectedRows = function(nIndex)
{
if(nIndex >= 0 && nIndex <= (_oTable.rows.length-1))
{
if(nSelected != nIndex)
{
if(nSelected > -1)
{
if(_oTable.rows.length > nSelected)
{
_oTable.rows[nSelected].style.backgroundColor = "";
}
}
}
_oTable.rows[nIndex].style.backgroundColor = "#E8EEF7";
nSelected = nIndex;
}
}
oKeyDown = this.fnSelectedRows;
this.__OnKeyDown = function(e)
{
if(_oDiv.style.display == "")
{
var keyNum = 0;
if(window.event)
{
keyNum = e.keyCode;
}
else
{
keyNum = e.which;
}
var nIndex = -1;
switch(keyNum)
{
case 37:
case 38:
nIndex = nSelected - 1;
if(nSelected == 0)
{
nIndex = _oTable.rows.length - 1;
}
oKeyDown(nIndex);
break;
case 39:
case 40:
nIndex = nSelected + 1;
if(nSelected == _oTable.rows.length - 1)
{
nIndex = 0;
}
oKeyDown(nIndex);
break;
case 13:
if(nSelected > -1 && nSelected <= (_oTable.rows.length - 1))
{
oClick(e);
}
break;
default:
return false;
}
}
}
this.ClickRows = function(e)
{
_oRows = null;
oGetRows(e.srcElement);
if(_oRows != null)
{
for(var i=0; i<_nCurrent; i++)
{
if(_oRows == _fnArray[i][0])
{
_fnArray[i][1]();
_oDiv.style.display = "none";
break;
}
}
}
}
oClick = this.ClickRows;
this._onMouseOver = function(e)
{
_oRows = null;
oGetRows(e.srcElement);
if(_oRows != null)
{
oKeyDown(_oRows.rowIndex);
}
}
this._onContextMenu = function(e)
{
if(_oDiv.style.display != "")
{
_oDiv.style.display = "";
}
var tempx;
var tempy;
if(e.pageX)
{
tempx = e.pageX;
tempy = e.pageY;
}
else
{
tempx = e.clientX;
tempy = e.clientY;
}
if((tempy + _oDiv.clientHeight + 4) > document.body.clientHeight)
{
tempy = tempy - _oDiv.clientHeight - 4;
if((tempy + _oDiv.clientHeight + 4) > document.body.clientHeight)
{
tempy = document.body.clientHeight - _oDiv.clientHeight - 4;
}
}
else
{
tempy -= 2;
}
if((tempx + _oDiv.clientWidth + 4) > document.body.clientWidth)
{
tempx = tempx - _oDiv.clientWidth - 4;
if((tempx + _oDiv.clientWidth + 4) > document.body.clientWidth)
{
tempx = document.body.clientWidth - _oDiv.clientWidth - 4;
}
}
else
{
tempx -= 2;
}
_oDiv.style.top = (document.body.scrollTop + tempy).toString() + "px";
_oDiv.style.left = (document.body.scrollLeft + tempx).toString() + "px";
return false;
}
var __onContextMenu = this._onContextMenu;
this._onClick = function(e)
{
if(_oDiv.style.display == "")
{
_oDiv.style.display = "none";
}
}
_oDiv = document.createElement("<div style='display:none;top:0px;left:0px;position:absolute;width:150px;overflow:auto;background-color:#FFFFFF; border-width:1px; border-style:solid; border-bottom-color: #676767; border-right-color:#676767; border-left-color:#CCCCCC; border-top-color:#CCCCCC;'></div>")
document.body.appendChild(_oDiv);
_oTable = document.createElement("<table width='100%' border='0' cellpadding='3' cellspacing='0'></table>")
_oTable.appendChild(document.createElement("tbody"));
_oTable.style.cursor = "pointer";
_oDiv.appendChild(_oTable);
AttachEvent(_oTable, "click", this.ClickRows);
AttachEvent(_oTable, "mouseover", this._onMouseOver);
AttachEvent(document.body, "contextmenu", __onContextMenu);
AttachEvent(document.body, "click", this._onClick);
AttachEvent(document.body, "keydown", this.__OnKeyDown);
var oGetRows = null;
this.GetRows = function(obj)
{
if(typeof(obj.tagName) != "undefined" && obj.tagName.toLowerCase() == "tr")
{
_oRows = obj;
return;
}
if(obj != null && obj.parentNode != null)
{
oGetRows(obj.parentNode);
}
else
{
_oRows = null;;
}
}
oGetRows = this.GetRows;
this.AppendMenu = function(strMenuText, strImage, fnClickFunction)
{
if(_oTable != null)
{
if(_nCurrent < 30)
{
var root = _oTable.tBodies[0];
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
oTd.style.width = "20px";
if(typeof(strImage) == "string")
{
oTd.innerHTML = "<img src='"+ strImage +"' width='16' height='16' />"
}
else
{
oTd.innerHTML = "·";
}
oTr.appendChild(oTd);
oTd = document.createElement("td")
oTd.innerHTML = strMenuText;
oTr.appendChild(oTd);
root.appendChild(oTr);
_fnArray[_nCurrent] = new Array(2);
_fnArray[_nCurrent][0] = oTr;
_fnArray[_nCurrent][1] = fnClickFunction;
_nCurrent++;
}
else
{
//菜单超过最大限度
}
}
}
this.RemoveMenu = function(nIndex)
{
}
}
</script>
<script language="javascript">
var pageClass = new ContentClass();
pageClass.AppendMenu("关于本软件", "images/Folder.bmp", fnTest0);
pageClass.AppendMenu("设置权限", "images/Folder.bmp", fnTest1);
pageClass.AppendMenu("删除图片", "images/Folder.bmp", fnTest2);
pageClass.AppendMenu("你在啊", "images/Folder.bmp", fnTest3);
function fnTest0()
{
alert(0);
}
function fnTest1()
{
alert(1);
}
function fnTest2()
{
alert(2);
}
function fnTest3()
{
alert(3);
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body bgcolor="#eeeeee">
<br /><br /><br /><br /><br /><span style='font-size:40px;'>点击右键试试吧</span>
<script language="javascript">
function AttachEvent(obj, PjBnqAI_l96, CFl97, AjdjOLf_98)
{
if(obj["addEventListener"])
{
var qiVTmdtA99 = (typeof(AjdjOLf_98) != "undefined" && AjdjOLf_98) ? true : false;
obj["addEventListener"](PjBnqAI_l96, CFl97, qiVTmdtA99);
}
else
{
obj["attachEvent"]("on"+ PjBnqAI_l96, CFl97);
}
}
/*
功能：菜单类
作者：梨花街网站__巍巍乎
目期：2007.1.15
版本：1.0
修改：无
仅支持ie，不兼容firefox，有兴趣的朋友可以自己改，大至思路在这里
*/
function ContentClass()
{
var _oDiv = null;
var _oTable = null;
var nSelected = -1;
var _fnArray = new Array(30);
var _oRows = null;
var _nCurrent = 0;
var oClick = null;
var oKeyDown = null;
this.fnSelectedRows = function(nIndex)
{
if(nIndex >= 0 && nIndex <= (_oTable.rows.length-1))
{
if(nSelected != nIndex)
{
if(nSelected > -1)
{
if(_oTable.rows.length > nSelected)
{
_oTable.rows[nSelected].style.backgroundColor = "";
}
}
}
_oTable.rows[nIndex].style.backgroundColor = "#E8EEF7";
nSelected = nIndex;
}
}
oKeyDown = this.fnSelectedRows;
this.__OnKeyDown = function(e)
{
if(_oDiv.style.display == "")
{
var keyNum = 0;
if(window.event)
{
keyNum = e.keyCode;
}
else
{
keyNum = e.which;
}
var nIndex = -1;
switch(keyNum)
{
case 37:
case 38:
nIndex = nSelected - 1;
if(nSelected == 0)
{
nIndex = _oTable.rows.length - 1;
}
oKeyDown(nIndex);
break;
case 39:
case 40:
nIndex = nSelected + 1;
if(nSelected == _oTable.rows.length - 1)
{
nIndex = 0;
}
oKeyDown(nIndex);
break;
case 13:
if(nSelected > -1 && nSelected <= (_oTable.rows.length - 1))
{
oClick(e);
}
break;
default:
return false;
}
}
}
this.ClickRows = function(e)
{
_oRows = null;
oGetRows(e.srcElement);
if(_oRows != null)
{
for(var i=0; i<_nCurrent; i++)
{
if(_oRows == _fnArray[i][0])
{
_fnArray[i][1]();
_oDiv.style.display = "none";
break;
}
}
}
}
oClick = this.ClickRows;
this._onMouseOver = function(e)
{
_oRows = null;
oGetRows(e.srcElement);
if(_oRows != null)
{
oKeyDown(_oRows.rowIndex);
}
}
this._onContextMenu = function(e)
{
if(_oDiv.style.display != "")
{
_oDiv.style.display = "";
}
var tempx;
var tempy;
if(e.pageX)
{
tempx = e.pageX;
tempy = e.pageY;
}
else
{
tempx = e.clientX;
tempy = e.clientY;
}
if((tempy + _oDiv.clientHeight + 4) > document.body.clientHeight)
{
tempy = tempy - _oDiv.clientHeight - 4;
if((tempy + _oDiv.clientHeight + 4) > document.body.clientHeight)
{
tempy = document.body.clientHeight - _oDiv.clientHeight - 4;
}
}
else
{
tempy -= 2;
}
if((tempx + _oDiv.clientWidth + 4) > document.body.clientWidth)
{
tempx = tempx - _oDiv.clientWidth - 4;
if((tempx + _oDiv.clientWidth + 4) > document.body.clientWidth)
{
tempx = document.body.clientWidth - _oDiv.clientWidth - 4;
}
}
else
{
tempx -= 2;
}
_oDiv.style.top = (document.body.scrollTop + tempy).toString() + "px";
_oDiv.style.left = (document.body.scrollLeft + tempx).toString() + "px";
return false;
}
var __onContextMenu = this._onContextMenu;
this._onClick = function(e)
{
if(_oDiv.style.display == "")
{
_oDiv.style.display = "none";
}
}
_oDiv = document.createElement("<div style='display:none;top:0px;left:0px;position:absolute;width:150px;overflow:auto;background-color:#FFFFFF; border-width:1px; border-style:solid; border-bottom-color: #676767; border-right-color:#676767; border-left-color:#CCCCCC; border-top-color:#CCCCCC;'></div>")
document.body.appendChild(_oDiv);
_oTable = document.createElement("<table width='100%' border='0' cellpadding='3' cellspacing='0'></table>")
_oTable.appendChild(document.createElement("tbody"));
_oTable.style.cursor = "pointer";
_oDiv.appendChild(_oTable);
AttachEvent(_oTable, "click", this.ClickRows);
AttachEvent(_oTable, "mouseover", this._onMouseOver);
AttachEvent(document.body, "contextmenu", __onContextMenu);
AttachEvent(document.body, "click", this._onClick);
AttachEvent(document.body, "keydown", this.__OnKeyDown);
var oGetRows = null;
this.GetRows = function(obj)
{
if(typeof(obj.tagName) != "undefined" && obj.tagName.toLowerCase() == "tr")
{
_oRows = obj;
return;
}
if(obj != null && obj.parentNode != null)
{
oGetRows(obj.parentNode);
}
else
{
_oRows = null;;
}
}
oGetRows = this.GetRows;
this.AppendMenu = function(strMenuText, strImage, fnClickFunction)
{
if(_oTable != null)
{
if(_nCurrent < 30)
{
var root = _oTable.tBodies[0];
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
oTd.style.width = "20px";
if(typeof(strImage) == "string")
{
oTd.innerHTML = "<img src='"+ strImage +"' width='16' height='16' />"
}
else
{
oTd.innerHTML = "·";
}
oTr.appendChild(oTd);
oTd = document.createElement("td")
oTd.innerHTML = strMenuText;
oTr.appendChild(oTd);
root.appendChild(oTr);
_fnArray[_nCurrent] = new Array(2);
_fnArray[_nCurrent][0] = oTr;
_fnArray[_nCurrent][1] = fnClickFunction;
_nCurrent++;
}
else
{
//菜单超过最大限度
}
}
}
this.RemoveMenu = function(nIndex)
{
}
}
</script>
<script language="javascript">
var pageClass = new ContentClass();
pageClass.AppendMenu("关于本软件", "images/Folder.bmp", fnTest0);
pageClass.AppendMenu("设置权限", "images/Folder.bmp", fnTest1);
pageClass.AppendMenu("删除图片", "images/Folder.bmp", fnTest2);
pageClass.AppendMenu("你在啊", "images/Folder.bmp", fnTest3);
function fnTest0()
{
alert(0);
}
function fnTest1()
{
alert(1);
}
function fnTest2()
{
alert(2);
}
function fnTest3()
{
alert(3);
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用Javascript实现Agent(实现右键菜单)(2)
- JavaScript 对任意元素,自定义右键菜单的实现方法
- javascript+css实现自定义网页右键菜单
- JavaScript实现右键菜单（二）
- javascript自定义右键弹出菜单实现方法
- 使用Javascript封装实现屏蔽鼠标右键系统键菜单，并绑定自定义的事件
- 用javascript实现既能禁止页面鼠标右键查看 同时又能查看页面文本框右键菜单
- JavaScript实现右键菜单（三）
- Javascript实现鼠标右键特色菜单
- 基于JavaScript实现右键菜单和拖拽功能
- JavaScript实现右键菜单（一）
- JavaScript实现右键菜单（三）
- 用javascript 实现网页鼠标右键弹出菜单功能
- Javascript实现右键自定义菜单
- 【工具代码】JavaScript实现右键菜单的一种方式
- JavaScript实现右键菜单（二）
- javascript 实现各浏览器兼容的右键菜单
- javascript中如何实现浏览器上的右键菜单
- JavaScript实现右键菜单（二）
- JavaScript 对任意元素,自定义右键菜单的实现方法