使用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" οnclick="addTab('工单录入','resources/jsp/add.jsp')">工单录入</a><br>
						<a class="easyui-linkbutton" οnclick="addTab('待处理工单','resources/jsp/suspence.jsp')">待处理工单</a><br>
						<a class="easyui-linkbutton" οnclick="addTab('已关闭工单','resources/jsp/close.jsp')">已关闭工单</a><br>
						<a class="easyui-linkbutton" οnclick="addTab('审核中工单','resources/jsp/reviewing.jsp')">审核中工单</a><br>
						<a class="easyui-linkbutton" οnclick="addTab('全部工单','resources/jsp/all.jsp')">全部工单</a>
						<a class="easyui-linkbutton" οnclick="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
            }
        });
    }
	}