當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Springboot：员工管理之公共页面提取高亮显示（十（5））

發(fā)布時(shí)間：2023/10/11 编程问答 63 如意码农

生活随笔收集整理的這篇文章主要介紹了 Springboot：员工管理之公共页面提取高亮显示（十（5））小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

把頂部和左側(cè)的公共代碼分別放到header.html和left.html中

頂部代碼：resources\templates\header.html

主內(nèi)容展示：

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--th:fragment="head" -->

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="head">

    ..........內(nèi)容略.........

</nav>

</html

左側(cè)代碼：resources\templates\left.html

主內(nèi)容展示：

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--接收頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù) th:fragment="left(pageActive)" -->

<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="left(pageActive)">

    <div class="sidebar-sticky">

        <ul class="nav flex-column">

	         ..........其他內(nèi)容略.........

	         <!--三元運(yùn)算符 判斷是否要高亮-->

            <li class="nav-item">

	            <a th:class="${pageActive=='list'?'nav-link active':'nav-link'}" th:href="@{/employee}">

                    員工管理

                </a>

            </li>

        </ul>

    </div>

</nav>

</html>

在dashboard.html和list.html頁(yè)面分別引入頂部和左側(cè)頁(yè)面：

list.html

主內(nèi)容展示：



<!--引入頭部公共代碼-->

	<div th:replace="header::head"></div>

		<div class="container-fluid">

			<div class="row">

				<!--引入左側(cè)公共代碼 傳參list給左側(cè)頁(yè)面 用于判斷高亮樣式-->

				<div th:replace="left::left('list')"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

					<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">

dashboard.html

<div th:replace="header::head"></div>

	<div class="container-fluid">

		<div class="row">

			<!--引入左側(cè)公共代碼 傳參main給左側(cè)頁(yè)面 用于判斷高亮樣式-->

			<div th:replace="left::left('main')"></div>

			<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

				<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">

總結(jié)

以上是生活随笔為你收集整理的Springboot：员工管理之公共页面提取高亮显示（十（5））的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： [LOJ#2553][CTSC2018]
下一篇：基于GUI的简单聊天室01

编程问答

Springboot：员工管理之公共页面提取 高亮显示（十（5））

總結(jié)

Springboot：员工管理之公共页面提取高亮显示（十（5））