thymeleaf实现一个滑动开关按钮通过控制这个按钮跳转不同的页面
Thymeleaf是一个服务器端的Java模板引擎，它可以将HTML页面与后端数据进行结合，生成动态的页面。要实现一个滑动开关按钮，可以使用HTML和CSS来创建这个按钮，然后使用Thymeleaf来控制它的状态和跳转页面。
首先，创建一个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事件会触发，根据按钮的状态来跳转不同的页面。
接下来，我们需要在后端代码中实现这些功能。具体代码如下：
@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/cFcv 著作权归作者所有。请勿转载和采集!