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!