Bootstrap簡單好用的頁面右上角咆哮提示框
阿新 • • 發佈：2018-12-31
在開發專案的時候，我們經常會有增、刪、改的一些操作，可能我們在操作成功後，會跳轉到一個成功或者失敗提示頁面，或者直接重定向到列表查詢頁，然後給出一個alert提示。
今天給大家介紹一下下邊這個漂亮的 頁面右上角咆哮提示效果 的實現，效果圖如下：
1）效果採用bootstrap-growl外掛，在使用的時候需要引入對應的對應的CSS和JS：
<link href="xxx/bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="xxx/js/jquery.min.js" type="text/javascript"></script> <script src="xxx/bootstrap/js/bootstrap.js" ></script> <script src="xxx/bootstrap/js/bootstrap-growl.js" ></script>
2)我將咆哮效果的程式碼塊寫到一個tag標籤中了，我們在使用的時候，可以直接引用一下tag標籤即可：
errors.tag<%@ tag pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:if test="${not empty message}"> <script type="text/javascript"> $(function() { var msg = {}; try { msg = $.parseJSON('${message}'); } catch (e) { msg.content = '${message}'; msg.result = true; } if (msg.result == true) { $.growl({ title: '成功提示：', message: msg.content },{ type:"success" }); } else { $.growl({ title: '失敗提示：', message: msg.content },{ type:"danger" }); } }); </script> </c:if>
3）Controller端實現，就像下邊演示的這麼簡單
@Controller @RequestMapping(value="/test") public class TestController { @RequestMapping(value = "add") public String add(ModelMap model) throws Exception { model.put("message", "{\"result\":true, \"content\": \"建立新使用者成功！\"}"); // model.put("message", "{\"result\":false, \"content\": \"建立新使用者失敗，請重新建立或聯絡管理員解決！\"}"); return "index"; } @RequestMapping(value = "add2") public String add2(RedirectAttributes redirectAttributes) throws Exception { redirectAttributes.addFlashAttribute("message", "{\"result\":true, \"content\": \"建立新使用者成功！\"}"); // redirectAttributes.addFlashAttribute("message", "{\"result\":false, \"content\": \"建立新使用者失敗，請重新建立或聯絡管理員解決！\"}"); //重定向 return "redirect:/test/xxx"; } }
4）最後JSP頁面程式碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 載入一下errors.tag標籤所在的tags資料夾 -->
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>測試</title>
<!-- bootstrap 引入 -->
<link href="${ctx}/static/bootstrap/css/bootstrap.css" rel="stylesheet" />
<!-- bootstrap 引入 -->
</head>
<body>
This is my JSP page. <br>
<script src="xxx/js/jquery.min.js" type="text/javascript"></script>
<script src="xxx/bootstrap/js/bootstrap.js" ></script>
<script src="xxx/bootstrap/js/bootstrap-growl.js" ></script>
<!-- 只需要引入一下此標籤即可實現咆哮提示效果 -->
<tags:errors></tags:errors>
</body>
</html>