web 页面右键菜单

 

 <style type="text/css">
.menubox_active {
background-color: #ccc;
border: 1px solid #ddd;
margin: 0px;
padding: 0px;
width: 200px;
font-weight: bold;
font-size: larger;
list-style: none;
}
.menubox_active li {
padding-left: 10px;
line-height: 25px;
}
.menubox_active li:hover {
background-color: #c0c0FF
}
a:link {
color: #000;
}
a:visited {
color: blue;
}
a:hover {
color: #FF7400;
}
a:active {
color: #F7A300;
}
</style>
<script type="text/javascript">
window.onload = function() {
var ull = document.getElementById("ull");
ull.style.display = "none";

//设置右键菜单可见,并根据鼠标点击位置出现
document.getElementById('div1').oncontextmenu = function(event) {
event = window.event ? window.event : event;
ull.className = "menubox_active";
ull.style.display = "block"
ull.style.position = "absolute";
ull.style.left = (event.clientX ? event.clientX : event.X) + "px";
ull.style.top = (event.clientY ? event.clientY : event.Y)+ "px";
return false;
};
//取消鼠标右键弹出菜单的可见性
document.onmousedown = function() {
ull.style.display = "none"
};
}
</script>
</head>
<body>
<h1>测试DOM结点操作</h1>
<div id="div1"  style="width: 200px; height: 200px; border: solid 1px blue"></div>
<ul id="ull" class="menubox">
<li>
<a href="http://baidu.com">baidu</a>
</li>
<li>
<a href="#">#####</a>
</li>
</ul>
</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Flask框架使用地图添加右键菜单,你需要将地图的JavaScript代码嵌入到HTML模板,并且在模板定义右键菜单的HTML元素。然后,你可以使用Flask提供的模板引擎(例如Jinja2)来动态渲染模板,将地图和菜单添加到Web应用程序。 以下是一个简单的示例,演示了如何在Flask框架使用Leaflet地图添加右键菜单: ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run() ``` 在这个示例,我们创建了一个Flask应用程序,并且定义了一个路由,将根路径映射到`index()`函数。`index()`函数渲染了一个名为`index.html`的模板,该模板包含了地图的JavaScript代码和右键菜单的HTML元素。 下面是`index.html`模板的代码: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.css" /> <script src="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.js"></script> <style> #map { height: 400px; } .leaflet-contextmenu { background-color: #fff; border: 1px solid #ccc; padding: 5px; display: none; position: absolute; z-index: 99999; } </style> </head> <body> <div id="map"></div> <div class="leaflet-contextmenu"> <ul> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div> <script> var map = L.map('map').setView([51.505, -0.09], 13); var contextMenu = document.querySelector('.leaflet-contextmenu'); map.on('contextmenu', function(e) { contextMenu.style.display = 'block'; contextMenu.style.left = e.containerPoint.x + 'px'; contextMenu.style.top = e.containerPoint.y + 'px'; }); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors', maxZoom: 18 }).addTo(map); </script> </body> </html> ``` 在这个模板,我们首先引入了Leaflet地图库的CSS和JavaScript文件。然后,我们定义了地图和右键菜单的HTML元素,其右键菜单使用了一个自定义的CSS样式。接下来,我们定义了一个JavaScript代码块,在其创建了一个Leaflet地图,并且监听了`contextmenu`事件。在事件处理函数,我们设置了右键菜单的位置,并将其显示出来。最后,我们添加了OpenStreetMap地图图层。 你可以在终端启动该Flask应用程序,然后在浏览器访问`http://localhost:5000`,即可看到包含地图和右键菜单Web页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值