`
ledefe
  • 浏览: 5876 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

easyui中tabs的右键菜单的实现

阅读更多
步骤一:
    在页面里加入html片段
 <div id="mainTab" class="easyui-tabs" style="width:500px;height:250px;">  
    <div title="Tab1" style="padding:20px;display:none;">  
        tab1   
    </div>  
    <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">  
        tab2   
    </div>  
    <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">  
        tab3   
    </div>
</div>
 <div id="tab_menu" class="easyui-menu" style="width:150px;">  
        <div id="tab_menu-tabclose">关闭</div>  
     <div id="tab_menu-tabcloseall">关闭全部</div>  
       <div id="tab_menu-tabcloseother">关闭其他</div>  
        <div class="menu-sep"></div>  
       <div id="tab_menu-tabcloseright">关闭右侧标签</div>  
       <div id="tab_menu-tabcloseleft">关闭左侧标签</div>  
   </div>  


步骤二:编写js片段

/**
 * 绑定tab右键菜单事件
 */
function bindTabMenuEvent() {
 //关闭当前
 $('#tab_menu-tabclose').click(function() {
  var currtab_title = $('#tab_menu').data(&quot;currtab&quot;);
  if ($(this).next().is('.tabs-close')) {
   $('#mainTab').tabs('close', currtab_title);
  }
 });
 //全部关闭
 $('#tab_menu-tabcloseall').click(function() {
  $('.tabs-inner span').each(function(i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
    var t = $(n).text();
    $('#mainTab').tabs('close', t);
   }
  });
 });
 //关闭除当前之外的TAB
 $('#tab_menu-tabcloseother').click(function() {
  var currtab_title = $('#tab_menu').data(&quot;currtab&quot;);
  $('.tabs-inner span').each(function(i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
    var t = $(n).text();
    if (t != currtab_title)
     $('#mainTab').tabs('close', t);
   }
  });
 });
 //关闭当前右侧的TAB
 $('#tab_menu-tabcloseright').click(function() {
  var nextall = $('.tabs-selected').nextAll();
  if (nextall.length == 0) {
   alert('已经是最后一个了');
   return false;
  }
  nextall.each(function(i, n) {
   if ($('a.tabs-close', $(n)).length &gt; 0) {
    var t = $('a:eq(0) span', $(n)).text();
    $('#mainTab').tabs('close', t);
   }
  });
  return false;
 });
 //关闭当前左侧的TAB
 $('#tab_menu-tabcloseleft').click(function() {
  var prevall = $('.tabs-selected').prevAll();
  if (prevall.length == 1) {
   $.messager.alert('已经是第一个了');
   return false;
  }
  prevall.each(function(i, n) {
   if ($('a.tabs-close', $(n)).length &gt; 0) {
    var t = $('a:eq(0) span', $(n)).text();
    $('#mainTab').tabs('close', t);
   }
  });
  return false;
 });
}
  最后在需要的地方直接调用以上方法即可!


分享到:
评论

相关推荐

    EasyUI tabs添加右键关闭菜单

    在本主题“EasyUI tabs 添加右键关闭菜单”中,我们将探讨如何为 EasyUI 的 tabs 组件添加自定义的右键菜单,实现点击右键时出现一个包含“关闭当前标签页”选项的菜单。 首先,我们需要了解 EasyUI 的 tabs 组件的...

    easyui tabs 右键关闭菜单扩展插件

    非常好看的易用的easyui tabs 右键插件,自己两行代码就搞定

    Easyui添加Tab右键菜单

    在本示例中,我们将关注如何在EasyUI的Tab组件上添加右键菜单,实现包括刷新、关闭、全部关闭、关闭左侧和关闭右侧等操作。 首先,我们需要理解EasyUI的Tab组件。Tab组件是EasyUI中的一个核心组件,用于展示多个...

    easyui tabs 右键关闭

    在本主题中,我们将聚焦于“easyui tabs 右键关闭”这一功能,即如何在 EasyUI 的选项卡上实现类似浏览器的右键菜单,允许用户通过右键点击关闭当前选项卡。 首先,我们需要创建一个基本的 EasyUI 选项卡结构。这...

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

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

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

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

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

    根据给定的文件内容,以下是关于jQuery EasyUI右键菜单中关闭标签/选项卡的实例的知识点: 1. jQuery EasyUI是一个基于jQuery的前端框架,用于创建Web界面,它包括界面组件如数据网格、选项卡、对话框等。EasyUI的...

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

    这些`&lt;div&gt;`元素代表了右键菜单中的各个选项,如“关闭”、“全部关闭”等。`class="easyui-menu"`确保它们被jQuery-easyui识别为菜单项。 接下来,我们需要编写JavaScript代码来处理用户的交互。这包括监听双击...

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

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

    easyui-tabbar右击弹出菜单

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

    easyui+增强窗体 demo_ext为实例文件

    5、修复当tabs使用iframe时,右键菜单刷新报错问题。 6、增加combotree对简单数据格式和类标准数据格式的加载,具体参考jquery.easyui.tree.extend.js文件开头说明。 7、修复datagrid.onConfirmEdit事件默认实现bug...

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

    在本实例中,我们关注的是如何实现一个右键菜单,尤其是用于关闭标签页(选项卡)的功能。 首先,`noContextMenu.js` 文件的主要目的是屏蔽页面上的默认右键菜单。通过使用 `$(document).bind("contextmenu", ...

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

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

    jquery-easyui1.9.4中文参考手册.chm

    2. **组件介绍**:手册详细介绍了每个组件的用法,如`datagrid`(数据网格)用于展示和操作表格数据,`dialog`(对话框)用于弹出窗口,`menu`(菜单)用于创建下拉或右键菜单,`tabs`(选项卡)用于管理多个视图,`...

    jquery-easyui-1.3.2 demo

    5. **Menu**:菜单组件提供了丰富的菜单和子菜单功能,适用于构建导航栏或右键菜单。通过demo,你可以了解菜单的动态加载、展开/折叠、事件监听等特性。 6. **其他组件**:除以上组件外,EasyUI还包括了诸如...

    jQuery EasyUI 1.3 API 中文教程

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

    EasyUI入门教程--第01课_EasyUI简介.avi

    datagrid冻结列讲解,datagrid右键菜单讲解,forzenColumns与fitColumns的应用) 第12课(讲解datagrid的formatter的应用,格式化时间、行样式、列样式、表头居中,内容居右等应用)(formatter的提示功能,由于录制问题...

Global site tag (gtag.js) - Google Analytics