首页 > 代码库 > 右击菜单简单实现

右击菜单简单实现

         前几天项目验收的时候,提出“右击菜单”的需求。那么右击菜单有什么优点呢?为什么要做成这样?我想用一句:“提高用户体验度”就能够解除大家的疑惑吧。这样用户就能够依据自己的喜好,是点击固定button还是右击,无论通过那个渠道都能够达到目的,这样才干得到用户的青睐。

         那么接下来就让我先从一个小的demo入手,体验一把吧!

一、准备工作

  想要做的效果:

技术分享

二、HTML代码

<span style="font-size:18px;"><!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>右击菜单体验</title>
//<linkrel="stylesheet" type="text/css"href="http://www.mamicode.com/rightKeyMenu.css" />
<scripttype="text/javascript"src="http://www.mamicode.com/rightKeyMenu.js"></script>
<styletype="text/css">
*{font-size:12px;}
</style>
<scriptlanguage="javascript">
functionaddRightKeyMenuItem(id){
varrightMenu = new RightKeyMenu.Menu();
rightMenu.setMenu(id,‘menuDiv‘);
 
rightMenu.addMenuItems({
menuItemId:‘menu1‘,
menuItmeImgSrc:‘tests.png‘,
menuItemText:‘加入(我能够点)‘
},{
setOnClick:"menuClick(‘您在"+id+" 上点击了加入‘)"
});
 
rightMenu.addMenuItems({
menuItemId:‘menu2‘,
menuItmeImgSrc:‘tests.png‘,
menuItemText:‘改动(我也能够点)‘,
menuSplit:true
},{
setOnClick:"menuClick(‘您在"+id+" 上点击了改动‘)"
});
 
rightMenu.addMenuItems({
menuItemId:‘menu3‘,
menuItmeImgSrc:‘tests.png‘,
menuItemText:‘删除(我还能够点)‘
},{
setOnClick:"menuClick(‘您在"+id+" 上点击了删除‘)"
});
 
returnrightMenu.show();
}
 
functionmenuClick(text){
alert(text);
}
</script>
</head>
 
<bodyonclick="RightKeyMenu.hidden();" style="border:1px solid#000;width:800px;height:500px;">
<divclass="menu" id="menuDiv"></div>
 
 
<tablebordercolor="#CCCCCC" border="1" cellSpacing="0"cellPadding="0"style="width:200px;border-collapse:collapse;margin:0auto;margin-top:5px;">
<tr id="one" style="height:30px; cursor:default;" onm ouseover="javascript:this.style.backgroundColor =‘#E8F3FD‘" onm ouseout="javascript:this.style.backgroundColor =‘#fff‘" oncontextmenu="return addRightKeyMenuItem(‘用户信息一‘);">
           <tdalign="center">用户信息一(在这点右键试试)</td>
    </tr>
<tr id="two" style="height:30px; cursor:default;" onm ouseover="javascript:this.style.backgroundColor =‘#E8F3FD‘" onm ouseout="javascript:this.style.backgroundColor =‘#fff‘" oncontextmenu="return addRightKeyMenuItem(‘用户信息二‘);">
           <tdalign="center">用户信息二(在这点右键试试)</td>
    </tr>
</table>
<br/><br/><br/><br/><br/>
<divstyle="width:800px; text-align:center;">框内为Body区域---点击此区域右键菜单消失!

成为网页的右击菜单!</div> </body> </html></span>



三、JS代码

