【連載】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。