EasyUi之Tabs(选项卡)以及关闭选项卡

筱筱脱脱

已于 2023-04-16 10:09:07 修改

阅读量1k

点赞数

分类专栏： EasyUI jquery 文章标签： easyui 前端 javascript tabs 选项卡

于 2023-04-16 10:08:28 首次发布

本文链接：https://blog.csdn.net/u012949335/article/details/130179426

版权

jquery 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

EasyUI

10 篇文章 0 订阅

订阅专栏

这篇文章展示了如何使用EasyUI库创建选项卡并集成右键菜单功能，包括关闭全部、关闭其他、关闭右侧和左侧标签页的选项。同时，文章还涵盖了动态添加新选项卡和刷新标签页的内容，主要通过jQuery进行操作。

摘要由CSDN通过智能技术生成

1、添加选项卡。

<div id="tabs_xxkttinfoxx" class="easyui-tabs" fit="true" border="false" >   
                <div title="首页"><iframe id="mainFrame" name="mainFrame" frameborder="0" scrolling="auto"  src="xxx"  style="width:100%;height:100%;"></iframe></div> 
            </div>


  <div id="mmtabs_xxkmenu" class="easyui-menu" style="display:none;">  
                    <div id="mmtabs_xxkmenu_closeall">关闭全部</div>  
                    <div id="mmtabs_xxkmenu_closeother">关闭其他</div> 
                    <div id="mmtabs_xxkmenu_closeright">当前页右侧全部关闭</div>
                    <div id="mmtabs_xxkmenu_closeleft">当前页左侧全部关闭</div> 
                  </div>

$(document).ready(function () {
            GetBindMenxxInfoxx();
            $('#tabs_xxkttinfoxx').tabs({
                onSelect: function (title, index) {
                    frameload();
                }
            });
        });

        function GetBindMenxxInfoxx() {
            //绑定右键菜单事件
            $(".easyui-tabs").bind('contextmenu', function (e) {
                e.preventDefault();
                $('#mmtabs_xxkmenu').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            });
            //关闭所有标签页  
            $("#mmtabs_xxkmenu_closeall").bind("click", function () {
                $('#tabs_xxkttinfoxx').tabs('closeAllTabs');
            });
            //关闭其他页面
            $("#mmtabs_xxkmenu_closeother").bind("click", function () {
                $('#tabs_xxkttinfoxx').tabs('closeOtherTabs');
            });
            //关闭右边的选项卡
            $("#mmtabs_xxkmenu_closeright").bind("click", function () {
                $('#tabs_xxkttinfoxx').tabs('closeRightTabs');
            });
            //关闭左边的选项卡
            $("#mmtabs_xxkmenu_closeleft").bind("click", function () {
                $('#tabs_xxkttinfoxx').tabs('closeLeftTabs');
            });
        }

/**
* 扩展tabs组件
*/
$.extend($.fn.tabs.methods, {
    closeCurrentTabs: function (jq) {
        var tab = $(jq).tabs('getSelected');
        var index = $(jq).tabs('getTabIndex', tab);
        $(jq).tabs('close', index);
    },
    closeAllTabs: function (jq) {
        var tablist = $(jq).tabs('tabs');
        for (var i = tablist.length - 1; i >= 1; i--) {
            $(jq).tabs('close', i);
        }
    },
    closeOtherTabs: function (jq) {
        var tablist = $(jq).tabs('tabs');
        var tab = $(jq).tabs('getSelected');
        var index = $(jq).tabs('getTabIndex', tab);
        for (var i = tablist.length - 1; i > index; i--) {
            $(jq).tabs('close', i);
        }
        var num = index - 1;
        if (num < 1) {
            return;
        } else {
            for (var i = num; i >= 1; i--) {
                $(jq).tabs('close', i);
            }
            $(jq).tabs("select", 1);
        }
    },
    closeLeftTabs: function (jq) {
        var tablist = $(jq).tabs('tabs');
        var tab = $(jq).tabs('getSelected');
        var index = $(jq).tabs('getTabIndex', tab);
        var num = index - 1;
        if (num < 1) {
            return;
        } else {
            for (var i = num; i >= 1; i--) {
                $(jq).tabs('close', i);
            }
            $(jq).tabs("select", 1);
        }
    },
    closeRightTabs: function (jq) {
        var tablist = $(jq).tabs('tabs');
        var tab = $(jq).tabs('getSelected');
        var index = $(jq).tabs('getTabIndex', tab);
        for (var i = tablist.length - 1; i > index; i--) {
            $(jq).tabs('close', i);
        }
    }
});

2、点击菜单加载新选项卡。

 function GetAddTabXxkInfoxx(title, url) {
            var tab = $('#tabs_xxkttinfoxx').tabs('exists', title);
            if (tab) {
                $('#tabs_xxkttinfoxx').tabs('select', title);
                //getRefreshTab("#tabs_xxkttinfoxx");
            } else {
                $('#tabs_xxkttinfoxx').tabs('add', {
                    title: title,
                    content: "<iframe width='100%' height='100%' frameborder='0' scrolling='auto'  src='" + url + "'></iframe>",
                    closable: true,
                    framesrcxx: url
                });
            }
        }


//刷新当前标签Tabs
        function getRefreshTab(tabsid) {
            var currentTab = $(tabsid).tabs('getSelected');
            var url = $(currentTab.panel('options')).attr('href');
            $(tabsid).tabs('update', {
                tab: currentTab,
                options: {
                    href: url
                }
            });
            currentTab.panel('refresh');
        }