一个轻量级的XHTML右键菜单[支持IE和firefox]

2020-05-11 我要评论

目前很多在网络上流传的右键菜单都不支持XHTML，主要就是因为document.body和document.documentElement之间的不同造成的
还有一个就是很多右键菜单程序太大，于是自己写了一个迷你型的右键菜单，支持IE和firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

#rightMenu{

padding:2px;

background-color:menu;

cursor:default;

position:absolute;

z-index:900;

border-right:1px solid #aaa;

border-bottom:1px solid #aaa;

border-top:1px solid #fff;

border-left:1px solid #fff;

font-size:14px;

word-break:keep-all;

}

.menuItem{

display:block;

padding:3px;

}

</style>

/**

*JRightMenu类，在浏览器里显示用户定制右键菜单

*[注意]：只适用于XHTML

*@author brull

*@email brull@163.com

*@date 2007-01-24

/**

*@param menuItem 菜单显示内容，是一个数组

*@param handle 对应menuItem菜单的处理js代码段，同样是个数组

JRightMenu=function (menuItem,handle){

var rightMenu=document.createElement("div");

var menuInnerHTML="";//菜单容器里的HTML内容

var $items=this.menuItem=menuItem;

var $handle=this.handle=handle;

rightMenu.id="rightMenu";//id

for(var i in $items){

if($items[i].indexOf("<hr")!=-1)

menuInnerHTML+=$items[i];

else

menuInnerHTML+=""

+$items[i]

+"";

}

rightMenu.innerHTML=menuInnerHTML;

rightMenu.style.visibility = "visible";

rightMenu.onmousedown=function(e){

e=e||window.event;

document.all?e.cancelBubble=true:e.stopPropagation();

}

rightMenu.onselectstart=function(){

return false;

}

document.body.appendChild(rightMenu);

this.menu=rightMenu;//方便别的方法引用

};

JRightMenu.prototype.show=function(e){

e=e||window.event;

var root=document.documentElement;

var x = root.scrollLeft+e.clientX;//菜单左上角横坐标

var y = root.scrollTop+e.clientY;//菜单左上角纵坐标

if (this.menu.clientWidth+e.clientX > root.clientWidth){

x=x-this.menu.clientWidth;

}

if (this.menu.clientHeight+e.clientY > root.clientHeight){

y=y-this.menu.clientHeight;

}

this.menu.style.left = x+"px";

this.menu.style.top = y+"px";

this.menu.style.visibility = "visible";

return false;

}

JRightMenu.prototype.hidden=function() {

this.menu.style.visibility = "hidden";

}

</script>

window.onload=function(){

rightMenu=new JRightMenu(["it’s mine!","it’s yours!"],["alert(’it is mine!’)","alert(’it is yours!’)"]);

}

document.oncontextmenu=function(evt){return rightMenu.show(evt);};

document.onclick=function(){rightMenu.hidden();}

</script>

</head>

<body>

adadad大王大王

adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王adadad大王大王

awdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

</body>

</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

一些易混淆且不常用的属性，希望有用

猜您喜欢

05-11叠加计算出错的解决方法
05-11WebGame《逆转裁判》完整版代码下载(1月24日更新)
05-11图片连续不间断滚动像册
05-11无间断滚动的新闻文章列表多浏览器兼容
05-11判断页面是关闭还是刷新的js代码
05-11用JavaScript和注册表脚本实现右键收藏Web页选中文本
05-11用js自动判断浏览器分辨率的代码
05-11JS判断浏览器之Navigator对象
05-11判断浏览器的js代码
05-11innerHTML，outerHTML,innerTEXT三者之间的区别
05-11一个无限级XML绑定跨框架菜单（For IE）
05-11网页javascript精华代码集
05-11一页面多XMLHttpRequest对象
05-11javascript 播放器控制
05-11JAVASCRIPT HashTable
05-11Maps Javascript
05-11自适应高度框架 ----属个人收藏内容
05-11Opacity.js

一个轻量级的XHTML右键菜单[支持IE和firefox]

相关文章

猜您喜欢

今日热门