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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類