爲EasyUI 的Tab 標籤添加右鍵菜單

時間 2019-11-06

標籤 easyui tab 標籤添加右鍵菜單简体版

原文原文鏈接

在網上看了不少demo 本身實現了一個效果以下 ps jquery1.7.2 jQuery EasyUI 1.3.6 easyui QQ羣：15129679javascript

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>tabs 右鍵菜單demo QQ：15129679</title>
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="static/js/zTree/zTreeStyle/zTreeStyle.css" />
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/js/zTree/jquery.ztree.min.js"></script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height: 60px; padding: 10px">
        tabs 右鍵菜單demo QQ：15129679</div>
    <div data-options="region:'west',split:true,title:'操做菜單'" style="width: 150px; padding: 10px;">
        <ul id="webMenu_list" class="ztree" style="display: ;">
        </ul>
    </div>
    <div data-options="region:'center',title:'',border:false">
        <div id="tt" class="easyui-tabs" data-options="fit:true">
            <div title="首頁" style="padding: 20px;">
                <h3>
                    歡迎您來到網站信息管理系統<br>
                    個人博客地址:http://www.cnblogs.com/yeminglong/p/3745914.html
                    
                    </h3>
            </div>
        </div>
    </div>
    <div id="mm" class="easyui-menu" style="width:120px;">
         <div id="mm-tabclose" data-options="name:1">關閉</div>
        <div id="mm-tabcloseall" data-options="name:2">所有關閉</div>
        <div id="mm-tabcloseother" data-options="name:3">除此以外所有關閉</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright" data-options="name:4">當前頁右側所有關閉</div>
        <div id="mm-tabcloseleft" data-options="name:5">當前頁左側所有關閉</div>

    </div>
    <script type="text/javascript">
    
    
        //添加Tabs
        function addTabs(event, treeId, treeNode, clickFlag){
            if(!$("#tt").tabs('exists', treeNode.name)){
                $('#tt').tabs('add',{
                    id:treeId,
                    title: treeNode.name,
                    selected: true,
                    href:treeNode.dataurl,
                    closable:true
                });
            }else $('#tt').tabs('select',treeNode.name);
        }
        
        //刪除Tabs
        function closeTab(menu, type){
            var allTabs = $("#tt").tabs('tabs');
            var allTabtitle = [];
            $.each(allTabs,function(i,n){
                var opt=$(n).panel('options');
                if(opt.closable)
                    allTabtitle.push(opt.title);
            });

            switch (type){
                case 1 :
                    var curTabTitle = $(menu).data("tabTitle");
                    $("#tt").tabs("close", curTabTitle);
                    return false;
                break;
                case 2 :
                    for(var i=0;i<allTabtitle.length;i++){
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                break;
                case 3 :
            
                break;
                case 4 :
            
                break;
                case 5 :
            
                break;
            }
            
        }
        
        
        $(document).ready(function () {
            //監聽右鍵事件，建立右鍵菜單
            $('#tt').tabs({
                onContextMenu:function(e, title,index){
                    e.preventDefault();
                    if(index>0){
                        $('#mm').menu('show', {
                            left: e.pageX,
                            top: e.pageY
                        }).data("tabTitle", title);
                    }
                }
            });
            //右鍵菜單click
            $("#mm").menu({
                onClick : function (item) {
                    closeTab(this, item.name);
                }
            });
            //treeNodes
            var zNodes = [
                { id:1, pId:0, name:"操做菜單", open:true,url:"",click:false},
                { id: 11, pId: 1, name: "楊凌現代農業科技創業網", dataurl: "02.html", target: "_self" },
                { id: 12, pId: 1, name: "楊凌外貿農產品質量溯源公共服務平臺", dataurl: "02.html", target: "_self" },
                { id: 13, pId: 1, name: "華縣農產品標準化生產溯源管理系統華縣農產品標準化生產溯源管理系統", dataurl: "02.html", target: "_self" },
                { id: 14, pId: 1, name: "楊陵區科技局", dataurl: "02.html", target: "_self" },
                { id: 15, pId: 1, name: "楊陵區農民專業合做社聯合會", dataurl: "02.html", target: "_self" },
                { id: 16, pId: 1, name: "楊凌農產品標準化生產溯源管理系統", dataurl: "02.html", target: "_self" },
                { id: 17, pId: 1, name: "站點列表", dataurl: "02.html", target: "_self" },
                { id: 18, pId: 1, name: "站點列表", dataurl: "02.html", target: "_self" }
            ];
        
            var setting = {
                view: {
                    selectedMulti: false
                },
                callback: {
                    onClick: addTabs
                }
            };

            $.fn.zTree.init($("#webMenu_list"), setting,zNodes);
            
        });
    </script>
</body>
</html>

2014-205-26完善menu剩下的功能修改 closeTab function 以下php

        //刪除Tabs
        function closeTab(menu, type) {
            var allTabs = $("#tt").tabs('tabs');
            var allTabtitle = [];
            $.each(allTabs, function (i, n) {
                var opt = $(n).panel('options');
                if (opt.closable)
                    allTabtitle.push(opt.title);
            });
            var curTabTitle = $(menu).data("tabTitle");
            var curTabIndex = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle));
            switch (type) {
                case 1:
                    $("#tt").tabs("close", curTabIndex);
                    return false;
                    break;
                case 2:
                    for (var i = 0; i < allTabtitle.length; i++) {
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                    break;
                case 3:
                    for (var i = 0; i < allTabtitle.length; i++) {
                        if (curTabTitle != allTabtitle[i])
                            $('#tt').tabs('close', allTabtitle[i]);
                    }
                    $('#tt').tabs('select', curTabTitle);
                    break;
                case 4:
                    for (var i = curTabIndex; i < allTabtitle.length; i++) {
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                    $('#tt').tabs('select', curTabTitle);
                    break;
                case 5:
                    for (var i = 0; i < curTabIndex-1; i++) {
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                    $('#tt').tabs('select', curTabTitle);
                    break;
            }

        }

添加一個刷新css

 <div id="mm" class="easyui-menu" style="width: 120px;">
        <div id="mm-tabclose" name="6">
            刷新</div>
        <div id="Div1" name="1">
            關閉</div>
        <div id="mm-tabcloseall" name="2">
            所有關閉</div>
        <div id="mm-tabcloseother" name="3">
            除此以外所有關閉</div>
        <div class="menu-sep">
        </div>
        <div id="mm-tabcloseright" name="4">
            當前頁右側所有關閉</div>
        <div id="mm-tabcloseleft" name="5">
            當前頁左側所有關閉</div>
    </div>

  //刪除Tabs
        function closeTab(menu, type) {
            var allTabs = $("#tt").tabs('tabs');
            var allTabtitle = [];
            $.each(allTabs, function (i, n) {
                var opt = $(n).panel('options');
                if (opt.closable)
                    allTabtitle.push(opt.title);
            });
            var curTabTitle = $(menu).data("tabTitle");
            var curTabIndex = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle));
            switch (type) {
                case 1://關閉當前
                    $("#tt").tabs("close", cutTabIndex);
                    return false;
                    break;
                case 2://所有關閉
                    for (var i = 0; i < allTabtitle.length; i++) {
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                    break;
                case 3://除此以外所有關閉
                    for (var i = 0; i < allTabtitle.length; i++) {
                        if (curTabTitle != allTabtitle[i])
                            $('#tt').tabs('close', allTabtitle[i]);
                    }
                    $('#tt').tabs('select', curTabTitle);
                    break;
                case 4://當前側面右邊
                    for (var i = curTabIndex; i < allTabtitle.length; i++) {
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                    $('#tt').tabs('select', curTabTitle);
                    break;
                case 5: //當前側面左邊
                    for (var i = 0; i < curTabIndex - 1; i++) {
                        $('#tt').tabs('close', allTabtitle[i]);
                    }
                    $('#tt').tabs('select', curTabTitle);
                    break;
                case 6: //刷新
                    var panel = $("#tt").tabs("getTab", curTabTitle).panel("refresh");
                    break;
            }

        }

demo下載html

若是這篇文章對您有幫助，您能夠打賞我java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。