Thymeleaf 实现滑动开关按钮控制跳转不同页面
使用 Thymeleaf 实现滑动开关按钮控制跳转不同页面
Thymeleaf 是一个服务器端的 Java 模板引擎，它可以将 HTML 页面与后端数据进行结合，生成动态的页面。要实现一个滑动开关按钮，可以使用 HTML 和 CSS 来创建这个按钮，然后使用 Thymeleaf 来控制它的状态和跳转页面。
1. 创建 HTML 页面
首先，创建一个 HTML 页面，包含一个滑动开关按钮和两个页面链接按钮。具体代码如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>滑动开关按钮</title>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #2196F3;
color: white;
text-decoration: none;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>滑动开关按钮</h1>
<label class="switch">
<input type="checkbox" th:checked="${isOn}" th:onclick="'location.href='' + @{/toggle} + ''" />
<span class="slider round"></span>
</label>
<br><br>
<a th:href="@{/page1}" class="button">页面1</a>
<a th:href="@{/page2}" class="button">页面2</a>
</body>
</html>
在这个 HTML 页面中，我们使用了一个 label 元素来包含一个 input 元素和一个 span 元素，用于创建滑动开关按钮。我们还定义了一些 CSS 样式来设置这个按钮的样式和动画效果。
在 label 元素中，我们使用了 Thymeleaf 的表达式来设置 input 元素的 checked 属性和 onclick 事件。当 isOn 为 true 时，按钮处于打开状态；当 isOn 为 false 时，按钮处于关闭状态。当用户单击按钮时，onclick 事件会触发，根据按钮的状态来跳转不同的页面。
2. 实现后端代码
接下来，我们需要在后端代码中实现这些功能。具体代码如下：
@Controller
public class SwitchController {
private boolean isOn = false;
@GetMapping("/")
public String index(Model model) {
model.addAttribute("isOn", isOn);
return "index";
}
@GetMapping("/toggle")
public String toggle() {
isOn = !isOn;
return "redirect:/";
}
@GetMapping("/page1")
public String page1() {
return "page1";
}
@GetMapping("/page2")
public String page2() {
return "page2";
}
}
在这个控制器中，我们定义了一个布尔类型的变量 isOn，表示按钮的状态。在 index 方法中，我们将 isOn 的值传递给 HTML 页面，在页面中使用 Thymeleaf 表达式来渲染按钮的状态。
在 toggle 方法中，我们将 isOn 的值取反，并使用 redirect 来跳转回主页。当用户单击按钮时，将触发这个方法，从而改变按钮的状态并跳转不同的页面。
在 page1 和 page2 方法中，我们定义了两个页面链接按钮的跳转路径。用户单击这些链接时，将跳转到不同的页面。
总结
以上就是使用 Thymeleaf 实现一个滑动开关按钮控制跳转不同页面的方法。通过这个例子，我们可以学习到如何使用 Thymeleaf 与 HTML 和 CSS 结合来生成动态页面，以及如何在后端代码中处理用户的交互操作。
原文地址: https://www.cveoy.top/t/topic/nx6H 著作权归作者所有。请勿转载和采集!