一流的聊城做网站费用/海外短视频软件
前几天项目验收的时候，提出“右击菜单”的需求。那么右击菜单有什么好处呢？为什么要做成这样？我想用一句：“提高用户体验度”就可以解除大家的疑惑吧！这样用户就可以根据自己的喜好，是点击固定按钮还是右击，不管通过那个渠道都可以达到目的，这样才能得到用户的青睐。
那么接下来就让我先从一个小的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><bodyοnclick="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;" οnmοuseοver="javascript:this.style.backgroundColor ='#E8F3FD'" οnmοuseοut="javascript:this.style.backgroundColor ='#fff'" οncοntextmenu="return addRightKeyMenuItem('用户信息一');"><tdalign="center">用户信息一(在这点右键试试)</td></tr>
<tr id="two" style="height:30px; cursor:default;" οnmοuseοver="javascript:this.style.backgroundColor ='#E8F3FD'" οnmοuseοut="javascript:this.style.backgroundColor ='#fff'" οncοntextmenu="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+'"οnmοuseοver="javascript:this.style.backgroundColor = \'#C3E2F8\'"οnmοuseοut="javascript:this.style.backgroundColor = \'#F0F0F0\'"style="height:25px;cursor:pointer;" οnclick="'+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>四、总结
以上就可以实现一个简单的右击菜单，如果想把它运用的项目中，还需要和系统进行融合和封装，不过相信我们一定可以的，加油！