转载

【连载】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> 
【连载】Bootstrap开发漂亮前端界面之自定义右键菜单

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

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

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

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

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

【连载】Bootstrap开发漂亮前端界面之自定义右键菜单
$(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开发漂亮前端界面之自定义右键菜单

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

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

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

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

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

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

实现方式:判断横向位置(pageX)+自定义菜单宽度之和,如果超过页面宽度及为溢出,需要特殊处理;

【连载】Bootstrap开发漂亮前端界面之自定义右键菜单
//文档对象注册上下文(右键)菜单事件     $(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();//阻止浏览器与事件相关的默认行为;此处就是弹出右键菜单     }); 
【连载】Bootstrap开发漂亮前端界面之自定义右键菜单

如果你是按照本文章步骤进行编写,那么你只需要打开你的自己网页,就可以看到正确的效果了,Over。

正文到此结束
Loading...