EasyUI之tab标签显示页面内容

最新推荐文章于 2023-04-16 10:08:28 发布

RED-GO

最新推荐文章于 2023-04-16 10:08:28 发布

阅读量5.3k

点赞数 1

分类专栏： --------【EasyUI】文章标签： EasyUI Tab标签 Accordion JQuery

本文链接：https://blog.csdn.net/u010137431/article/details/46573153

版权

--------【EasyUI】专栏收录该内容

6 篇文章 0 订阅

订阅专栏

概述

在EasyUI的Layout布局中，一般有5个区域划分，即north, west, center, east, south这五块
其中，一般情况下，West区域用来放Accordion分类组件，Center区域用来显示页面内容，各司其能
怎么实现这个功能呢，请下面看；

Jsp

java
<body class="easyui-layout">   
    <!-- EasyUI的north区 -->
    <div data-options="region:'north',border:false"
            style="height:60px;background:#B3DFDA;padding:10px"></div>

    <!-- EasyUI的west区 -->
    <div data-options="region:'west',title:'west',split:true,collapsible:false" style="width:180px;">
        <div class="easyui-accordion" style="width:100%;height:100%;">
            <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
                <p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/view/Test/Upload.jsp" class="cs-navi-tab">窗口一</a></p>
                <p><a href="javascript:void(0);" src="${pageContext.request.contextPath}/view/Test/Upload2.jsp" class="cs-navi-tab">窗口二</a></p>
            </div>
        </div>
    </div>

    <!-- EasyUI的center区 --> 
    <div data-options="region:'center'"  >
        <!-- tab区 -->
        <div id="tabs" class="easyui-tabs" data-options="fit:true,border:false">   
            <div title="Home" >   
                <div>首页</div>
            </div>   
        </div>  
    </div>

    <!-- menu菜单 -->
    <div id="mm" class="easyui-menu cs-tab-menu">
        <div id="mm-tabupdate">刷新</div>
        <div class="menu-sep"></div>
        <div id="mm-tabclose">关闭</div>
        <div id="mm-tabcloseother">关闭其他</div>
        <div id="mm-tabcloseall">关闭全部</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright">关闭右侧</div>
    </div>
</body>

Js

这部分代码就是Accordion和tab组件的桥梁，是我的同学给我的，加以分析后，勉强能看懂，^_^谢谢他的分享

java
$(function() {   
    tabCloseEven();  //menu菜单功能实现
    $('.cs-navi-tab').click(function() {
        var $this = $(this);
        var href = $this.attr('src');
        var title = $this.text();
        addTab(title, href);   //增加tab
    });
});

function addTab(title, url){
    if ($('#tabs').tabs('exists', title)){
        $('#tabs').tabs('select', title);//选中tab并显示
        var currTab = $('#tabs').tabs('getSelected');
        var url = $(currTab.panel('options').content).attr('src');
        if(url != undefined && currTab.panel('options').title != 'Home') {
            $('#tabs').tabs('update',{  //刷新这个tab
                tab:currTab,
                options:{
                    content:createFrame(url)
                }
            })
        }
    } else {
        var content = createFrame(url);
        $('#tabs').tabs('add',{
            title:title,
            content:content,
            closable:true
        });
    }
    tabClose(); //绑定menu菜单
}
function createFrame(url) {
    var s = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
    return s;
}

function tabClose() {
    /*双击关闭TAB选项卡*/
    $(".tabs-inner").dblclick(function(){ //jQuery双击方法
        var subtitle = $(this).text();
        $('#tabs').tabs('close',subtitle);
    })
    /*为选项卡绑定右键*/
    $(".tabs-inner").bind('contextmenu',function(e){ //e这个参数对象封装鼠标坐标值
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY
        });

        var subtitle =$(this).text();

        $('#mm').data("currtab",subtitle); //jQuery方法，向被选元素附加数据
        $('#tabs').tabs('select',subtitle);
        return false;
    });
}       

function tabCloseEven() {
    //刷新
    $('#mm-tabupdate').click(function(){
        var currTab = $('#tabs').tabs('getSelected');
        var url = $(currTab.panel('options').content).attr('src');
        if(url != undefined && currTab.panel('options').title != 'Home') {
            $('#tabs').tabs('update',{
                tab:currTab,
                options:{
                    content:createFrame(url)
                }
            })
        }
    })
    //关闭当前
    $('#mm-tabclose').click(function(){
        var currtab_title = $('#mm').data("currtab");
        $('#tabs').tabs('close',currtab_title);
    })
    //全部关闭
    $('#mm-tabcloseall').click(function(){
        $('.tabs-inner span').each(function(i,n){  //i是循环index位置，n相当于this
            var t = $(n).text();
            if(t != 'Home') {
                $('#tabs').tabs('close',t);
            }
        });
    });
    //关闭除当前之外的TAB
    $('#mm-tabcloseother').click(function(){
        var prevall = $('.tabs-selected').prevAll(); //jQuery遍历方法，prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素
        var nextall = $('.tabs-selected').nextAll();       
        if(prevall.length>0){
            prevall.each(function(i,n){  //i是当前循环次数
                var t=$(n).text();
                if(t != 'Home') {
                    $('#tabs').tabs('close',t);
                }
            });
        }
        if(nextall.length>0) {
            nextall.each(function(i,n){
                var t=$(n).text();
                if(t != 'Home') {
                    $('#tabs').tabs('close',t);
                }
            });
        }
        return false;
    });
    //关闭当前右侧的TAB
    $('#mm-tabcloseright').click(function(){
        var nextall = $('.tabs-selected').nextAll();
        if(nextall.length==0){
            alert('后边没有啦~~');
            return false;
        }
        nextall.each(function(i,n){
            var t=$(n).text();
            $('#tabs').tabs('close',t);
        });
        return false;
    });
    //关闭当前左侧的TAB
    $('#mm-tabcloseleft').click(function(){
        var prevall = $('.tabs-selected').prevAll();
        if(prevall.length==0){
            alert('到头了，前边没有啦~~');
            return false;
        }
        prevall.each(function(i,n){
            var t=$(n).text();
            $('#tabs').tabs('close',t);
        });
        return false;
    });

    //退出
    $("#mm-exit").click(function(){
        $('#mm').menu('hide');  //隐藏menu菜单
    })
}