简单的右键菜单 -

Nullin

浏览: 25403 次
性别:
来自: 北京

最近访客更多访客>>

testaisex

sgamin1001

Sipower

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

简单的右键菜单

CSS json JavaScript UP

js代码，需要js库支持，也可以自己写成js的

var contextMenuPanel='<div id ="contextMenu" style="display:none;position: absolute;z-index: 1000; " class="tan_divc"></div>';  //右键菜单div
var eventOwner;

//将菜单绑定到元素上 也就是某id下的tag上  例如 id=aa 的div 下面有 span 那么bindContext("aa","span"),就可以让用户点击aa下的span时显示右键菜单
function bindContext(id,tag){
$("body").append(contextMenuPanel);
$("#"+id+" "+tag||"").each(function(){
$(this).mousedown(function(e){
	 		e=e||window.event;
 	 		e.stopPropagation(); //组织冒泡
	 		if(e.button==2){
	 			eventOwner=this;
 	 			showContextMenu(e);
 	 		}
 	})})
}  	

 //显示菜单
 function showContextMenu(event){
 	$("#contextMenu").fadeIn(400);//显示并确定菜单位置
    $("#contextMenu").css("left",event.clientX + document.body.scrollLeft - document.body.clientLeft);
    $("#contextMenu").css("top",event.clientY + document.body.scrollTop - document.body.clientTop );
    
 }
 function doSth(){
 	hideContextMenu();
 }
 function hideContextMenu(obj){
 	$("#contextMenu").fadeOut(400);
 }

 //初始化菜单 参数传入 json 数组  格式{doFun：'执行方法名（参数）',title:'标题'}
 function initContextMenu(id,tag,jsonArr){
	 bindContext(id,tag); //将菜单绑定到元素上 
	 if(jsonArr==null){
	 	jsonArr=[
	 	{doFun:"doSth(this)",title:"新增"},
	 	{doFun:"doSth(this)",title:"修改"},
	 	{doFun:"doSth(this)",title:"删除"},
	 	{doFun:"doSth(this)",title:"上移"},
	 	{doFun:"doSth(this)",title:"下移"},
	 	{doFun:"doSth(this)",title:"升级"},
	 	{doFun:"doSth(this)",title:"降级"}];
	 }
	 var context="<ul>";
	  //拼装菜单
	 for(var i=0;i<jsonArr.length;i++) 
	 	context+='<li><a href="javascript:void(0)" onclick="'+jsonArr[i]["doFun"]+';doSth();return false;">'+jsonArr[i]["title"]+'</a></li>'
	 context+="</ul>"
	 //将拼装好的菜单拼入
	$("#contextMenu").html(context);
 }

简单的样式调整：

@CHARSET "UTF-8";
ul,li{ margin:0px; padding:0px; list-style:none}
h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px;}
dl,dd,dt{ margin:0px; padding:0px;}
img{ border:none}
p{ margin:0px;}
th,td{ font-size:12px;}
form{ margin:0px; padding:0px;}



.tan_divc{ background:url(danchu_bg.gif) repeat-y; width:61px; min-height:3px;_height:3px; border:1px solid #d5e2e8}
.tan_divc ul{ margin:0px; padding:0px;}
.tan_divc ul li{ width:61px;font-size:12px;vertical-align:middle; text-align:center;zoom:1;overflow:hidden; margin:0px; padding:0px; line-height:18px;}


.tan_divc ul li A:link {COLOR: #313131; TEXT-DECORATION:none}
.tan_divc ul li A:visited {COLOR: #313131; TEXT-DECORATION:none}
.tan_divc ul li A:hover {COLOR: #313131; TEXT-DECORATION: none}
.tan_divc ul li A:active {COLOR: #313131; TEXT-DECORATION:none}

#hx{ background:url(fenge.gif) no-repeat; height:2px; overflow:hidden; width:61px;}

用法：

	initContextMenu("navigation","li",[
 	{doFun:"addNode()",title:"新增"},
 	{doFun:"modNode()",title:"修改"},
 	{doFun:"delNode()",title:"删除"},
 	{doFun:"up()",title:"上移"},
 	{doFun:"down()",title:"下移"}]);

li可以为""

效果：