EasyUI 的Tab 标签添加右键菜单
样式：
主要提供右键功能代码。
(只需要提供你需要的js和css就行了)
<!doctype html>
<html>
<head>
<base href="/smile/" />
<title>标签右键菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="0">
<link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/icon.css?ver=1.0031" />
<link rel="stylesheet" type="text/css" href="/smile/js/easyui/themes/gray/easyui.css?ver=1.0031" />
<script type="text/javascript" src="/smile/js/jquery.min.js?ver=1.0031"></script>
<script type="text/javascript" src="/smile/js/easyui/jquery.easyui.min.js?ver=1.0031"></script> </head>
<body class="easyui-layout">
<div data-options="region:'west',title:'功能导航菜单',collapsible:false,iconCls:'fa fa-leaf'" style="width: 200px;">
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="菜单一" style="overflow: auto; padding: 5px;" iconCls="fa fa-building">
<ul class="easyui-tree" data-options="onClick:clickTree">
<li data-options="attributes:{'url':'/smile/html/menu1.html'}"><span>菜单一</span></li>
</ul>
</div>
<div title="菜单二" style="overflow: auto; padding: 5px;" iconCls="fa fa-building">
<ul class="easyui-tree" data-options="onClick:clickTree">
<li data-options="attributes:{'url':'/smile/html/menu2.html'}"><span>菜单二</span></li>
</ul>
</div>
</div>
</div>
<!--首页 -->
<div data-options="region:'center',collapsible:false">
<div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true">
<div title="首页" style="overflow:hidden;" data-options="iconCls:'fa fa-home'">
<div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div>
</div>
</div>
</div>
<!--右键菜单栏 -->
<div id="mm" class="easyui-menu" style="width: 120px;">
<div id="mm-tabclosecurrent" name="1"> 关闭当前页</div>
<div id="mm-tabcloseall" name="2"> 全部关闭</div>
<div id="mm-tabcloseother" name="3"> 其他全部关闭</div>
</div>
<script type="text/javascript">
$(function(){
//监听右键事件，创建右键菜单
$('#mainTabs').tabs({
onContextMenu:function(e, title,index){
e.preventDefault();
if(index>0){
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
}).data("tabTitle", title);
}
}
});
//右键菜单click
$("#mm").menu({
onClick : function (item) {
closeTab(this, item.name);
}
}); }); function addTab(title, url) {
if ($('#mainTabs').tabs('exists', title)) {
$('#mainTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs('add', {
title: title,
content: content,
closable: true ,
cache:true,
});
} } // //删除Tabs
function closeTab(menu, type) {
var allTabs = $("#mainTabs").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");
var curTabIndex = $("#mainTabs").tabs("getTabIndex", $("#mainTabs").tabs("getTab", curTabTitle));
switch (type) {
case "1"://关闭当前
$("#mainTabs").tabs("close", curTabTitle);
return false;
break;
case "2"://全部关闭
for (var i = 0; i < allTabtitle.length; i++) {
$('#mainTabs').tabs('close', allTabtitle[i]);
}
break;
case "3"://关闭其他全部
for (var i = 0; i < allTabtitle.length; i++) {
if (curTabTitle != allTabtitle[i])
$('#mainTabs').tabs('close', allTabtitle[i]);
}
$('#mainTabs').tabs('select', curTabTitle);
break;
} } function clickTree(node) {
if ($(this).tree('isLeaf', node.target)) {
addTab(node.text, node.attributes.url);
} else {
$(this).tree('toggle', node.target); }
} </script>
</body>
</html>
EasyUI 的Tab 标签添加右键菜单的更多相关文章
- 为EasyUI 的Tab 标签添加右键菜单
在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> ...
- 仅在TabControl中的Tab中添加右键菜单
若想实现仅在TabControl中的Tab中添加右键菜单,可在XAML中通过使用样式得到: <TabControl> <TabControl.ItemContainerStyle&g ...
- 使用easyui为tab页增加右键菜单
在使用easyui进行上左右布局一文中,我们已经使用easyui搭建起了一个简单的上左右布局.在使用的过程中,我们经常会遇到tab页打开的太多,但只能一个一个的关闭的烦恼,这个时候有没有想到eclip ...
- easyui tab上面添加右键菜单
说扩展,我觉得有点过了,只是加入了右击TAB选项卡时显示关闭的上下文菜单,先看下效果图: 具体实现代码: 右键菜单 HTML: <div id="mm" class=&quo ...
- EasyUI-Tab 标签添加右键菜单
在网上看了很多demo 自己实现了一个效果如下 <!doctype html> <html> <head> <meta http-equiv="co ...
- 为jQuery-easyui的tab组件添加右键菜单功能
加入了右击TAB选项卡时显示关闭的上下文菜单 具体实现代码: 右键菜单 HTML: <div id="mm" class="easyui-menu" st ...
- 给jquery easy-ui 添加右键菜单
版权声明:转自为EasyUI 的Tab 标签添加右键菜单
- NX二次开发-自定义添加右键菜单RegisterConfigureContextMenuCallback
首先声明这个知识我以前不知道,是夏天的时候看到别人在唐工的QQ群里问的,唐工说西门子官方有这个例子.那个时候我因为在忙其他事情,也就没去研究那个右键菜单到底是怎么做的.关于自定义添加右键菜单Regis ...
- pyqt5-为QListWidget添加右键菜单
如何在pyqt5下为QListWidget添加右键菜单? 能百度到的均是pyqt4下的,有些貌似并不好用. 在尝试了很多方法后,下面贴出可用的方法: from PyQt4 import QtCore, ...
随机推荐
- Python快速建站系列-Part.Six-文章内容浏览
|版权声明:本文为博主原创文章,未经博主允许不得转载. 其实到这里网站的基本功能已经完成一半了,第六节就完成文章内容的阅读功能. 完成blogview.html↓ {% extends "m ...
- Oracle基本sql操作
1.查询用户下的所有表 查询用户下的所有表 select distinct table_name from user_tab_columns; 2.搜索出前N条记录 Select a.*,rownum ...
- WebService "因 URL 意外地以 结束，请求格式无法识别" 的解决方法
最近在做一个图片上传的功能,js调用用webservice进行异步访问服务器,对于不是经常用webservice的菜鸟来说,经常会遇到以下的问题(起码我是遇到了) 在页面上写了js调用代码如下所示: ...
- php 读取输出其他文件的方法
ob_start();iconv('utf-8','gb2312',readfile('1.html')); //直接输出文本内容echo '<hr>'; $data = file_get ...
- PostgreSQL入门
这篇文章主要介绍我在最近工作中接触到的数据库PostgreSQL,做个入门记录,以便自己日后回顾. 1.下载安装,安装配置过程可以参考http://blog.chinaunix.net/uid-354 ...
- tinyshop框架教程已在腾讯课堂开课
php就业网简介:www.php91.net,专注于Thinkphp框架教程的php框架学习中心.同时也有小崔老师自学php的教程,与你一起成长哦 同时,php就业网教程部分:http://www.p ...
- Django进阶2
一.ORM操作进阶 ForeignKey关联 示例models from django.db import models # Create your models here. class User(m ...
- 《编写可维护的JavaScript》——JavaScript编码规范（二）
昨天是我偶像生日,现在整个人都还好兴奋啊O(∩_∩)O~ 闲话少说,让我先发篇随笔留念一下^_^ ////////////////////////////////正文分割线///////////// ...
- [java报错]Could not instantiate listener XXXXXX
写在开头的话: 兜兜转转,辞去了深圳的工作,回到了武汉,从事的居然一度是我最不想学的语言-java,曾经以为自己并不会java,但是上手之后,发现语言都是相通的,自己一度排斥学习java真的是不能再傻 ...
- Scala相关
vim conf for scala: http://stackoverflow.com/questions/3626203/text-editor-for-scala http://fengshen ...