为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;
  });
}

时间: 2024-08-09 18:09:51

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

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

在网上看了很多demo 自己实现了一个效果如下 ps jquery1.7.2 jQuery EasyUI 1.3.6easyui QQ群:15129679 <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>tabs 右键菜单demo QQ:15129

EasyUI 的Tab 标签添加右键菜单

样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href="/smile/" /> <title>标签右键菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

仅在TabControl中的Tab中添加右键菜单

若想实现仅在TabControl中的Tab中添加右键菜单,可在XAML中通过使用样式得到: <TabControl> <TabControl.ItemContainerStyle> <Style TargetType="{x:Type TabItem}"> <Setter Property="ContextMenu"> <Setter.Value> <ContextMenu/> <!--

使用easyui为tab页增加右键菜单

在使用easyui进行上左右布局一文中,我们已经使用easyui搭建起了一个简单的上左右布局.在使用的过程中,我们经常会遇到tab页打开的太多,但只能一个一个的关闭的烦恼,这个时候有没有想到eclipse中tab右键菜单的关闭其他和关闭所有选项呢? 下面我们就来使用easyui来实现tab页的关闭其他和关闭所有的功能. 1.在上一篇文章的html结构中添加入menu的结构 <body> <div id="home-layout"> <!-- 以前的code

jQuery EasyUI 为Combo,Combobox添加清除值功能

效果图: 图标 (function($){          //初始化清除按钮     function initClear(target){         var jq = $(target);         var opts = jq.data('combo').options;         var combo = jq.data('combo').combo;         var arrow = combo.find('span.combo-arrow');         

给jquery easy-ui 添加右键菜单

版权声明:转自为EasyUI 的Tab 标签添加右键菜单 1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <title>tabs 右键菜单demo QQ:15129679</title> 6 <link rel="

添加右键菜单

有时我们安装绿色版的软件常常是没有右键菜单的,但是对于一些常用的软件,我们需要添加右键菜单,添加方法,打开记事本,复制以下内容,按照自己的需要修改下所在软件的路径将txt另存为bat格式,双击即可: Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\PotPlayer] @="Open with PotPlayer" "Icon"="E:\\Program Files (x86)

Arcengine 二次开发添加右键菜单

最近在搞arcengine 二次开发,遇到了好多问题,也通过网上查资料试着慢慢解决了,把解决的步骤记录下来,有需要帮助的可以看一下,也欢迎各位来批评指正. 想给自己的map application在图层上添加右键菜单,谷歌了一下,找到了解决的方法,原文的地址edndoc.esri.com/arcobjects/9.2/NET/1ED14BF2-A0E3-4e56-A70D-B9A7F7EC7880.htm.然后我根据这个添加了自己的右键菜单,又有一些改动. 效果如图所示(有点简陋),仅仅是简单的

添加右键菜单命令 在此处打开命令窗口(W)(带图标)

@color 0A @title 添加右键菜单命令 在此处打开命令窗口(W)(带图标) by wjshan0808 @echo off reg add HKCR\Directory\Background\shell\在此处打开命令窗口(W) /v Icon /t reg_expand_sz /d %ComSpec% /f reg add HKCR\Directory\Background\shell\在此处打开命令窗口(W)\command /ve /t reg_sz /d "%ComSpec%