ASP.NET SignalR 與 LayIM2.0 配合輕松實現Web聊天室（六） 之 Layim源碼改造右鍵菜單--好友、組管理功能的實現。

前言

　　上一篇中講解了加好友的流程，本篇將介紹好友管理，群組管理的右鍵菜單功能。當然由於菜單項目太多，都實現也得花費時間。只講解一下我是如何從不知道怎么實現右鍵菜單到會自定義菜單的一個過程。另外呢，針對菜單：發送即時消息這個原本在Laim中已經有的功能做出實現，其他的方法，只要按照業務邏輯一一實現即可。

演示

　　用戶信息右鍵菜單：

　　

　　好友分組信息右鍵菜單：

　　

　　群組信息右鍵菜單：

　　

思路講解

　　首先呢，Layim中針對歷史消息這個欄有兩個菜單項，清空和刪除某一條，這是源代碼中已經有的，當我看到這段代碼的時候，那么實現其他的右鍵菜單就有戲了。

　　

　　　首先可以看到，增加右鍵菜單的方式就是給元素添加contextmenu事件，然后彈出右鍵菜單層就是強大的layer的工作了。由於我前端也不是很6，所以，代碼照抄。加上自己的菜單，如果想加前邊的圖標，那么增加相應的html即可。下面我們把好友的右鍵菜單加上。

 //好友右鍵菜單
        layimMain.find('.layim-list-friend').on('contextmenu', '.layui-layim-list li', function (e) {
            var othis = $(this);
            var id = othis[0].id;
            var html = '<ul id="contextmenu_' + othis[0].id + '" data-id="' + othis[0].id + '" data-index="' + othis.data('index') + '">';
            html += '<li layim-event="menu_chat"><i class="layui-icon" >&#xe611;</i>' + space_icon + '發送即時消息</li>';
            html += '<li layim-event="menu_profile"><i class="layui-icon">&#xe60a;</i>' + space_icon + '查看資料</li>';
            html += '<li layim-event="menu_history"><i class="layui-icon" >&#xe60e;</i>' + space_icon + '消息記錄</li>';
            html += '<li layim-event="menu_nomsg">' + space_no_icon + '屏蔽消息</li>';
            html += '<li layim-event="menu_delete">' + space_no_icon + '刪除好友</li>';
            html += '<li layim-event="menu_moveto">' + space_no_icon + '移動至</li></ul>';
            if (othis.hasClass('layim-null')) return;
            //注意一下這個方法
            showtips(html, this, id, 0, 0);
            //showtips(html, this, id, 160, 25);
       
        });

　　大家可以看到，事件是加在  layim-list-friend 下邊的 layui-layim-ist 上的，有的同學會問，你怎么知道加在這里。我也不知道，右鍵查看元素，看一下代碼就知道了。其實前端不管代碼如何寫的天花亂墜，最后總會生成html的。我們想加什么功能，一定要了解相應的html的結構。比如，給每個菜單添加事件怎么辦呢。很簡單，layim代碼開頭已經寫明了注冊事件的方法：

  $('body').on('click', '*[layim-event]', function(e){
            var othis = $(this), methid = othis.attr('layim-event');
            events[methid] ? events[methid].call(this, othis, e) : '';
        });

　　沒錯，就是上邊這三行萬能的代碼，其實我並不知道其中的原理，尤其是第三行call方法。但是我知道，這么寫一定能調用相應的方法。於是在events后在增加各種右鍵菜單的方法：

　　在看效果之前呢，我們先回到前前一段代碼（注意一下這個方法部分）。就是showtips方法。當我們在后兩個參數傳0 0 的時候，效果是這樣的：

　　看起來有點不舒服，所以我就想把這個彈層往右下方移動一點，可是layer.tips我也不能去動他，於是我的思路就是，當這個彈層初始化完畢之后，強行更改他的位置。於是我在layer.tips 的方法回調中增加resetposition方法（t=top,l=left）

　　那么到這里你應該知道這個resetposition做了什么事了吧。就是一個簡單的修改top和left值

　　

　　修改完成之后，就會看到我們演示中的樣子了。不過，這里有個bug沒改，就是當我們的好友在好友列表的最下方，已經接近電腦屏幕底端了。如果在往下移動的話，菜單會看不見，所以，小伙伴們做的時候要注意當前菜單的位置和高度，來動態進行top調整。

實戰效果

　　做完上邊的工作之后，我們運行程序，點擊右鍵試試。

　　

　　可以看到事件已經成功觸發了，所以對應菜單我們只要實現相應的效果即可。下面我們做一下發送即時消息對接功能。源代碼中已經有 chat方法，方法參數有個 othis。我們只要關心這個othis是什么，然后在 menu_chat方法中調用chat就可以了。查看一下源代碼，很驚喜的發現原來這個othis在我們右鍵菜單打開之前，我們就獲取到了，就是這個東西：

 layimMain.find('.layim-list-friend').on('contextmenu', '.layui-layim-list li', function (e) {
    var othis = $(this);

　　我的做法的就是加layim中的全局變量，將這個othis先保存起來，然后在menu_chat中調用。

 , menu_chat: function () {
         //打開聊天窗口
         events.chat(global.othis);
         //關閉右鍵菜單
         layer.closeAll('tips');
     },

　　搞定othis參數之后，我們在重新點擊右鍵，發送即時消息，成功打開聊天窗口。

　　OK，小伙伴們，剩下的菜單功能就交給你們啦。

總結

　　其實好多小伙伴們覺得自己想加一個功能又沒有思路，其實我們多讀一讀源代碼，照着葫蘆畫瓢也會發現意想不到的驚喜。通過閱讀layim源代碼我學了很多平時壓根想不到的東西。js這玩意還是挺神奇的，當然對於一個后端工程師來說。今天的右鍵菜單就講到這里了。

 

      下篇預告：【中級】ASP.NET SignalR 與 LayIM2.0 配合輕松實現Web聊天室（七） 之 歷史記錄查詢（時間，關鍵字，圖片，文件），關鍵字高亮顯示。

 

　　 想要學習的小伙伴，可以關注我的博客哦，我的QQ：645857874，Email：[e-mail]

　　GitHub：https://github.com/fanpan26/LayIM_NetClient/