给bootstrap右边的菜单加上右键关闭
2024-09-07 11:14:29
<ul class="rightmenu">
<li data-type="closethis">关闭当前</li>
<li data-type="closeall">关闭所有</li>
<li data-type="closemenu">关闭菜单</li>
</ul>
首先附上右键弹出的菜单的html代码
<script type="text/javascript">
$('.rightmenu').hide();
$(document).click(function () {
$('.rightmenu').hide();
})
$("#lr_frame_tabs_ul").on("contextmenu",function(e){
var popupmenu = $(".rightmenu");
l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({left: l, top: t}).show();
return false;
}) $(".rightmenu li").click(function () {
if ($(this).attr("data-type") == "closethis") {
var tabid = $("li[class='wms-frame-tabItem active']").attr('id').substr(7);// 获取当前激活的选项卡ID
debugger
top.robo.frameTab.close(tabid);
} else if ($(this).attr("data-type") == "closeall") {
var tabtitle = $(".wms-frame-tabItem");
var ids = new Array();
$.each(tabtitle, function (i) {
ids[i] = $(this).attr("id").substr(7);
if (ids[i] != "0")
top.robo.frameTab.close(ids[i]);
}) } else if ($(this).attr("data-type") == "closemenu") {
$('.rightmenu').hide();
}
$('.rightmenu').hide();
}) </script>
然后附加上去js代码,做一点解释一开始加载的时候菜单应该是默认隐藏的,菜单右键的点击功能是on绑定contextmenu触发的。
最后是效果图!!!
最新文章
- 关于Redis的ACID
- 添加自编译的apache为linux系统服务
- date命令总结
- mysql查询语句select-子查询
- ListView 下拉更新 (支持 Android)
- java 28 - 7 JDK8的新特性 之 接口可以使用方法
- 【Alpha阶段】第五次Scrum例会
- @import和link的区别
- 排序算法 - 快速排序(Quick Sort)
- 【淡墨Unity3D Shader计划】四 热带雨林的文章: 排除、深度测试、Alpha测试和基本雾编译
- Ketama Consisent Hash
- cordova crosswalk android 7.0 问题
- mac下安装Java开发环境
- EChart 文字大小调整 饼状图为例
- IDE安装Lombok插件提高开发效率
- nginx 编译安装以及简单配置
- 如何使用CSS 让Table的最后一列的右边框不显示
- Hadoop记录-hadoop2.x常用端口及定义方法
- Chrome Google浏览器下载
- CSS 简单归纳 -- 前端知识