任意位置显示html菜单


脚本说明:

把如下代码加入<body>区域中

<SCRIPT language=javascript><!--

document.onclick = popUp

 

function popUp() {

newX = window.event.x + document.body.scrollLeft

newY = window.event.y + document.body.scrollTop

menu = document.all.itemopen

  if ( menu.style.display == ""){

    menu.style.display = "none" }

  else {

     menu.style.display = ""}

 

    menu.style.pixelLeft = newX - 50

    menu.style.pixelTop = newY - 50

}

//-->

 

 

</SCRIPT>

 

 

 <!-- Start of Popup Menu  -->

 

 <table id="itemopen" class='box'  style='display:none'> 

 <tr><td><a href='index.htm' class="cc" >弹出菜单</a></td></tr>  

 <tr><td><a href='time1.htm' class="cc" >本站首页</a></td></tr>

 <tr><td><a href='time2.htm' class="cc">My求职信</a></td></tr>

 <tr><td><a href='time3.htm' class="cc" >网上赚钱</a></td></tr>

 <tr><td><a href='ye1.htm' class="cc" >免费资源</a></td></tr>

 <tr><td><a href='ye2.htm' class="cc" >更多连接</a></td></tr>

 <tr><td><a href='ye3.htm' class="cc" >更多连接</a></td></tr>

 <tr><td><a href='zh1.htm' class="cc" >更多连接</a></td></tr>

    </table>

 

  <!-- End of Popup Menu  -->

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的巡检任务定义页面的vue模板代码,包括机器人下拉菜单、多选菜单、巡检开始按钮和地图显示: ```html <template> <div> <div class="form-group"> <label for="robot-select">选择机器人:</label> <select id="robot-select" v-model="selectedRobot"> <option v-for="robot in robotList" :value="robot">{{ robot }}</option> </select> </div> <div class="form-group"> <label for="points-select">选择巡检点位:</label> <div id="points-select" class="checkbox-list"> <div v-for="(point, index) in pointList" :key="index"> <input type="checkbox" :id="'point-'+index" :value="point" v-model="selectedPoints"> <label :for="'point-'+index">{{ point }}</label> </div> </div> </div> <button @click="startInspection">开始巡检</button> <div class="map-container"> <!-- 这里放地图显示的代码 --> </div> </div> </template> <script> export default { data() { return { robotList: ['机器人1', '机器人2', '机器人3'], // 机器人列表 selectedRobot: '', // 选中的机器人 pointList: ['点位1', '点位2', '点位3', '点位4', '点位5', '点位6', '点位7', '点位8', '点位9', '点位10'], // 点位列表 selectedPoints: [] // 选中的点位 } }, methods: { startInspection() { // 跳转到巡航页面,传递选中的机器人和点位信息 this.$router.push({ name: 'inspection', params: { robot: this.selectedRobot, points: this.selectedPoints } }) } } } </script> <style> /* 样式可以根据需要自行调整 */ .form-group { margin-bottom: 10px; } .checkbox-list { display: flex; flex-wrap: wrap; } .checkbox-list div { margin-right: 20px; margin-bottom: 10px; } .map-container { width: 60%; height: 500px; border: 1px solid #ccc; margin-top: 20px; } </style> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

denal

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值