`

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

 
阅读更多

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

 

具体实现代码:

 

右键菜单 HTML:

 

<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代码:

$(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