jQuery EasyUI 右鍵菜單--關閉標簽/選項卡

来源:http://www.cnblogs.com/zhuwenqi2016/archive/2016/10/09/5944198.html
-Advertisement-
Play Games

目錄結構： 效果圖： 方式 一： 方式 二： ...


目錄結構：

noContextMenu.js 文件內容如下： 
$(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右鍵菜單-關閉標簽方式一</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

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

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

         //生成右鍵菜單 
         $('#tt').tabs({
             onContextMenu: function(e, title, index){
                //選中標簽
                $('#tt').tabs('select',index);
                //顯示右鍵菜單
                $('#mm').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                }) ;
             }
          });
          
          //為每個菜單綁定點擊事件
          //關閉選中的標簽
          $("#closeCurrent").click(function(){
              //獲取選中的標簽索引
             var tab = $('#tt').tabs('getSelected');
             var index = $('#tt').tabs('getTabIndex',tab);
             $("#tt").tabs("close",index);
          });
          //關閉選中標簽之外的標簽
          $("#closeOthers").click(function(){
              //獲取所有標簽
             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);
             }
          });
          //關閉所有標簽
          $("#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'">關閉當前</div>
        <div id="closeOthers" name="closeOthers" data-options="iconCls:'icon-no'">關閉其它</div>
        <div id="closeAll" name="closeAll" data-options="iconCls:'icon-cancel'">關閉所有</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右鍵菜單-關閉標簽方式二</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/jquery-easyui-1.3.5/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-migrate-1.2.1.min.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/js/noContextMenu.js"></script> --%>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<script type="text/javascript">
    $(function() {
        //生成tab標簽
        $('#tt').tabs({
            border : true,
            /* onSelect : function(title) {
                alert(title + ' is selected');
            } */
        });
        
        //生成右鍵菜單 
         $('#tt').tabs({
             onContextMenu: function(e, title, index){
                 //讓預設事件失效
                 e.preventDefault() ;
                 //選中標簽
                 //$('#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);
                     }
                });
             }
          });
          
    });
    
    //關閉標簽的方法
    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>
</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-cancel'">關閉所有</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>

 

 

　　　　　　

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • padding/border與width的關係
    本文講述 padding / border 的設置後是否對 width 有影響，width 等於 auto 與 100% 的區別 CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。 概述 那麼 css 屬性中width = ？呢 在標準的w3c的規定 ...
  • npm scripts 助力前端開發，實時刷新瀏覽器
    用 或者 來監控文件的改變，當文件改變時，就自動刷新瀏覽器。 用 來實時編譯scss文件。 用 來非同步執行npm script命令。 先安裝上述的node工具 npm install browser sync 一、首先新建npm的 一般有如下的結構和選項 { "name": "about", "ve ...
  • nodejs配置簡單HTTP伺服器
    1.介紹 http-server 是一個簡單的零配置命令行HTTP伺服器, 基於 nodeJs. 如果你不想重覆的寫 nodeJs 的 web-server.js, 則可以使用這個. 2.安裝 安裝成功如下： 3.使用 在站點目錄下開啟命令行輸入 http-server 運行結果如圖： 在瀏覽器輸入 ...
  • zTree+EasyUi做許可權遇到的小問題
    最近需要做一個zTree+EasyUi的許可權管理系統，以前有過接觸，在做這一塊時，用到了ztree，樹來載入咱們的菜單欄，後臺獲取登錄用戶信息的許可權列表，轉換成json對象來載入到咱們的樹當中，代碼如下： 你會發現人家早就想到了這一點，來實現這個效果，那麼， 我們就可以運用到自己的ztree當中了， ...
  • [deviceone開發]-課程表的例子
    一、簡介 這個例子是根據一個真實app的一個頁面的需求來實現的demo，通過動態add ui的方式，動態bind數據構建一個完整的課程表示例。示例並不完善，但是可以給大家一個啟發。 二、效果圖 三、相關下載 https://github.com/do-project/code4do/tree/mas ...
  • JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
    JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY ...
  • 使用CSS3製作導航條和毛玻璃效果
    導航條對於每一個Web前端攻城獅來說並不陌生，但是毛玻璃可能會相對陌生一些。簡單的說，毛玻璃其實就是讓圖片或者背景使用相應的方法進行模糊處理。這種效果對用戶來說是十分具有視覺衝擊力的。 本次分享的主題：通過CSS3來製作類似下麵的導航條和毛玻璃效果。 導航條是梯形形狀的。 背景區域的毛玻璃效果。 把 ...
  • 再談JavaScript閉包及應用
    寫在前面 本文章版權歸博客園和作者共同所有，轉載請註明原文地址博客園吳雙 http://www.cnblogs.com/tdws/ 閉包真的是學過一遍又一遍，Js博大精深，每次學習都感覺有新的收穫。相信在大家封裝前端插件時，閉包是必不可少的。閉包的真正好處我個人認為除了封裝還是封裝，能帶個我們私有方 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類