使用easyui增加切换子视图

要实现的效果如下图，左边为菜单选项，点击左边选项，右边出现对应子视图，如果没有该子视图就增加并显示，如果有，则不增加而是选择到有了的那个视图

                                       

首先，我使用的是easyui(导入easyui就略过不说了)，把easyui参考手册中的layout(布局)中的代码拷贝到你的jsp中

1. <div id="cc" class="easyui-layout" style="width:600px;height:400px;">  
2.     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>  
3.     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>  
4.     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>  
5.     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>  
6.     <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
7. </div>

上面这段代码 的效果在参考手册中有实现效果，data-options="region:'north',  这里的north代表的是北，也就是上，就是最上面的那层div

south是下，east东，west西，center中间

这里我是把west这行div作为菜单选项，我的工单选项卡就在west中，然后子视图放在center里，（east我就删掉了）

<div data-options="region:'west',title:'欢迎 ,${user.userNickname}',split:true"style="width:250px;height: 100%"><div id="aa" class="easyui-accordion"style="width:300px;height:100%;"><div title="我的工单" data-options="iconCls:'icon-save'"style="overflow:auto;padding:10px;"><a class="easyui-linkbutton" onclick="addTab('工单录入','resources/jsp/add.jsp')">工单录入</a><br><a class="easyui-linkbutton" onclick="addTab('待处理工单','resources/jsp/suspence.jsp')">待处理工单</a><br><a class="easyui-linkbutton" onclick="addTab('已关闭工单','resources/jsp/close.jsp')">已关闭工单</a><br><a class="easyui-linkbutton" onclick="addTab('审核中工单','resources/jsp/reviewing.jsp')">审核中工单</a><br><a class="easyui-linkbutton" onclick="addTab('全部工单','resources/jsp/all.jsp')">全部工单</a><a class="easyui-linkbutton" onclick="addTab('聊天室','resources/jsp/chat.jsp')">聊天室</a></div><div title="Title2"data-options="iconCls:'icon-reload',selected:true"style="padding:10px;">content2</div><div title="Title3">content3</div></div></div><div data-options="region:'center'"style="padding:5px;background:#eee;"><div id="tt" class="easyui-tabs" data-options="fit:true,border:false"></div></div>

然后再增加个js代码即可

function addTab(plugin,route) {   /* 如果子目录中有此tab,则切换过去，没有就增加一个 */if ($('#tt').tabs('exists',plugin)){        $('#tt').tabs('select', plugin);        // tab刷新内容        var tab = $('#tt').tabs('getSelected');        $("#tt").tabs('update', {            tab: tab,            options: {                title: plugin,                content: '<iframe scrolling="auto" frameborder="0"  src="'+route+'" style="width:100%;height:100%;"></iframe>',                closable: true,                selected:true            }        });    } else {        //var content = '<iframe scrolling="auto" frameborder="0"  src="'+route+'" style="width:100%;height:100%;"></iframe>';        $('#tt').tabs('add',{});        // tab刷新内容 fix 自适应高度        var tab = $('#tt').tabs('getSelected');        $("#tt").tabs('update', {            tab: tab,            options: {                title: plugin,                content: '<iframe scrolling="auto" frameborder="0"  src="'+route+'" style="width:100%;height:100%;"></iframe>',                closable: true,                selected:true            }        });    }}