EasyUI之tab标签显示页面内容

概述

在EasyUI的Layout布局中,一般有5个区域划分,即north, west, center, east, south这五块EasyUI之tab标签显示页面内容_第1张图片
其中,一般情况下,West区域用来放Accordion分类组件,Center区域用来显示页面内容,EasyUI之tab标签显示页面内容_第2张图片
怎么实现这个功能呢,请下面看;

Jsp

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

    
    <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>

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

    
    <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 = '';
    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菜单
    })
}

你可能感兴趣的:(EasyUI,Tab标签,Accordion,JQuery)