在Easyui中给tab添加右键菜单,实现以下功能:
1、首先编写jsp文件
<div id="layout_center_tabs" class="easyui-tabs" data-options="fit:true,border:false" style="overflow: hidden;"> <div title="首页"></div> </div> <div id="layout_center_tabsMenu" style="width: 120px;display:none;"> <div type="refresh">刷新</div> <div class="menu-sep"></div> <div type="close">关闭</div> <div type="closeOther">关闭其他</div> <div type="closeAll">关闭所有</div> </div>
2、编写js代码
<script type="text/javascript"> $(function(){ $('#layout_center_tabsMenu').menu({ onClick : function(item) { var curTabTitle = $(this).data('tabTitle'); var type = $(item.target).attr('type'); if (type === 'refresh') { layout_center_refreshTab(curTabTitle); return; } if (type === 'close') { var t = $('#layout_center_tabs').tabs('getTab', curTabTitle); if (t.panel('options').closable) { $('#layout_center_tabs').tabs('close', curTabTitle); } return; } var allTabs = $('#layout_center_tabs').tabs('tabs'); var closeTabsTitle = []; $.each(allTabs, function() { var opt = $(this).panel('options'); if (opt.closable && opt.title != curTabTitle && type === 'closeOther') { closeTabsTitle.push(opt.title); } else if (opt.closable && type === 'closeAll') { closeTabsTitle.push(opt.title); } }); for ( var i = 0; i < closeTabsTitle.length; i++) { $('#layout_center_tabs').tabs('close', closeTabsTitle[i]); } } }); $('#layout_center_tabs').tabs({ fit : true, border : false, onContextMenu : function(e, title) { e.preventDefault(); $('#layout_center_tabsMenu').menu('show', { left : e.pageX, top : e.pageY }).data('tabTitle', title); }, tools : [ { iconCls : 'icon-reload', handler : function() { var href = $('#layout_center_tabs').tabs('getSelected').panel('options').href; if (href) {/*说明tab是以href方式引入的目标页面*/ var index = $('#layout_center_tabs').tabs('getTabIndex', $('#layout_center_tabs').tabs('getSelected')); $('#layout_center_tabs').tabs('getTab', index).panel('refresh'); } } }] }); }); </script>
相关推荐
Easyui添加Tab右键菜单示例,右键弹出操作菜单,刷新、关闭、全部关闭、关闭左侧、关闭右侧
easyui右键设置疑问
非常好看的易用的easyui tabs 右键插件,自己两行代码就搞定
自己加 EasyUI-1.4.4/jquery.easyui.min.js, EasyUI-1.4.4/jquery-1.4.4.min.js /EasyUI-1.4.4/themes/icon.css, EasyUI-1.4.4/themes/default/easyui.css easyui右键功能
jQuery EasyUI 实例演示(菜单、TAB等)! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
easy-UI 右键列头,控制列的显示和隐藏,是啊easyui拓展的功能之一,只需引入此js代码,即可产生效果,右键列名,控制列的显示和隐藏
用jQuery实现了三种情况下的变灰不可用的效果,当鼠标放到上面点击,右键菜单就会消失,其实解决的办法也很简单,只要在对应的单击事件里重新绑定右键菜单即可,需要的朋友可以参考下
下面小编就为大家带来一篇为jQuery-easyui的tab组件添加右键菜单功能的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
用户在每次使用的时候,都需要去先选中一条或者多条数据,然后在去点按钮进行相关操作,这样其实还是很麻烦的,做项目的过程中,为了用户着想,做了一个右键菜单,用户想要删除或者编辑某一条数据直接在其位置上右键...
添加了一个鼠标右键菜单进入,让操作更加鲜明。能满足多种情况
主要介绍了jQuery EasyUI右键菜单实现关闭标签/选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
下面小编就为大家带来一篇jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
前期的准备工作: 1、下载DEMO源码,并升级为最新版本(jquery 1.7.2,Easyui 1.2.6),直接替换就可以啦,升级easyui 是的要把css js theme 全部替换 2、在首页的HTML代码中:将 代码如下: ”mm” class=”easyui-...
为了操作方便,添加了一个右键菜单进入,也适当的添加了动画,让操作变得圆滑。
easyui选项卡模仿浏览器的右键关闭功能。 easyui选项卡模仿浏览器的右键关闭功能。
目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); });...@ page language="java" import="java....easyui右键菜单-关闭标
easyui tab 绝对好用的tab插件
NULL 博文链接:https://xiaofengtoo.iteye.com/blog/1263362