首頁 >web前端 >js教程 >實例詳解bootstrap用dropdown-menu實現上下文選單

實例詳解bootstrap用dropdown-menu實現上下文選單

小云云
小云云原創
2017-12-27 11:04:582638瀏覽

本文主要介紹了詳解bootstrap用dropdown-menu實現上下文選單的相關資料,希望透過本文能幫助到大家,需要的朋友可以參考下,希望能幫助到大家。

詳解bootstrap用dropdown-menu實作上下文選單

#寫在前面:

##所謂上下文選單,它與一般選單的區別在於:


透過右鍵觸發顯示在滑鼠右鍵點擊處


#滑鼠在別處點擊後,該選單消失


實作方法:


在html中定義一個普通的沒有觸發條件的dropdown-menu,然後寫這個menu的父容器的監聽即可實現。


##程式碼:



<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" >任务指派</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务监听</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务表单</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();              });

相關推薦:


實例講解響應式框架Bootstrap柵格系統

Bootstrap 樹控制項使用經驗分享

實例講解bootstrap paginator分頁插件的兩種使用方式

以上是實例詳解bootstrap用dropdown-menu實現上下文選單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn