`

为jQuery-easyui的tab组件添加右键菜单功能

 
阅读更多

jQuery中的easyui插件包的tab标签组件,挺不错的,下面介绍如何为tab标签组件添加右键功能,效果图如下:

加入了右击TAB选项卡时显示关闭的上下文菜单

具体实现代码:

右键菜单 HTML:

 Code [http://www.xueit.com]
<div id="mm" class="easyui-menu" style="width:150px;"> <div id="mm-tabclose">关闭</div> <div id="mm-tabcloseall">全部关闭</div> <div id="mm-tabcloseother">除此之外全部关闭</div> <div class="menu-sep"></div> <div id="mm-tabcloseright">当前页右侧全部关闭</div> <div id="mm-tabcloseleft">当前页左侧全部关闭</div> </div>

下面是js代码:

 Code [http://www.xueit.com]
$(function(){ tabClose(); tabCloseEven(); }) function tabClose() { /*双击关闭TAB选项卡*/ $(".tabs-inner").dblclick(function(){ var subtitle = $(this).children("span").text(); $('#tabs').tabs('close',subtitle); }) $(".tabs-inner").bind('contextmenu',function(e){ $('#mm').menu('show', { left: e.pageX, top: e.pageY, }); var subtitle =$(this).children("span").text(); $('#mm').data("currtab",subtitle); return false; }); } //绑定右键菜单事件 function tabCloseEven() { //关闭当前 $('#mm-tabclose').click(function(){ var currtab_title = $('#mm').data("currtab"); $('#tabs').tabs('close',currtab_title); }) //全部关闭 $('#mm-tabcloseall').click(function(){ $('.tabs-inner span').each(function(i,n){ var t = $(n).text(); $('#tabs').tabs('close',t); }); }); //关闭除当前之外的TAB $('#mm-tabcloseother').click(function(){ var currtab_title = $('#mm').data("currtab"); $('.tabs-inner span').each(function(i,n){ var t = $(n).text(); if(t!=currtab_title) $('#tabs').tabs('close',t); }); }); //关闭当前右侧的TAB $('#mm-tabcloseright').click(function(){ var nextall = $('.tabs-selected').nextAll(); if(nextall.length==0){ //msgShow('系统提示','后边没有啦~~','error'); alert('后边没有啦~~'); return false; } nextall.each(function(i,n){ var t=$('a:eq(0) span',$(n)).text(); $('#tabs').tabs('close',t); }); return false; }); //关闭当前左侧的TAB $('#mm-tabcloseleft').click(function(){ var prevall = $('.tabs-selected').prevAll(); if(prevall.length==0){ alert('到头了,前边没有啦~~'); return false; } prevall.each(function(i,n){ var t=$('a:eq(0) span',$(n)).text(); $('#tabs').tabs('close',t); }); return false; }); }

分享到:
评论

相关推荐

    为jQuery-easyui的tab组件添加右键菜单功能的简单实例

    在本文中,我们将探讨如何为jQuery-easyui的tab组件添加右键菜单功能。这个功能在许多Web应用程序中非常有用,允许用户通过右键点击选项卡来执行特定操作,如关闭当前选项卡、关闭所有选项卡等。我们将分为以下几个...

    Easyui添加Tab右键菜单

    默认情况下,EasyUI的Tab组件并不支持右键菜单,但通过自定义JavaScript代码,我们可以为每个Tab添加这样的功能。 在"demo.html"中,你会看到HTML结构是如何设置的。通常,一个Tab面板由`&lt;div&gt;`元素包裹,使用`...

    EasyUI tabs添加右键关闭菜单

    总结,通过结合 EasyUI 的 tabs 组件和 jQuery 的 contextmenu 事件,我们可以轻松地为 EasyUI 的 tabs 添加右键菜单功能,提高用户体验。在开发过程中,理解组件的工作原理和事件机制是非常重要的,这有助于我们更...

    jQuery EasyUI实现右键菜单变灰不可用效果

    在本文中,我们将探讨如何使用jQuery EasyUI库来实现右键菜单中的特定选项变灰不可用的效果。jQuery EasyUI是一个基于jQuery的UI框架,它提供了一系列的组件,如表格、表单、窗口、菜单等,使得开发者能够快速构建富...

    为EasyUI的Tab标签添加右键菜单的方法

    在本文中,我们将深入探讨如何为EasyUI的Tab标签添加右键菜单,这是一个对于提升用户体验非常实用的功能。EasyUI是一个基于jQuery的UI框架,它提供了一系列组件来帮助开发者快速构建美观的Web应用。在之前的实现中,...

    easyui tabs 右键关闭

    最后,标签中的 "easyui tab menu 右键 关闭" 概括了这个话题的关键点:使用 EasyUI 的选项卡组件,结合右键菜单功能,实现用户可以右键点击选项卡关闭的功能。 总结一下,要实现“easyui tabs 右键关闭”,你需要...

    jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

    这个实例展示了如何利用jQuery EasyUI框架来创建一个带有自定义右键菜单的选项卡界面,并通过这些菜单项控制选项卡的关闭功能。通过这种方式,开发者可以在Web应用中快速实现复杂的界面交互逻辑,提升用户的操作体验...

    jQuery EasyUI右键菜单实现关闭标签/选项卡

    本文讲解了如何使用jQuery EasyUI框架实现右键菜单来关闭标签页(选项卡)。jQuery EasyUI是一个基于jQuery的前端UI框架,它提供了一系列可轻松使用的界面组件,例如选项卡、数据网格等,能够帮助开发者快速构建交互...

    easyui-tabbar右击弹出菜单

    本文将详细探讨如何利用EasyUI的TabPanel(tabs)组件实现一个功能丰富的右键菜单,包括关闭当前、关闭其他、关闭左侧和关闭右侧的选项。 首先,让我们了解EasyUI的TabPanel组件。TabPanel是EasyUI中的一个核心组件...

    jQuery EasyUI 1.3 API 中文教程

    带右键菜单的数据表格 - DataGrid ContextMenu 数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 - DataGridFooter Row 树形数据表格 - TreeGrid 数据表格显示页脚 - TreeGrid 带分页的树形...

    JqueryEasyU页面布局。左边导航,上面tabs.都已经集成好了。

    Tab页支持多种操作,比如右键菜单提供关闭、关闭其他、关闭左边所有、关闭右边所有的功能。这些功能可以通过监听`contextmenu`(右键点击)事件,结合`easyui-tabs`的API实现,例如`tabs('close', tabPanelId)`用于...

    JEECG UI标签库帮助文档v3.3

    - **prohibit**: 常用浏览器操作JS函数,如禁用右键菜单、禁用回退、禁用F5等。 - **designer**: 在线流程设计器函数库。 - **tools**: 包含artDialog4.1.6弹出窗及常用CURD操作函数。 #### Datagrid(数据表) *...

    MVC+EasyUI+三层新闻网站建立 主页布局的方法(五)

    后续章节可能会涉及使用EasyUI的Tab组件,进一步丰富主页内容和功能。通过这样的布局设计,新闻网站将具有良好的用户体验和管理界面,方便用户浏览和管理员进行后台操作。不断学习和实践,你将能够熟练掌握MVC框架和...

Global site tag (gtag.js) - Google Analytics