基于ssm框架的个人博客（4）--点击菜单中的功能，在center中添加tab

        之前我们已经将写了一个基本布局的架子，但是没有任何页面的动作，现在我们就来添加一个动作，就是点击菜单中的功能列表，在center中添加一个tab，在tab中显示一个jsp页面（不是直接访问，因为我的位置是WEB-INF下，是不能够直接访问的，必须是经过服务端的转发才能访问）。

下面找的一个函数，就是实现上面说的功能的，这个你自己慢慢研究easyui的api也行，百度搜"easyui点击链接，添加一个tab"，这样也能找到很多现成的方法。（参考博客是最为靠谱的）

	function openTab(text, url, icon) {
		if ($('#tabs').tabs('exists', text)) {
			$("#tabs").tabs("select", text);
		} else {
			$("#tabs")
					.tabs(
							'add',
							{
								title : text,
								closable : true, //是否允许选项卡摺叠。
								iconCls : icon, //显示图标
								content : "<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='${pageContext.request.contextPath }/admin/"
										+ url + "'></iframe>"
							//url 后台的controller的某个匹配路径
							})
		}
	}

那么现在的west部分就要做出些修改了

代码如下：

<div region="west" style="width: 250px" title="功能菜单" split="true">
		<div class="easyui-accordion" data-options="fit:true,border:false">
			<div title="常用操作" data-options="selected:true,iconCls:'icon-ok'"
				style="padding: 10px">
				<a href="javascript:openTab('写博客','writeBlog','icon-edit')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-edit'" style="width: 150px">写博客</a>
				<a href="javascript:openTab('博客管理','manageBlog','icon-tip')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-tip'" style="width: 150px">博客管理</a>
				<a href="javascript:openTab('博客类别管理','manageTypeBlog','icon-tip')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">博客类别管理</a>
			</div>

			<div title="博客类别管理" data-options="iconCls:'icon-ok'"
				style="padding: 10px">
				<a href="javascript:openTab('博客类别管理','manageTypeBlog','icon-tip')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">博客类别管理</a>
			</div>

			<div title="个人信息管理" data-options="iconCls:'icon-ok'"
				style="padding: 10px">
				<a href="javascript:openTab('修改个人信息','modifyPerInfo','icon-edit')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-mini-edit'"
					style="width: 150px;">修改个人信息</a> <a
					href="javascript:openTab('修改密码','modifyPassword','icon-edit')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-mini-edit'"
					style="width: 150px;">修改密码</a>
			</div>
			<div title="博客管理" data-options="iconCls:'icon-ok'"
				style="padding: 10px;">
				<a href="javascript:openTab('写博客','writeBlog','icon-edit')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-edit'" style="width: 150px;">写博客</a>
				<a href="javascript:openTab('博客信息管理','manageBlog','icon-tip')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">博客信息管理</a>
			</div>
			<div title="评论管理" data-options="iconCls:'icon-ok'"
				style="padding: 10px">
				<a href="javascript:openTab('评论审核','checkComment','icon-tip')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-ok'" style="width: 150px">评论审核</a>
				<a
					href="javascript:openTab('评论信息管理','manageCommentInfo','icon-tip')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">评论信息管理</a>
			</div>

			<div title="系统管理" data-options="iconCls:'icon-ok'"
				style="padding: 10px">
				<a href="javascript:openTab('友情链接管理','managefriendLink','icon-tip')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-tip'" style="width: 150px">友情链接管理</a>

				<a href="javascript:openTab('刷新系统缓存','refreshcache','icon-reload')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-reload'"
					style="width: 150px;">刷新系统缓存</a> <a
					href="javascript:openTab('安全退出','exit','icon-cancel')"
					class="easyui-linkbutton"
					data-options="plain:true,iconCls:'icon-cancel'"
					style="width: 150px;">安全退出</a>
			</div>
		</div>
	</div>

       好了，写到这了，就有写变化而来，

因为后台还没有做响应的处理，所以暂时是404，找不到页面，我测试过了， 编码可行，在此测试的代码与图就贴了。

希望这篇博客能够给读者带来帮助，希望喜欢的朋友能够继续支持我.....

彩蛋：