【ssm个人博客项目实战03】左侧导航菜单功能实现

来源：互联网发布：大数据建设开展情况编辑：程序博客网时间：2024/05/20 20:58

先说一下具体的功能就是当我们点击左侧菜单选项时，右侧主界面会显示对应的内容。

功能示意图

也就是说每当我们点击左侧导航菜单就等于打开了一个新的页面只不过它是选项卡的形式显示在center中。

打开easyUI API手册搜索 tabs

添加选项卡
由于每一个菜单选项单击一下都会打开一个tab 所以我们可以把这个抽出来作为一个方法

       /**         * 打开选项卡         * @param text  选项卡标题         * @param url   请求打开路径         * @param icon  选项卡图标         */        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='${blog}/admin/"+url+"'></iframe>"                    //url 远程加载所打开的url                })            }        }

接下来我们给每一个菜单选项注册这个单击事件

<div title="常用操作" data-options="selected:true,iconCls:'icon-item'" style="padding: 10px">            <a href="javascript:openTab('写博客','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">写博客</a>            <a href="javascript:openTab('评论审核','commentReview.jsp','icon-review')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a>        </div>        <div title="博客管理" data-options="iconCls:'icon-bkgl'" style="padding:10px;">            <a href="javascript:openTab('写博客','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px;">写博客</a>            <a href="javascript:openTab('博客信息管理','blogManage.jsp','icon-bkgl')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-bkgl'" style="width: 150px;">博客信息管理</a>        </div>        <div title="博客类别管理" data-options="iconCls:'icon-bklb'" style="padding:10px">            <a href="javascript:openTab('博客类别信息管理','blogTypeManage.jsp','icon-bklb')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-bklb'" style="width: 150px;">博客类别信息管理</a>        </div>        <div title="评论管理" data-options="iconCls:'icon-plgl'" style="padding:10px">            <a href="javascript:openTab('评论审核','commentReview.jsp','icon-review')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a>            <a href="javascript:openTab('评论信息管理','commentManage.jsp','icon-plgl')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-plgl'" style="width: 150px;">评论信息管理</a>        </div>        <div title="个人信息管理" data-options="iconCls:'icon-grxx'" style="padding:10px">            <a href="javascript:openTab('修改个人信息','modifyInfo.jsp','icon-grxxxg')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-grxxxg'" style="width: 150px;">修改个人信息</a>        </div>        <div title="系统管理" data-options="iconCls:'icon-system'" style="padding:10px">            <a href="javascript:openTab('友情链接管理','linkManage.jsp','icon-link')" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-link'" style="width: 150px">友情链接管理</a>            <a href="#" class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-modifyPassword'" style="width: 150px;">修改密码</a>            <a href="# class="easyui-linkbutton"               data-options="plain:true,iconCls:'icon-refresh'" style="width: 150px;">刷新系统缓存</a>            <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-exit'"               style="width: 150px;">安全退出</a>        </div>

这样我们就完成了左侧菜单功能的实现。
在下一篇博客我会讲解如果通过mybatis实现博客类别的分页实现以及easyUI datagrid使用

0 0