日本一区二区三区视频在线播放,久久99精品国产.久久久久,国产一区二区在线看

導(dǎo)航首頁 ? 技術(shù)教程 ? jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡

全站頭部文字我要出現(xiàn)在這里

jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡 792 2024-02-16

本文實(shí)例為大家分享了jQuery EasyUI右鍵菜單可以選擇關(guān)閉標(biāo)簽/選項(xiàng)卡操作，供大家參考，具體內(nèi)容如下

目錄結(jié)構(gòu)：

查看圖片

noContextMenu.js 文件內(nèi)容如下：

$(function(){
 //屏蔽右鍵菜單
 $(document).bind("contextmenu", function(e){ return false; });
});

效果圖：

查看圖片

方式一：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>easyui右鍵菜單-關(guān)閉標(biāo)簽方式一</title>
<link type="text/css" rel="stylesheet" href="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/js/noContextMenu.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript">
 $(function() {

  //生成tab標(biāo)簽
  $('#tt').tabs({
   border : true,
   /* onSelect : function(title) {
    alert(title + ' is selected');
   } */
  });

   //生成右鍵菜單 
   $('#tt').tabs({
    onContextMenu: function(e, title, index){
    //選中標(biāo)簽
    $('#tt').tabs('select',index);
    //顯示右鍵菜單
    $('#mm').menu('show', {
     left: e.pageX,
     top: e.pageY
    }) ;
    }
   });
   
   //為每個(gè)菜單綁定點(diǎn)擊事件
   //關(guān)閉選中的標(biāo)簽
   $("#closeCurrent").click(function(){
    //獲取選中的標(biāo)簽索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    $("#tt").tabs("close",index);
   });
   //關(guān)閉選中標(biāo)簽之外的標(biāo)簽
   $("#closeOthers").click(function(){
    //獲取所有標(biāo)簽
    var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    //獲取選中標(biāo)簽的索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    //關(guān)閉選中標(biāo)簽之前的標(biāo)簽
    for(var i=0;i<index;i++){
    $("#tt").tabs("close",0);
    }
    //關(guān)閉選中標(biāo)簽之后的標(biāo)簽
    for(var i=0;i<length-index-1;i++){
     $("#tt").tabs("close",1);
    }
   });
   //關(guān)閉所有標(biāo)簽
   $("#closeAll").click(function(){
    var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    for(var i=0;i<length;i++){
     $("#tt").tabs("close",0);
    }
   });
  
 });
 
</script>
</head>

<body>
 < menu -->
 <div id="mm" class="easyui-menu" style="width:120px;">
  <div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">關(guān)閉當(dāng)前</div>
  <div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">關(guān)閉其它</div>
  <div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">關(guān)閉所有</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>

方式二：　　　　

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>easyui右鍵菜單-關(guān)閉標(biāo)簽方式二</title>
<link type="text/css" rel="stylesheet" href="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<%-- <script type="text/javascript" src="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/js/noContextMenu.js"></script> --%>
<script type="text/javascript" src="http://www.gimoo.net/t/1812/${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript">
 $(function() {
  //生成tab標(biāo)簽
  $('#tt').tabs({
   border : true,
   /* onSelect : function(title) {
    alert(title + ' is selected');
   } */
  });
  
  //生成右鍵菜單 
   $('#tt').tabs({
    onContextMenu: function(e, title, index){
     //讓默認(rèn)事件失效
     e.preventDefault() ;
     //選中標(biāo)簽
     //$('#tt').tabs('select',title);
     $('#tt').tabs('select',index);
     //顯示右鍵菜單
    $('#mm').menu('show', {
     left: e.pageX,
     top: e.pageY
    });
    $("#mm").menu({
      onClick : function (item) {
       /* alert(item.name);
       alert(typeof this) ; */
      closeTab(this, item.name);
      }
    });
    }
   });
   
 });
 
 //關(guān)閉標(biāo)簽的方法
 var closeTab = function(type,menuName){
  if(menuName == "closeCurrent"){
   //獲取選中的標(biāo)簽索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    $("#tt").tabs("close",index);
  }else if(menuName == "closeOthers"){
   //獲取所有標(biāo)簽
    var tabs = $("#tt").tabs("tabs");
    var length = tabs.length;
    //獲取選中標(biāo)簽的索引
    var tab = $('#tt').tabs('getSelected');
    var index = $('#tt').tabs('getTabIndex',tab);
    //關(guān)閉選中標(biāo)簽之前的標(biāo)簽
    for(var i=0;i<index;i++){
    $("#tt").tabs("close",0);
    }
    //關(guān)閉選中標(biāo)簽之后的標(biāo)簽
    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>
</head>

<body>
 < menu -->
 <div id="mm" class="easyui-menu" style="width:120px;">
  <div id="closeCurrent" name="closeCurrent" data-options="iconCls:'icon-no'">關(guān)閉當(dāng)前</div>
  <div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">關(guān)閉其它</div>
  <div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">關(guān)閉所有</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>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持綠夏網(wǎng)。

UI

#免責(zé)聲明#

本站[綠夏技術(shù)導(dǎo)航]提供的一切軟件、教程和內(nèi)容信息僅限用于學(xué)習(xí)和研究目的；不得將上述內(nèi)容用于商業(yè)或者非法用途，否則，一切后果請(qǐng)用戶自負(fù)。本站信息來自網(wǎng)絡(luò)收集整理，版權(quán)爭議與本站無關(guān)。您必須在下載后的24個(gè)小時(shí)之內(nèi)，從您的電腦或手機(jī)中徹底刪除上述內(nèi)容。如果您喜歡該程序或內(nèi)容，請(qǐng)支持正版，購買注冊(cè)，得到更好的正版服務(wù)。我們非常重視版權(quán)問題，如有侵權(quán)請(qǐng)郵件[admin@lxwl520.com]與我們聯(lián)系進(jìn)行刪除處理。敬請(qǐng)諒解！

文章分類