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