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:

##

 
              
 
                
任务指派
 
                
任务监听
 
                
任务表单
 
                
 
                
...
 
              
 
            

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

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!