转载

【连载】Bootstrap开发漂亮前端界面之自定义右键菜单

连载：

1.《教你用Bootstrap开发漂亮的前端界面》

2.《Bootstrap开发漂亮的前端界面之实现原理》

网页中的自定义右键菜单越来越普遍，自定义右键菜单可以增强用户体验，让用户使用软件更加的简便，今天我们就来基于Bootstrap来开发自己的自定义右键菜单。

一、首先，准备好自定义菜单，供单击右键展示；菜单默认不可见，可以通过 style="display:block" 进行调试预览;

【连载】Bootstrap开发漂亮前端界面之自定义右键菜单

<ul class="dropdown-menu">   <li>    <a href="javascript:;">添加</a>    </li>   <li>    <a href="javascript:;">删除</a>    </li>   <li>    <a href="javascript:;">关于我们</a>    </li> </ul>

二、实现点击右键显示自定义菜单;

正确的显示右键菜单，我们需要完成以下3个步骤:

1.右键菜单是一种事件行为; 注册事件，监听浏览器的右键菜单；

2.默认情况下，出现浏览器系统菜单；阻止浏览器默认事件行为；

3.显示自定义菜单；根据用户点击的坐标位置，设置自定义菜单的位置，然后进行显示；

$(function(){          //页面文档对象注册上下文（右键）菜单事件          $(document).on("contextmenu",function(event){           var pageX = event.pageX;//鼠标单击的x坐标           var pageY = event.pageY;//鼠标单击的y坐标           //获取菜单并设置菜单的位置           $("#contextMenu").css({     left:pageX+"px",//设置菜单离页面左边距离，left等效于x坐标      top:pageY+"px"//设置菜单离页面上边距离，top等效于y坐标           }).stop().fadeIn(500);//显示使用淡入效果,比如不需要动画可以使用show()替换;                      event.preventDefault();//阻止浏览器与事件相关的默认行为；此处就是弹出右键菜单      }); });

三、隐藏自定义菜单；当用户点击菜单某一项或点击其他区域进行隐藏；

实现方式：用户使用鼠标的左键或中键都要进行自定义菜单的隐藏；设计思路与默认浏览器隐藏菜单方式一致；

【连载】Bootstrap开发漂亮前端界面之自定义右键菜单

//文档对象注册鼠标按下事件；  $(document).on("mousedown",function(event){   //button等于0代表左键，button等于1代表中键   if(event.button==0 || event.button==1){     $("#contextMenu").stop().fadeOut(200);//获取菜单停止动画，进行隐藏使用淡出效果   }      });

【连载】Bootstrap开发漂亮前端界面之自定义右键菜单

四、处理菜单溢出；请尝试，在页面的最右边点击右键菜单，你会发现菜单会超出页面;

实现方式：判断横向位置（pageX）+自定义菜单宽度之和，如果超过页面宽度及为溢出，需要特殊处理；

//文档对象注册上下文（右键）菜单事件     $(document).on("contextmenu",function(event){      var pageX = event.pageX;//鼠标单击的x坐标      var pageY = event.pageY;//鼠标单击的y坐标      //获取菜单      var contextMenu = $("#contextMenu");      var cssObj = {       top:pageY+"px",//设置菜单离页面上边距离，top等效于y坐标       left:pageX+"px"//设置菜单离页面左边距离，left等效于x坐标      };      //判断横向位置（pageX）+自定义菜单宽度之和，如果超过页面宽度及为溢出，需要特殊处理；      var menuWidth = contextMenu.width();      var pageWidth = $(document).width();      if(pageX+contextMenu.width()>pageWidth){       cssObj.left = pageWidth-menuWidth-5+"px"; //-5是预留右边一点空隙，距离右边太紧不太美观；      }      //设置菜单的位置      $("#contextMenu").css(cssObj).stop().fadeIn(200);//显示使用淡入效果,比如不需要动画可以使用show()替换;            event.preventDefault();//阻止浏览器与事件相关的默认行为；此处就是弹出右键菜单     });