EasyUI之tab标签显示页面内容

来源：互联网发布：网络教育考公务员编辑：程序博客网时间：2024/05/17 07:11

概述

在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菜单    })}

1 0