使用Bootstrap制作右键单击自定义菜单

我们可以轻松地通过右键单击创建一个漂亮的自定义菜单。

让我们创建一个div右键单击启用自定义菜单。

<div class="col-lg-6 bg-info" id="dv_rc" style="height:400px;" >
Right Click here
</div>

要防止默认右键单击菜单，我们需要在head标记中添加以下代码：

$(document).ready(function () {
$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault(); // prevents default menu
});
});

现在，我们需要为右键菜单制作一个面板：

<div id="popupRC" style="display:none;" class="panel panel-primary  "><div class="panel-heading ">Right Click Window</div><div class="panel-body"><div class="form-group"><label class="control-label col-md-2">Color</label><input type="color" class="form-control" id="idcolorr" /></div></div><div class="panel-footer"><input type="button"  class="btn btn-danger" value="close"  /></div></div>

请注意style="display:none;"。这背后的原因是在右键单击之前不显示。

现在我们需要在右键单击显示它。

我们在之前添加的jquery中添加了一行代码，以修改CSS，使其显示并定位在单击的右下方。

$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault(); // prevents native menu from being shown$("#popupRC").css({ position: "absolute", top: e.pageY,
left: e.pageX, display: "block" });
});

现在添加一些代码，点击close面板按钮关闭此窗口。

<input type="button" class="btn btn-danger" value="close" onClick="$('#popupRC').css({ display: 'none' });" />

完整代码如下：

<!DOCTYPE html>
<html>
<head><title>自定义右击菜单</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script>$(document).ready(function () {$("#dv_rc").bind('contextmenu', function (e) {e.preventDefault(); // prevents default menu $("#popupRC").css({ position: "absolute", top: e.pageY, left: e.pageX, display: "block" });});});</script><meta charset="utf-8" />
</head>
<body>
<div class="col-lg-6 bg-info" id="dv_rc" style="height:400px;" >
<h3>Right Click here </h3>
</div><div class="col-lg-6 bg-primary" style="height:400px;" >   </div><div id="popupRC" style="display:none;" class="panel panel-primary  "><div class="panel-heading ">Right Click Window</div><div class="panel-body">          <div class="form-group"><label class="control-label col-md-2">Color</label><input type="color" class="form-control" id="idcolorr" /></div>          </div><div class="panel-footer"><input type="button"  class="btn btn-danger" value="close" onClick="$('#popupRC').css({ display: 'none' });" /></div></div>
</body>
</html>

原文地址：https://www.codeproject.com/Tips/1172961/Custom-Menu-With-Right-Click-Using-Bootstrap

使用Bootstrap制作右键单击自定义菜单相关推荐

【电脑Windows日常】如何在 Windows 11 中自定义右键单击上下文菜单、自定义或者删除右键菜单的选项，包括桌面、文件夹和文件——详细教程（5个方法）
前言虽然许多人喜欢Windows 11 的简化右键单击上下文菜单,但有些人对截断的菜单不太满意.让我们看看一些根据您的喜好对其进行自定义的方法. 而且,很多默认的应用会使得右键菜单非常臃肿,需要进一 ...
Element 组件之右键鼠标自定义菜单
参考链接: Element 组件之右键鼠标自定义菜单 Vue+ElementUI实现给Tab页添加鼠标右键菜单栏 Element tree组件之自定义菜单基于element tree组件.效果 ...
Polyworks脚本开发学习笔记(十七)-制作宏脚本自定义工具条
Polyworks脚本开发学习笔记(十七)-制作宏脚本自定义工具条做好的宏脚本程序,每次打开脚本加载程序太多麻烦,为了方便的调用脚本做各种操作,可以使用系统的自定义工具条功能将脚本加载到工具条上. ...
js实现右键单击打开自定义的菜单
今天分享一个,单击鼠标右键弹出自定义菜单,选中不同菜单选项,实现其对应功能首先先自已定义一个菜单 <div id="menu"><ul><li ...
Excel（VBA）自定义右键单击菜单以启动宏(示例代码)
主要介绍 Excel(VBA)自定义右键单击菜单以启动宏(示例代码)以及相关的经验技巧 THISWORKBOOK (paste into ThisWorkbook, macros that open ...
cad自定义菜单cui_CAD中如何制作自定义菜单
CAD中如何制作自定义菜单 2019-4-27 倒立控 CAD 经常有小伙伴问我怎么把小葛CAD工具箱的功能加入到CAD的菜单栏中.我个人当然是推荐使用自定义快捷键的方式来调用我的工具箱功能,或者CA ...
右键脚本html,js实现右键自定义菜单
本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 #menu { height: 200px; width: 50px; border: 1px solid gray; back ...
java右键弹出菜单_javascript自定义右键弹出菜单实现方法
本文实例讲述了javascript自定义右键弹出菜单实现方法.分享给大家供大家参考.具体实现方法如下: 无标题页 var oPopup = window.createPopup(); function ...
JavaScript学习（三十七）—实现右键自定义菜单的功能
JavaScript学习(三十七)-实现右键自定义菜单的功能代码如下: <!DOCTYPE html> <html lang="en"><head& ...

使用Bootstrap制作右键单击自定义菜单

使用Bootstrap制作右键单击自定义菜单相关推荐

最新文章

热门文章