Detailed example of bootstrap using dropdown-menu to implement context menu

This article mainly introduces the relevant information about using dropdown-menu to implement context menu in bootstrap. I hope this article can help everyone. Friends who need it can refer to it. I hope it can help everyone.

Detailed explanation of bootstrap using dropdown-menu to implement context menu

Written in front:

The so-called context menu, its difference from the general menu It lies in:

Triggered by right-clicking and displayed at the right-click location of the mouse

After the mouse is clicked elsewhere, the menu disappears

Implementation method:

Define an ordinary dropdown-menu without trigger conditions in HTML, and then write the monitoring of the parent container of this menu to achieve this.

Code:

##

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

Related recommendations:

Examples to explain the responsive framework Bootstrap grid system

Bootstrap tree control usage experience sharing

Examples to explain the bootstrap paginator paging plug-in Two ways to use

The above is the detailed content of Detailed example of bootstrap using dropdown-menu to implement context menu. For more information, please follow other related articles on the PHP Chinese website!