文档章节

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

YuKongA
 YuKongA
发布于 2017/05/16 09:17
字数 726
阅读 44
收藏 1
点赞 0
评论 0

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


功能示意图

也就是说每当我们点击左侧导航菜单就等于打开了一个新的页面只不过它是选项卡的形式显示在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.7 版本发布,调整界面、梳理权限设置

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

炒蚕豆吃蹦豆
2015/01/14
3.6K
18
Java实现个人博客网站

说明:该项目是实验楼用户“LOU3165780622”发布在实验楼上的项目教程:【Java实现个人博客】,未经允许,禁止转载; 该项目利用 SSM 框架和 Mysql 以及一些简单的前端知识搭建一个自己的个人...

实验楼
2017/12/12
0
0
然之协同 1.4 版发布,多处改进安全升级

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

炒蚕豆吃蹦豆
2014/09/05
1K
14
蝉知建站系统 5.2 发布,大量细节改进

蝉知建站系统 5.2 发布了。蝉知是一款开源免费的企业建站系统,企业门户系统。和其他的CMS系统相比,蝉知更侧重企业营销官网的建设。蝉知内置了企业官网所必须的内容、商城、会员、推广等功能...

开源春哥
2016/03/17
5.7K
38
ZHENFENGSHISAN/perfect-ssm

Quick Start 项目简介 ssm系列 ssm-demo:Spring+SpringMVC+Mybatis+easyUI整合 perfect-ssm:RESTful API+redis缓存 ssm-cluster:前后端分离+集群部署 ssm-dubbo:dubbo服务化 ssm-micro-se......

ZHENFENGSHISAN
2017/09/18
0
0
然之协同1.5beta版发布,新增任务看板和大纲功能

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

炒蚕豆吃蹦豆
2014/10/29
2.5K
35
jquery左侧导航网页菜单

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

长平狐
2012/09/06
1K
0
Jarvis/JieStyle Two

JieStyle Two WordPress Themes 主题演示:https://tangjie.me 主题介绍 极简风格,全新 JieStyle 第二代轻柔风格 跨浏览器兼容,支持IE、Edge、Chrome、Safari、Opera 响应式Web设计,自适应...

Jarvis
2017/09/17
0
0
Jarvis/JieStyle One

JieStyle One WordPress Themes 主题介绍 商务领航,尽现成熟稳重的个人小站风格 响应式Web设计,自适应电脑、平板电脑、移动设备 图标字体库,自适应各种终端设备,保证图形图标清晰无锯齿,...

Jarvis
2017/09/17
0
0
然之协同OA3.2版本发布,CRM增加名单管理,考勤增强

新春第一个版本发布,再次祝大家在新的一年里面事业有成!万事顺利。 然之协同OA是易软天创团队开发的面向中小企业的协同办公系统,内置了CRM客户关系管理,日常OA办公管理,现金记账管理,团...

开源春哥
2016/02/17
3.1K
14

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iOS安全应该做哪些事情

1. 尽量使用HTTPS协议。 2. 密码提交的时候,密码使用SHA256加密后传输,MD5等经过哈希碰撞已经可以推算出原文。 3. 密码提交的时候,可以加盐。 4. 密码保存在本地的时候,尽量使用钥匙串保...

HOrange
9分钟前
0
0
react native 注意事项

1. 环境参考官网 android studio 必装 java jdk安装 1.8版本(环境建议自己一步一步配置,切记不要 apt ) 2.有改变编译内容发现 会白屏,然后APP消失,请卸载原来的测试 appinfo (连续两次...

304158
16分钟前
0
0
FOMO游戏代码解析

源代码在此处

怎当她临去时秋波那一转
21分钟前
1
0
EOS智能合约与DApp开发入门

EOS的是Block.One主导研发的一个区块链底层公链系统,它专门为支撑商业去中心化 应用(Decentralized Application)而设计,其代码开源。 比特币被称为区块链1.0,因为它开辟了数字加密货币的...

笔阁
33分钟前
1
0
编译cjson到dll

https://blog.csdn.net/mengzhisuoliu/article/details/52203724 编译完成后 是纯lua实现的json decode 的10倍以上...

梦想游戏人
43分钟前
0
0
JS基础- Date 对象

Date 对象 Date 对象用于处理日期和时间。 创建 Date 对象的语法: var myDate=new Date() 注释:Date 对象会自动把当前日期和时间保存为其初始值。 Date 对象属性 属性 描述 constructor 返...

ZHAO_JH
45分钟前
0
0
Python数据分析numpy(1)

Python开源的科学计算基础库 1.表示N维数组对象ndarray 2.线性代数、傅里叶变换、随机数生成 3.广播函数,整合c++、c 一.数据的维度 1.数据 2.数据维度 3.一维数据 (1)特点 (2)Python中的...

十年磨一剑3344
48分钟前
1
0
csv导入Hive脚本

from pyspark.sql import HiveContexthivec = HiveContext(sc) # 创建一个hivecontext对象用于写执行SQL,sc为sparkcontext# 拼接一个字段类型字符串str_s = 'label String,'...

gulf
50分钟前
0
0
TensorFlow 隐含层 拟合 异或运算

a⊕b = (¬a ∧ b) ∨ (a ∧¬b) 数据 X = [[0, 0], [0, 1], [1, 0], [1, 1]]Y = [[0], [1], [1], [0]] 单层网络只能拟合线性问题,由于异或是非线性问题,需要使用多层网络 输入和输出 [[...

阿豪boy
今天
0
0
SVN 教程

http://www.runoob.com/svn/svn-tutorial.html 记一次 svn 管理的项目迁移工作 之前A服务器上的项目版本管理工具是用的SVN,后来,之前管理linux服务器的员工离职了,这管理服务器的工作也就...

yeahlife
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部