使用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制作右键单击自定义菜单

猜你喜欢