easyUI-右键菜单,关闭选项卡

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>easyui右键菜单-关闭标签</title>

<!--使用easyUI前端框架,需要引入easyUI的js,css-->

<!-- JavaScript插件引入 -->
<script type="text/javascript" src="scripts/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/easyui-1.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="scripts/easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<!-- CSS样式引入 -->
<link rel="stylesheet" type="text/css" href="scripts/easyui-1.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="scripts/easyui-1.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="scripts/easyui-1.5/demo/demo.css"> <!--关闭选项卡的js-->
    

<script type="text/javascript">
$(function() {
  //生成右键菜单
  $('#tt').tabs({
    onContextMenu: function(e, title, index){
    //让默认事件失效
    e.preventDefault() ;
    //选中标签
  $('#tt').tabs('select',index);
  //显示右键菜单
  $('#mm').menu('show', {
    left: e.pageX,
    top: e.pageY
  });
  $("#mm").menu({
    onClick : function (item) {
    closeTab(this, item.name);
    }
  });
  }
});
});

//关闭标签的方法
var closeTab = function(type,menuName){
if(menuName == "closeCurrent"){
  //获取选中的标签索引
  var tab = $('#tt').tabs('getSelected');
  var index = $('#tt').tabs('getTabIndex',tab);
$("#tt").tabs("close",index);
}else if(menuName == "closeOthers"){
  //获取所有标签
  var tabs = $("#tt").tabs("tabs");
  var length = tabs.length;
  //获取选中标签的索引
  var tab = $('#tt').tabs('getSelected');
  var index = $('#tt').tabs('getTabIndex',tab);
  //关闭选中标签之前的标签
for(var i=0;i<index;i++){
$("#tt").tabs("close",0);
}
  //关闭选中标签之后的标签
for(var i=0;i<length-index-1;i++){
  $("#tt").tabs("close",1);
}
}else if(menuName == "closeAll"){
  var tabs = $("#tt").tabs("tabs");
  var length = tabs.length;
  for(var i=0;i<length;i++){
$("#tt").tabs("close",0);
  }
  }
} ;

</script>

<!--关闭选项卡的js end-->

</head>
<body>
  

<!-- menu关闭 -->
<div id="mm" class="easyui-menu" style="width:120px;">
<div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">关闭当前</div>
<div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">关闭其它</div>
<div id="closeAll" name="closeAll" data-options="iconCls:'icon-no'">关闭所有</div>
</div>

<!-- tabs选项卡 -->
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab1</div>
<div title="Tab2" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab2</div>
<div title="Tab3" data-options="closable:true" style="overflow:hidden;padding:20px;display:none;">tab3</div>
</div>

</body>

</html>

效果图如下:

    easyUI-右键菜单,关闭选项卡

上一篇:腾讯地图key秘钥


下一篇:C#—Dev XtraTabControl操作总结如动态增加Tab和关闭选项卡方法等