本文主要介紹了詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下，希望能幫助到大家。

詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單

寫(xiě)在前面：

所謂上下文菜單，它與一般菜單的區(qū)別在于：

通過(guò)右鍵觸發(fā)顯示在鼠標(biāo)右鍵點(diǎn)擊處

鼠標(biāo)在別處點(diǎn)擊后，該菜單消失

實(shí)現(xiàn)方法：

在html中定義一個(gè)普通的沒(méi)有觸發(fā)條件的dropdown-menu，然后寫(xiě)這個(gè)menu的父容器的監(jiān)聽(tīng)即可實(shí)現(xiàn)。

代碼：

<p 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)聽(tīng)</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任務(wù)表單</a></li> 
                <li class="pider"></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a></li> 
              </ul> 
            </p>

$("#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();              });

相關(guān)推薦：

實(shí)例講解響應(yīng)式框架Bootstrap柵格系統(tǒng)

Bootstrap 樹(shù)控件使用經(jīng)驗(yàn)分享

實(shí)例講解bootstrap?paginator分頁(yè)插件的兩種使用方式

以上是實(shí)例詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！