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

连载：
1.《教你用Bootstrap开发漂亮的前端界面》
2.《Bootstrap开发漂亮的前端界面之实现原理》

网页中的自定义右键菜单越来越普遍，自定义右键菜单可以增强用户体验，让用户使用软件更加的简便，今天我们就来基于Bootstrap来开发自己的自定义右键菜单。
一、首先，准备好自定义菜单，供单击右键展示；菜单默认不可见，可以通过 style="display:block" 进行调试预览;

添加

删除

关于我们

文章图片
二、实现点击右键显示自定义菜单;
正确的显示右键菜单，我们需要完成以下3个步骤:
1.右键菜单是一种事件行为; 注册事件，监听浏览器的右键菜单；
【bootstrap|【连载】Bootstrap开发漂亮前端界面之自定义右键菜单】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(); //阻止浏览器与事件相关的默认行为；此处就是弹出右键菜单 }); });

文章图片
三、隐藏自定义菜单；当用户点击菜单某一项或点击其他区域进行隐藏；
实现方式：用户使用鼠标的左键或中键都要进行自定义菜单的隐藏；设计思路与默认浏览器隐藏菜单方式一致；

文章图片

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

文章图片
四、处理菜单溢出；请尝试，在页面的最右边点击右键菜单，你会发现菜单会超出页面; 实现方式：判断横向位置（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(); //阻止浏览器与事件相关的默认行为；此处就是弹出右键菜单 });

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