0015SpringBoot结合thymeleaf实现点击菜单高亮显示
1、点击菜单，经过Controller层处理，正常定位到视图页面
2、编写抽象出公共片段的html，根据参数判断是否加高亮样式
3、多个目标页面引用步骤2中抽象出的公共片段，传不同的参数
具体实现如下：
1、Controller跳转代码如下：
package com.myself.controller; import com.myself.dao.EmployeeDao;
import com.myself.entities.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping; import java.util.Collection; @Controller
public class EmployeeControlller {
@Autowired
private EmployeeDao employeeDao; @GetMapping("/emps")
public String listEmps(Model model){
Collection<Employee> emps = employeeDao.getAll();
model.addAttribute("emps",emps);
return "emp/list";
}
}
2、抽取出的公共片段页面，主要代码如下：
<!DOCTYPE html>
<!--需要引入命名空间，否则下边无法使用th:标签-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--th:fragment为普通片段的显示定义-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
</li>
</ul>
</nav>
<!--id="sidebar"为选择器的形式定义-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<!--注意@{}里边才是请求的路径，~{}里边是引用的片段块，${}里边是取变量的值，#{}里是从配置文件取值-->
<a class="nav-link" href="#" th:href="@{/emps}" th:class="${activeUri=='emps'?'nav-link active':'nav-link'}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
员工管理
</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
3、具体需要高亮显示的页面，主要代码片段如下：
如首页主要代码如下：
<!--引入顶部栏-->
<div th:replace="~{emp/bar::topbar}"></div>
<!--引入侧边栏并高亮显示-->
<div th:replace="~{emp/bar::#sidebar(activeUri='main.html')}"></div>
而员工管理页面主要代码为：
<!--引入顶部栏-->
<div th:replace="~{emp/bar::topbar}"></div>
<!--引入侧边栏并高亮显示-->
<div th:replace="~{emp/bar::#sidebar(activeUri='emps')}"></div>
其中引入片段可以有th:insert ; th:replace ; th:include ，具体可参考thymeleaf手册
若有理解不到之处，望指正！
0015SpringBoot结合thymeleaf实现点击菜单高亮显示的更多相关文章
- 两种简单实现菜单高亮显示的JS类(转载)
两种简单实现菜单高亮显示的JS类 近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web ...
- js实现当前导航菜单高亮显示
为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...
- 微信公众号菜单openid 点击菜单即可打开并登录微站
现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打 ...
- 重写JS的鼠标右键点击菜单
重写JS的鼠标右键点击菜单 该效果主要有三点,一是对重写的下拉菜单的隐藏和显示:二是屏蔽默认的鼠标右键事件:三是鼠标左键点击页面下拉菜单隐藏. 不多说,上html代码: 1 <ul id=&qu ...
- 点击菜单选项，右侧主体区新增子界面（Tab）的实现
今天是2019年小年后一天,还有三天回家过年. 今天记录一下一种前端页面的效果的实现,这种效果很常见,一般用于网站后台系统的前端页面.一般后台系统会分为顶部导航栏,左边的菜单栏和右边的主体区.有一种效 ...
- 左侧多级菜单,高亮显示js
左侧多级菜单,如果本页面是当前栏目,则左侧菜单高亮显示 <ul class="nav navbar-stacked" id="navs"> {ded ...
- jq 鼠标点击跳转页面后 改变点击菜单的样式代码
点击菜单跳转页面,然而跳转后的页面字体并没有加粗用如下代码 <div class="bg01 menu"> <img class="img01" ...
- .net MVC 微信公众号 点击菜单拉取消息时的事件推送
官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141016&token=&lang=zh_CN ...
- ASP.NET MVC Bootstrap模板选中菜单高亮显示当前项方法
当我们处理后台显示当前页面,当前页菜单项高亮,我们可以使用js方法,也可用程序实现,使用Bootstrap模板处理高亮并展开方法之一 1.在项目中导入 <script src="/as ...
随机推荐
- 第七章 云原生生态的基石 Kubernetes
7.1 Kubernetes架构 K8s的核心组件: etcd: 协同存储,负责保存整个集群的状态. API:资源操作的唯一入口. controller manager: 维护集群的状态,执行故障检测 ...
- 打印格式化printf
#define _DEBUG_ #ifdef _DEBUG_#define printm(fmt, ...) do { printf("%s line %d, "fmt, __f ...
- 最新 上海轻轻java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.上海轻轻等10家互联网公司的校招Offer,因为某些自身原因最终选择了上海轻轻.6.7月主要是做系统复习.项目复盘.Leet ...
- windows下大数据开发环境搭建（3）——Scala环境搭建
一.所需环境 ·Java 8 二.下载Scala https://www.scala-lang.org/download/ 三.配置环境变量 SCALA_HOME: C:\scala Path: ...
- xsy 2414【CF587C】Duff in the Army
Description [题目描述]: 最近有一场战争发生,Duff是战争里一名士兵,Malek是她的长官. 他们的国家——Andarz Gu有n个城市(编号为1到n),总共有n-1条道路,每条道路连 ...
- AVR单片机教程——开发环境配置
今天去交大密院参观了设计展,无外乎两个主题:Arduino.Python. 关于Python,我印象最深的是一位Python程序员的话:你要硬核的话,可以去那边看Java. 拜托,都9102年了,Ja ...
- [BZOJ4755][JSOI2016]扭动的回文串(manacher+Hash)
前两种情况显然直接manacher,对于第三种,枚举回文中心,二分回文半径,哈希判断即可. #include<cstdio> #include<algorithm> #defi ...
- js new到底做了什么?如何重写new?（转）
转自:https://blog.csdn.net/lyt_angularjs/article/details/86623988
- nodeJs+vue安装教程详解 相信
相信很多朋友都在装node服务和安装vue的时候会遇到一些问题,下面为大家详细介绍node服务的安装以及vue的安装: 1.nodeJs官网下载版本(根据自己电脑的配置进行相应下载即可):默认安装路径 ...
- Spring Cloud Alibaba学习笔记（13） - Spring Cloud Stream的监控与异常处理
Spring Cloud Stream监控 Spring Boot Actuator组件用于暴露监控端点,很多监控工具都需要依赖该组件的监控端点实现监控.而项目集成了Stream及Actuator后也 ...