文档章节

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

YuKongA
 YuKongA
发布于 2017/05/16 09:17
字数 726
阅读 48
收藏 1

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


功能示意图

也就是说每当我们点击左侧导航菜单就等于打开了一个新的页面只不过它是选项卡的形式显示在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使用

© 著作权归作者所有

共有 人打赏支持
YuKongA
粉丝 6
博文 10
码字总数 15504
作品 0
私信 提问
开源中国菜单优化的几点意见

@红薯 逛开源中国,看到有些个菜单不爽,所以就有了这个意见: 一、首页顶部导航菜单中“我的空间” 问题:菜单项太多,文字排版参差不齐。下拉菜单没有对齐导航栏。 修改:(1)优化菜单文字...

MrZQ
2013/12/19
292
1
然之协同 1.7 版本发布,调整界面、梳理权限设置

然之协同管理系统1.7版本正式发布。 这个版本主要梳理权限设置,针对应用对用户进行权限控制,用户可以自定义左侧导航应用; 对界面布局做了调整,操作起来更加合理方便;还有大量细节的调整...

炒蚕豆吃蹦豆
2015/01/14
3.8K
18
jquery左侧导航网页菜单

公司项目需要写一个左侧导航菜单,在网上找了好多源码参考,处理的都很复杂,移植性不是很好,最后根据一个比较不错的修改了一下达到了想要的效果。 前端HTML代码: View Code 1 < html xml...

长平狐
2012/09/06
1K
0
然之协同 1.4 版发布,多处改进安全升级

大家好,然之协同1.4.beta版本正式发布了。 1.4.beta版本对客户、账目导入、项目、分页等多处功能进行了改进; 修复了之前版本的一些bug。本次发布增强了系统安全性,建议老版本用户及时更新...

炒蚕豆吃蹦豆
2014/09/05
1K
14
然之协同1.5beta版发布,新增任务看板和大纲功能

然之协同管理系统1.5beta版正式发布, 新增了任务看板和大纲功能,任务管理更加方便。 修复之前的bug,优化细节。 一、修改记录 1、看板页面的新建任务链接不对 2、更换crm、team图标 3、调整...

炒蚕豆吃蹦豆
2014/10/29
2.5K
35

没有更多内容

加载失败,请刷新页面

加载更多

127.0.0.1 和 0.0.0.0 地址的区别

1. IP地址分类 1.1 IP地址表示 IP地址由两个部分组成,net-id和host-id,即网络号和主机号。 net-id:表示ip地址所在的网络号。 host-id:表示ip地址所在网络中的某个主机号码。 即: IP-a...

华山猛男
9分钟前
1
0
解决Unknown host 'd29vzk4ow07wi7.cloudfront.net'. You may need to adjust the proxy settings in Gradle.

把 总项目 下的 build.gradle 中的 两个 jcenter() 用 maven{ url ‘http://maven.aliyun.com/nexus/content/groups/public/’} 代替。...

lanyu96
15分钟前
1
0
基于redis的分布式锁

redisson提供了基于redis的分布式锁实现方式,本文就尝试了下锁的使用方式。Redisson同时还为分布式锁提供了异步执行的相关方法,第二节执行介绍。 一、可重入锁验证 同一个jvm里面同一线程的...

noob_chr
23分钟前
6
0
CPU性能过剩提升乏力影响未来行业发展吗?

虽然CPU仍然在不断发展,但是它的性能已经不再仅仅受限于单个处理器类型或制造工艺上了。和过去相比,CPU性能提升的步伐明显放缓了,接下来怎么办,成为横亘在整个行业面前的大问题。 自201...

linux-tao
26分钟前
3
0
设计模式“6”大原则!

面向对象设计原则 概述 对于面向对象软件系统的设计而言,在支持可维护性的同时,提高系统的可复用性是一个至关重要的问题,如何同时提高一个软件系统的可维护性和可复用性是面向对象设计需要...

Java干货分享
42分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部