发布一个 JavaScript 右击菜单 支持 ie678,Firefox,Safari
2009-11-13 18:02
926 查看
/**
* @author wangzhongbin
* 2009-08-20
*/
var _menus = new Array();//注要解决一个页面有多个菜单
var _current_menu_id = null;
/**
* 上下文菜单
* @param {Object} object 显示菜单的对象
* @param {Object} menu 菜单对象
*/
function CreateMenu(object, menu){
var _object = this;
_object.iframe_id = null;
_object.onHide = null;
_object.onContext = null;
_object.menu = menu;
menu.style.display = 'none';
menu.style.zIndex = '1000000';
menu.style.listStyleType = 'none';
menu.style.position = 'absolute';
if (document.all){
var iframe = document.createElement('iframe');
//document.body.appendChild(iframe);
document.body.insertBefore(iframe,document.body.firstChild);
iframe.id = menu.id + '_iframe';
_object.iframe_id = iframe.id;
iframe.style.position = 'absolute';
iframe.style.display = 'none';
iframe.style.zIndex = '999999';
iframe.style.border = '0px';
iframe.style.height = '0px';
iframe.style.width = '0px';
}
object.oncontextmenu = function(e){
_object.show(e,menu);
};
_menus[menu.id]=_object;
}
/***
* 显示菜单
* @param {Object} event 事件
* @param {Object} menu 菜单对象
*/
CreateMenu.prototype.show = function(event,menu){
var _object = _menus[menu.id];
//var e = window.event || arguments.callee.caller.arguments[0];
var e = window.event || event;
var as = menu.getElementsByTagName("A");
_object.onHide = function(){
_object.hide(menu);
};
if (document.all){
_object.onContext = function(){return false;};
document.attachEvent('oncontextmenu', _object.onContext);
document.attachEvent('onmousedown', _object.onHide);
for (var i = 0; i < as.length; i++) {
as[i].attachEvent('onclick',function(){
_current_menu_id = menu.id;
setTimeout('try{var _object=_menus[_current_menu_id];_current_menu_id = null;_object.hide(_object.menu,true);}catch(e){}',500);
});
}
}
else{
_object.onContext = document.oncontextmenu;
document.oncontextmenu = function(){return false;};
document.addEventListener('mousedown', _object.onHide, false);
for (var i = 0; i < as.length; i++) {
as[i].addEventListener('click',function(){
_current_menu_id = menu.id;
setTimeout('try{var _object=_menus[_current_menu_id];_current_menu_id = null;_object.hide(_object.menu,true);}catch(e){}',500);
}, false);
}
}
var x = document.documentElement.scrollLeft + e.clientX;
var y = document.documentElement.scrollTop + e.clientY;
menu.style.left = x + 'px';
menu.style.top = y + 'px';
menu.style.display = 'block';
if (_object.iframe_id){
var iframe = document.getElementById(_object.iframe_id);
iframe.style.left = x + 'px';
iframe.style.top = y + 'px';
iframe.style.height = menu.offsetHeight + 'px';
iframe.style.width = menu.offsetWidth + 'px';
iframe.style.display = 'block';
}
try{
trMouseOver(current_tr);
isMenuShow=true;
//alert(current_tr.innerHTML);
//trMouseOver(current_tr);
}catch(e){
}
}
/**
* 隐藏菜单
* @param {Object} menu 菜单对象
* @param {bool} 是否强隐藏
*/
CreateMenu.prototype.hide = function(menu,isHide){
var _object = _menus[menu.id];
var is_hide = isHide || false;
var e = null;
var element = null;
if (!is_hide) {
e = window.event || arguments.callee.caller.arguments[0];
element = e.srcElement || e.target;
do {
if (element == menu)
return false;
}
while ((element = element.offsetParent));
if (document.all)
document.detachEvent('on' + e.type, _object.onHide);
else
document.removeEventListener(e.type, _object.onHide, false);
}
if (document.all)
document.detachEvent('oncontextmenu', _object.onContext);
else
document.removeEventListener('contextmenu', _object.onContext, false);//document.oncontextmenu = _object.onContext;
if (_object.iframe_id) {
var iframe = document.getElementById(_object.iframe_id);
iframe.style.display = 'none';
}
menu.style.display = 'none';
try{
isMenuShow=false;
trMouseOut(current_tr);
}
catch(e){
}
}html 调用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<mce:script language="javascript" type="text/javascript" src="ContextMenu.js" mce_src="ContextMenu.js"></mce:script>
<title>测试</title>
<mce:style type="text/css"><!--
body,div,p,ul,li,span,option,input{font-size:12px;color:#000000;}
.contextmenu{background-color:White; border:1px solid #cccccc;padding:5px;font-size:12px}
.contextmenu .menuitems{font-size:12px;margin:0px;padding:3px 0px 3px 0px;/*line-height:23px;*/letter-spacing:1px;}
.contextmenu .menuitems hr{width:100%;+height:1px;}
.contextmenu .menuitems img{vertical-align:middle;border:0px;padding-right:4px}
.contextmenu .menuitems a:link {color:#444;text-decoration:none;padding:5px;}
.contextmenu .menuitems a:visited {color:#444;text-decoration:none;padding:5px;}
.contextmenu .menuitems a:hover {color:#444;text-decoration:underline;padding:5px;background-color:#E7F4FA}
.contextmenu .menuitems a:active {color:#444;text-decoration:underline;padding:5px;background-color:#E7F4FA}
.contextmenu .menuitemsoff {font-size:12px;margin:0px;/*padding:1px 3px 0px 5px;*/line-height:23px;color:#ACA899;letter-spacing:1px}
.contextmenu .menuitemsoff img{vertical-align:middle;border:0px;padding-right:4px}
.contextmenu .menuitemsoff a:link {color:#ACA899;text-decoration:none;padding:5px;}
.contextmenu .menuitemsoff a:visited {color:#ACA899;text-decoration:none;padding:5px;}
.contextmenu .menuitemsoff a:hover {color:#ACA899;text-decoration:underline;padding:5px;background-color:#E7F4FA}
.contextmenu .menuitemsoff a:active {color:#ACA899;text-decoration:underline;padding:5px;background-color:#E7F4FA}
--></mce:style><style type="text/css" mce_bogus="1">body,div,p,ul,li,span,option,input{font-size:12px;color:#000000;}
.contextmenu{background-color:White; border:1px solid #cccccc;padding:5px;font-size:12px}
.contextmenu .menuitems{font-size:12px;margin:0px;padding:3px 0px 3px 0px;/*line-height:23px;*/letter-spacing:1px;}
.contextmenu .menuitems hr{width:100%;+height:1px;}
.contextmenu .menuitems img{vertical-align:middle;border:0px;padding-right:4px}
.contextmenu .menuitems a:link {color:#444;text-decoration:none;padding:5px;}
.contextmenu .menuitems a:visited {color:#444;text-decoration:none;padding:5px;}
.contextmenu .menuitems a:hover {color:#444;text-decoration:underline;padding:5px;background-color:#E7F4FA}
.contextmenu .menuitems a:active {color:#444;text-decoration:underline;padding:5px;background-color:#E7F4FA}
.contextmenu .menuitemsoff {font-size:12px;margin:0px;/*padding:1px 3px 0px 5px;*/line-height:23px;color:#ACA899;letter-spacing:1px}
.contextmenu .menuitemsoff img{vertical-align:middle;border:0px;padding-right:4px}
.contextmenu .menuitemsoff a:link {color:#ACA899;text-decoration:none;padding:5px;}
.contextmenu .menuitemsoff a:visited {color:#ACA899;text-decoration:none;padding:5px;}
.contextmenu .menuitemsoff a:hover {color:#ACA899;text-decoration:underline;padding:5px;background-color:#E7F4FA}
.contextmenu .menuitemsoff a:active {color:#ACA899;text-decoration:underline;padding:5px;background-color:#E7F4FA}</style>
</head>
<body>
<table width="100%" cellpadding="1" cellspacing="1" border="1" id="tableManage1">
<tr>
<td colspan="9">测试1</td>
</tr>
<tr>
<td>ID1</td>
<td>ID2</td>
<td>ID3</td>
<td>ID4</td>
<td>ID5</td>
</tr>
<tr>
<td>ID1</td>
<td>ID2</td>
<td>ID3</td>
<td>ID4</td>
<td>ID5</td>
</tr>
<tr>
<td>ID1</td>
<td>ID2</td>
<td>ID3</td>
<td>ID4</td>
<td>ID5</td>
</tr>
</table>
<ul id="contextMenu1" class="contextmenu" style="display:none" mce_style="display:none">
<li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试1</a></li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table width="100%" cellpadding="1" cellspacing="1" border="1" id="tableManage2">
<tr>
<td colspan="9">测试2</td>
</tr>
<tr>
<td>ID1</td>
<td>ID2</td>
<td>ID3</td>
<td>ID4</td>
<td>ID5</td>
</tr>
<tr>
<td>ID1</td>
<td>ID2</td>
<td>ID3</td>
<td>ID4</td>
<td>ID5</td>
</tr>
<tr>
<td>ID1</td>
<td>ID2</td>
<td>ID3</td>
<td>ID4</td>
<td>ID5</td>
</tr>
</table>
<ul id="contextMenu2" class="contextmenu" style="display:none" mce_style="display:none">
<li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li>
<li class="menuitems"><a href="#" mce_href="#">测试测试2</a></li>
</ul>
<mce:script language="javascript" type="text/javascript"><!--
var menu1 = new CreateMenu(document.getElementById("tableManage1"), document.getElementById("contextMenu1"));
var menu2 = new CreateMenu(document.getElementById("tableManage2"), document.getElementById("contextMenu2"));
// --></mce:script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 编写了一个支持firefox和ie的javascript+xml进行数据分页的程序
- 转一个右键菜单，支持不同对象不同菜单，兼容IE、Firefox
- 一个轻量级的XHTML右键菜单[支持IE和firefox]
- 转一个右键菜单，支持不同对象不同菜单，兼容IE、Firefox
- javascript 右键菜单 支持多级菜单 支持不同节点展示不同菜单 兼容firefox和IE
- 转一个右键菜单，支持不同对象不同菜单，兼容IE、Firefox
- javascript 右键菜单 支持多级菜单 支持不同节点展示不同菜单 兼容firefox和IE
- 微软发布IE、Firefox、Opera和Safari的JavaScript兼容性研究(ZZ)
- 一个轻量级的XHTML右键菜单[支持IE和firefox]
- HTML5视频方案：支持iPad Safari、Firefox、Chrome、IE9876
- 用javascript 实现的TreeView控件 支持 IE ,Firefox
- firefox 3,ie 8支持的右键菜单!
- 纯CSS下拉式导航菜单，支持IE6、IE7、Firefox，没有用到任何JavaScript，修改方便，而且效果也不错。
- [2008-04-09更新]一个JavaScript WEB日历控件，支持IE6，FireFox，原作者 小酒天ID：KimSoft
- HTML5视频方案：支持iPad Safari、Firefox、Chrome、IE9876
- IE、Firefox、Opera和Safari的JavaScript兼容性
- 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
- jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera
- js + php 读取、播放视频流 兼容firefox，chrome，ie，mac的safari，ios的safari，ios的微信浏览器（curl读取文件流篇） 分类： php javascript 浏览器兼容 safari 视频流 jwplayer6