基于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> <ahref="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><ahref="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> <ahref="javascript:openTab('安全退出','exit','icon-cancel')"class="easyui-linkbutton"data-options="plain:true,iconCls:'icon-cancel'"style="width: 150px;">安全退出</a></div></div></div>

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

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

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

彩蛋：