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

连载：

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

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

 

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

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

 

<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();//阻止浏览器与事件相关的默认行为；此处就是弹出右键菜单
     });
                
});

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

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

//文档对象注册鼠标按下事件；
      $(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。