使用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
类似资料：