使用easyui为tab页增加右键菜单
在使用easyui进行上左右布局一文中,我们已经使用easyui搭建起了一个简单的上左右布局。在使用的过程中,我们经常会遇到tab页打开的太多,但只能一个一个的关闭的烦恼,这个时候有没有想到eclipse中tab右键菜单的关闭其他和关闭所有选项呢?
下面我们就来使用easyui来实现tab页的关闭其他和关闭所有的功能。
1.在上一篇文章的html结构中添加入menu的结构
<body>
<div id="home-layout">
<!-- 以前的code -->
</div>
<!-- tab页的右键菜单 -->
<div id="home-tabs-menu" class="easyui-menu">
<div data-options="name:1">关闭</div>
<div data-options="name:2">关闭其他</div>
<div data-options="name:3">关闭所有</div>
</div>
</body>
2.为tab组件添加鼠标右键事件
<script>
/*
* 初始化内容区的tabs
*/
$("#home-tabs").tabs({
fit : true,
border : false,
//为其附加鼠标右键事件
onContextMenu: function(e, title, index){
//该方法通知浏览器不要执行与此事件关联的默认动作
//即屏蔽了浏览器在tab页上的鼠标右键事件
e.preventDefault();
var mm = $("#home-tabs-menu");
//显示右键菜单
mm.menu("show",{
top: e.pageY,
left: e.pageX
}).data("tabTitle",title);
//为右键菜单选项绑定事件
mm.menu({
onClick: function(item){
closeTab(this, item.name);
}
});
}
});
</script>
3.closeTab方法
<script>
/*
* 关闭tab
*/
function closeTab(menu, type){
var allTabs = $("#home-tabs").tabs("tabs");
var allTabTitle = [];
$.each(allTabs, function(i, n){
var opt = $(n).panel("options");
if(opt.closable){
allTabTitle.push(opt.title);
}
});
var curTabTitle = $(menu).data("tabTitle");
switch(type){
case 1:
//关闭当前
$("#home-tabs").tabs("close", curTabTitle);
return false;
break;
case 2:
//关闭其他
for(var i = 0; i < allTabTitle.length; i++){
if(curTabTitle != allTabTitle[i]){
$("#home-tabs").tabs("close",allTabTitle[i]);
}
}
$("#home-tabs").tabs("select",curTabTitle);
break;
case 3:
//关闭所有
for(var i = 0; i < allTabTitle.length; i++){
$("#home-tabs").tabs("close",allTabTitle[i]);
}
break;
}
}
</script>
这样就完成了tab页的右键菜单了,是不是使用起来很方便呢?当然,我们还可以继续在此基础上为它添加更多的功能!
使用easyui为tab页增加右键菜单的更多相关文章
- EasyUI 的Tab 标签添加右键菜单
样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href=& ...
- 为EasyUI 的Tab 标签添加右键菜单
在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> ...
- SNF快速开发平台MVC-EasyUI3.9之-DataGrid表格控件如何增加右键菜单
如题,我们在项目开发当中会遇到需要,表格控件增加右键菜单的使用. 下面我们就以SNF框架增加右键菜单步骤如下: 1.在加载页面当中增加如下菜单定义 <div id="mm" ...
- 仅在TabControl中的Tab中添加右键菜单
若想实现仅在TabControl中的Tab中添加右键菜单,可在XAML中通过使用样式得到: <TabControl> <TabControl.ItemContainerStyle&g ...
- jquery easyui 中tab页添加其他页面,href与content的用法与区别
//tab页增加 function addPanel(name,url){ var dd = $('#tt').tabs('exists',name); if(dd){ $('#tt').tabs(' ...
- easyui tab上面添加右键菜单
说扩展,我觉得有点过了,只是加入了右击TAB选项卡时显示关闭的上下文菜单,先看下效果图: 具体实现代码: 右键菜单 HTML: <div id="mm" class=&quo ...
- 为jQuery-easyui的tab组件添加右键菜单功能
加入了右击TAB选项卡时显示关闭的上下文菜单 具体实现代码: 右键菜单 HTML: <div id="mm" class="easyui-menu" st ...
- Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件
做个项目使用jquery easyui来做前端,也许是对此不是很熟悉,总是发现一些不可理解的事件. 主要源代码如下: <script type="text/javascript&qu ...
- Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页
先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...
随机推荐
- 查看Android 系统发送的广播
命令行输入如下命令 adb shell dumpsys |grep BroadcastRecord
- Windows 系统安装 git基础小白的简单操作包含基本输入命令
首先 去官网下载git应用 https://git-scm.com/downloads 点击前往 安装的操作也比较简单,一直点击下一步 安装完成之后 在空白桌面点击是否有 Git Gui ...
- WPS函数
vlookup函数:=VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) 官方解释:其逻辑为在某一区间内搜索区间外某一单元格的值, ...
- HTML5(十一)——WebSocket 基础教程
一.为什么要学 WebSocket? websocket 是 HTML5 提供的一种长链接双向通讯协议,使得客户端和服务器之间的数据交换更简单,允许服务端主动向客户端推送数据,并且客户端与服务端只需连 ...
- 超过Numpy的速度有多难?试试Numba的GPU加速
技术背景 Numpy是在Python中非常常用的一个库,不仅具有良好的接口文档和生态,还具备了最顶级的性能,这个库很大程度上的弥补了Python本身性能上的缺陷.虽然我们也可以自己使用Cython或者 ...
- Specification排序orderby
废话不多说直接贴代码 Specification<Course> sf = new Specification<Course>() { @Override public Pre ...
- C#比较两个对象是否为同一个对象。 Visual Studio调试器指南---多线程应用程序调试(一)
两个对象是否为同一个对象:是看两个对象是否指向堆中的同一块内存. 1.使用object.ReferenceEquals() class Program { static void Main(strin ...
- 【springboot】全局异常处理
转自: https://blog.csdn.net/cp026la/article/details/86495196 前言: 开发中异常的处理必不可少,常用的就是 throw 和 try catch, ...
- save tran tranName
begin tran 语句将 @@Trancount加 1.Rollback tran将 @@Trancount递减到 0,但 Rollback tran savepoint_name 除外,它不影响 ...
- Timer和TimerTask(转载)
下面内容转载自: http://blog.csdn.net/xieyuooo/article/details/8607220 其实就Timer来讲就是一个调度器,而TimerTask呢只是一个实现了r ...