詳解bootstrap用dropdown-menu實現(xiàn)上下文菜單
寫在前面:
所謂上下文菜單,它與一般菜單的區(qū)別在于:
通過右鍵觸發(fā)顯示在鼠標(biāo)右鍵點擊處
鼠標(biāo)在別處點擊后,該菜單消失
實現(xiàn)方法:
在html中定義一個普通的沒有觸發(fā)條件的dropdown-menu,然后寫這個menu的父容器的監(jiān)聽即可實現(xiàn)。
代碼:
<div id="settingInGraph"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="contextMenu"> <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任務(wù)指派</a></li> <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任務(wù)監(jiān)聽</a></li> <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任務(wù)表單</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a></li> </ul> </div>
$("#settingInGraph").mousedown(function(e) { if (3 == e.which) { document.oncontextmenu = function() {return false;} $("#contextMenu").hide(); $("#contextMenu").attr("style","display: block; position: fixed; top:" + e.pageY + "px; left:" + e.pageX + "px; width: 180px;"); $("#contextMenu").show(); } }); $("#settingInGraph").click(function(e) { $("#contextMenu").hide(); });
如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
新聞熱點
疑難解答