前几天项目验收的时候，提出“右击菜单”的需求。那么右击菜单有什么优点呢？为什么要做成这样？我想用一句：“提高用户体验度”就能够解除大家的疑惑吧。这样用户就能够依据自己的喜好，是点击固定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="rightKeyMenu.css" />
<scripttype="text/javascript"src="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;" onmouseover="javascript:this.style.backgroundColor =‘#E8F3FD‘" onmouseout="javascript:this.style.backgroundColor =‘#fff‘" oncontextmenu="return addRightKeyMenuItem(‘用户信息一‘);">
<tdalign="center">用户信息一(在这点右键试试)</td>
</tr>
<tr id="two" style="height:30px; cursor:default;" onmouseover="javascript:this.style.backgroundColor =‘#E8F3FD‘" onmouseout="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="‘+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 = dbsl + event.clientX+6;
RightKeyMenu.menuObj.style.left= leftXValue + "px";
}
if(bottomedge < RightKeyMenu.menuObj.offsetHeight) {
RightKeyMenu.menuObj.style.top= (dbch >= RightKeyMenu.menuObj.offsetHeight) ? (dbch -RightKeyMenu.menuObj.offsetHeight) : 0;
}else {
varleftYValue = dbst + event.clientY;
RightKeyMenu.menuObj.style.top= leftYValue + "px";
}
}
RightKeyMenu.menuObj.style.visibility= "visible";
event.returnValue= false;
returnfalse;
};
/** 获取鼠标事件**/
this.getEvent= function(){
if(document.all) {
returnwindow.event;
}
func= this.getEvent.caller;
while(func != null) {
vararg0 = func.arguments[0];
if(arg0) {
if((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof(arg0) == "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>
四、总结
以上就能够实现一个简单的右击菜单，假设想把它运用的项目中。还须要和系统进行融合和封装。只是相信我们一定能够的，加油！
时间： 2024-11-03 05:40:33