<span style="font-size:18px;">var ie =(navigator.appVersion.indexOf("MSIE")!=-1);//IE
var ff =(navigator.userAgent.indexOf("Firefox")!=-1);//Firefox
var RightKeyMenu = {
/** 初始化菜单对象**/
menuObj: null,
/*
 * 创建右键菜单
 */
Menu: function(){
/** 初始化菜单项**/
this.menuItemsHTML= "";
/** 当前菜单项**/
this.menuItemsIndex= 0;
/** 初始化菜单**/
this.menuHTML= "";
/** 菜单ID **/
this.menuId= "";
 
this.setMenu= function(menuId,menuDiv){
this.menuId= menuId;
RightKeyMenu.menuObj= document.getElementById(menuDiv);
};
/** 往右键菜单中加入项 **/
this.addMenuItems= function(paramsObj,eventObj){
if(paramsObj!= null && paramsObj != ""){
varid = "";
varimg = "";
vartext = "";
varsetOnclick = "";
if(eventObj!= null && eventObj != "" && eventObj.setOnClick !=null && eventObj.setOnClick != ""){
setOnclick= eventObj.setOnClick;
}
if(paramsObj.menuItemId!= null && paramsObj.menuItemId != "")
id= paramsObj.menuItemId;
 
if(paramsObj.menuItmeImgSrc!= null && paramsObj.menuItmeImgSrc != "")
img= ‘<td style="width:21px;" align="center"><imgsrc="http://www.mamicode.com/‘+paramsObj.menuItmeImgSrc+‘"/></td>‘;
else
img= ‘<td style="width:5px;"align="center"> </td>‘;
 
if(paramsObj.menuItemText!= null && paramsObj.menuItemText != "")
text= ‘<td> ‘+paramsObj.menuItemText+‘ </td>‘;
else
text= ‘<td> </td>‘;
 
this.menuItemsHTML+= ‘<tr id="‘+id+‘"onmouseover="javascript:this.style.backgroundColor = \‘#C3E2F8\‘"onmouseout="javascript:this.style.backgroundColor = \‘#F0F0F0\‘"style="height:25px;cursor:pointer;" onclick="‘+setOnclick+‘;">‘+ img + text + ‘</tr>‘;
if(paramsObj.menuSplit!= null && paramsObj.menuSplit == true){
this.menuItemsHTML+= ‘<tr style="height:1px;"><td colspan="2"valign="middle"><hr size="1" align="center"style="border-top: 1px dashed#C0C0C0;width:85%;"></td></tr>‘;
}
 
this.menuItemsIndex++;
};
 
};
/** 显示右键菜单**/
this.show= function(){
RightKeyMenu.menuObj.innerHTML= ‘<table id="table_‘+this.menuId+‘"bordercolor="#CCCCCC" rules="groups" border="1"cellSpacing="0" cellPadding="0"style="border-collapse:collapse;min-width:80px;">‘+this.menuItemsHTML + ‘</table>‘;
 
vardbcw = document.body.clientWidth;
vardbch = document.body.clientHeight;
vardbsl = document.body.scrollLeft;
vardbst = document.body.scrollTop;
 
varevent = this.getEvent();
 
varrightedge = dbcw - event.clientX;
varbottomedge = dbch - event.clientY;
 
RightKeyMenu.menuObj.style.display= "";
if(ie){
if(rightedge < RightKeyMenu.menuObj.offsetWidth) {
RightKeyMenu.menuObj.style.left= (dbcw >= RightKeyMenu.menuObj.offsetWidth) ? (dbcw -RightKeyMenu.menuObj.offsetWidth) : 0;
}else {
RightKeyMenu.menuObj.style.left= dbsl + event.clientX;
}
 
if(bottomedge < RightKeyMenu.menuObj.offsetHeight) {
RightKeyMenu.menuObj.style.top= (dbch >= RightKeyMenu.menuObj.offsetHeight) ? (dbch -RightKeyMenu.menuObj.offsetHeight) : 0;
}else {
RightKeyMenu.menuObj.style.top= dbst + event.clientY;
}
}else{
if(rightedge < RightKeyMenu.menuObj.offsetWidth) {
RightKeyMenu.menuObj.style.left= dbcw - RightKeyMenu.menuObj.offsetWidth;
}else {
varleftXValue = http://www.mamicode.com/dbsl + event.clientX+6;"px";
}
 
if(bottomedge < RightKeyMenu.menuObj.offsetHeight) {
RightKeyMenu.menuObj.style.top= (dbch >= RightKeyMenu.menuObj.offsetHeight) ? (dbch -RightKeyMenu.menuObj.offsetHeight) : 0;
}else {
varleftYValue = http://www.mamicode.com/dbst + event.clientY;"px";
}
}
RightKeyMenu.menuObj.style.visibility= "visible";
event.returnValue= http://www.mamicode.com/false;"object" && arg0.preventDefault &&arg0.stopPropagation)) {
returnarg0;
}
}
func= func.caller;
}
returnnull;
}
},
/** 隐藏右键菜单**/
hidden: function(){
if(RightKeyMenu.menuObj!= null){
RightKeyMenu.menuObj.style.display= "none";
RightKeyMenu.menuObj= null;
}
}
}
 </span>

四、总结

  以上就能够实现一个简单的右击菜单,假设想把它运用的项目中。还须要和系统进行融合和封装。只是相信我们一定能够的,加油!

 

右击菜单简单实现