在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签、关闭左侧标签、关闭右侧标签、关闭其他、关闭全部。

一、插件效果

  

二、实现思路

为window对象添加右键菜单事件监听:

当事件源对象为tab标签时,取消默认的右键菜单,显示菜单div即设置display: block,并为每一个菜单项添加事件监听;

当事件源对象不为tab标签时,关闭菜单div即设置display: none

为window对象添加单击事件监听:关闭菜单div即设置display: none

三、主要元素样式

.tab-contextmenu {
display: none;
position: absolute;
width: 140px;
height: 125px;
padding: 5px;
overflow: hidden;
border: 1px solid #dddddd;
box-shadow: 1px 1px 1px #888;
background: #FFFFFF;
}
.tab-contextmenu .tab-contextmenu-item {
width: 120px;
height: 25px;
padding: 0 10px;
font-size: 14px;
line-height: 25px;
cursor: pointer;
}
.tab-contextmenu .tab-contextmenu-item:hover {
color: #FFFFFF;
background: #999;
}

四、函数和事件监听

1、生成菜单div函数
/**
* 初始化标签右键菜单
*/
function initContextMenu() {
var contextMenu = $("body .tab-contextmenu");
if (!contextMenu[0]) {
$("<div class='tab-contextmenu'></div>")
.append(createContextMenuItem("关闭当前标签", "current"))
.append(createContextMenuItem("关闭左侧标签", "prevAll"))
.append(createContextMenuItem("关闭右侧标签", "nextAll"))
.append(createContextMenuItem("关闭其他", "other"))
.append(createContextMenuItem("关闭全部", "all"))
.appendTo("body");
}
// 创建一个右键菜单项
function createContextMenuItem(text, target) {
return $("<div class='tab-contextmenu-item'></div>").html(text).attr("target", target);
}
}
2、window事件监听
/**
* 初始化tab标签的右键菜单功能
*/
function initWindowContextMenu() {
// 给body绑定两个事件
$("body")
// 右键菜单显示
.bind("contextmenu", contextMenuHandler)
// 关闭右键菜单
.on("click", function() {
$(".tab-contextmenu").css("display", "none");
}); } /**
* body元素的contextmenu事件执行函数
* @param {Object} ev
*/
function contextMenuHandler(ev) { // 获取事件对象,需要兼容IE
var e = ev || window.event; // 获取自定义的右键菜单
var menu = $(".tab-contextmenu"); // 获取事件源
// e.srcElement,兼容IE、360、chrome
// e.target,兼容Firefox
src = $(e.srcElement || e.target); // 如果事件源对象是tab标签才显示右键菜单、绑定事件
if (src.hasClass("tab-header-item")) {
// 获取tab组件
var tab = src.parent().parent();
// 选中点击的标签
tab.tab("selectTab", src.attr("target"));
// 取消默认的浏览器右键菜单
e.preventDefault();
// 根据事件对象中鼠标点击的位置,进行定位
// 之后根据点击的标签进行事件绑定
menu
.css({"left": e.clientX + 'px', "top": e.clientY + 'px', "display": "block"})
.children().unbind("click").bind("click", function() {
// 判断关闭类型:关闭当前标签、关闭左侧标签、关闭右侧标签、关闭其他、关闭全部
switch($(this).attr("target")){
case 'current':
return removeTabs(tab, src);
case 'prevAll':
return removeTabs(tab, src.prevAll());
case 'nextAll':
return removeTabs(tab, src.nextAll());
case 'other':
return removeTabs(tab, src.siblings());
case 'all':
return removeTabs(tab, src.parent().children());
}
});
} else {
menu.css("display", "none");
}
}
3、批量关闭标签
/**
* 批量删除tab选项卡
* @param {Object} $tab
* @param {Object} items
*/
function removeTabs($tab, items) {
// 遍历需要关闭的标签对象,逐一进行关闭
items.each(function() {
// 调用removeTab函数关闭一个需要关闭的标签
removeTab($tab, $(this).attr("target"));
});
}

使用jQuery开发tab选项卡插件(可以右键关闭多个标签)的更多相关文章

  1. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  2. jQuery 开发一个简易插件

    jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...

  3. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  4. 一款基于jQuery的热点新闻Tab选项卡插件

    今天要分享的jQuery焦点图插件非常适合展示热点新闻,之前我们分享过好多基于jQuery的焦点图插件,效果都还很不错.它可以在图片上方展示文字标题,并且焦点图的切换按钮时tab风格的,图片切换也十分 ...

  5. [转]jquery开发自定义的插件总结

    本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...

  6. 使用jQuery开发accordion手风琴插件

    一.插件效果 手风琴插件常用的功能均已实现,包括:手风琴菜单项的折叠展开效果.选中指定菜单项.判断菜单项是否选中等. 效果如下: 二.插件内部HTML元素结构 <!-- accordioon组件 ...

  7. js和jquery实现tab选项卡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JQuery开发工具和插件

    最近的研究jquery.为大家介绍几款开发工具.能够帮助你提高开发的效率. 1.Dreamweaver Dreamweaver是建立在WEB站点和应用程序的专业工具. 将可视化工具.应用程序开发功能和 ...

  9. 基于jQuery开发的手风琴插件 jquery.accordion.js

     1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码:  /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...

随机推荐

  1. Git提交(PUSH)时记住密码 - 不用每次都输入密码

    开发使用的团队搭建好的GitLab服务器来作为项目共享开发,由于我不是最高权限,没办法把我git生成的SSH-Key放到服务器里面去,所有只好在每次提交的时候配置git config来记录密码不过期来 ...

  2. PyTorch 实战:计算 Wasserstein 距离

    PyTorch 实战:计算 Wasserstein 距离 2019-09-23 18:42:56 This blog is copied from: https://mp.weixin.qq.com/ ...

  3. 【转】史上最强Tomcat8性能优化

    https://blog.csdn.net/ThinkWon/article/details/102744033 文章目录授人以鱼不如授人以渔目的服务器资源Tomcat配置优化Linux环境安装运行T ...

  4. hive中同源多重insert写法

    多重insert: with tmp_a as ( select name from tmp_test3 ) from tmp_a insert overwrite table tmp_test1 s ...

  5. python问题集

    1.selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in P ...

  6. JAVA垃圾回收-可达性分析算法

    在java中是通过引用来和对象进行关联的,也就是说如果要操作对象,必须通过引用来进行.那么很显然一个简单的办法就是通过引用计数来判断一个对象是否可以被回收.不失一般性,如果一个对象没有任何引用与之关联 ...

  7. matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色

    一起来学matlab-matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 < ...

  8. 创建slackapp prometheus告警发到slack

    创建slackapp: https://blog.walterlv.com/post/slack-api-starter-incoming-webhooks.html#%E5%88%9B%E5%BB% ...

  9. Java面试题大汇总(附答案)

    下列面试题都是在网上收集的,本人抱着学习的态度找了下参考答案,有不足的地方还请指正,更多精彩内容可以关注我的微信公众号:Java团长 相关概念 面向对象的三个特征 封装,继承,多态.这个应该是人人皆知 ...

  10. Tomcat免安装版执行tomcat9.exe闪退

    Tomcat免安装版点击startup.bat可成功启动,但是执行tomcat9.exe时却闪退,这是因为免安装版的tomcat不会自动把tomcat注册到windows服务里,需要手动注册. 解决办 ...