Bootstrap简单好用的页面右上角咆哮提示框

最新推荐文章于 2024-08-13 08:51:38 发布

晓呆同学

最新推荐文章于 2024-08-13 08:51:38 发布

阅读量1.2w

点赞数 2

分类专栏： WEB前端文章标签： Bootstrap 咆哮提示框弹出框

本文链接：https://blog.csdn.net/daidaineteasy/article/details/42026223

版权

WEB前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在开发项目的时候，我们经常会有增、删、改的一些操作，可能我们在操作成功后，会跳转到一个成功或者失败提示页面，或者直接重定向到列表查询页，然后给出一个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>

在常用的浏览器中测试，暂未发现不兼容情况，可放心使用！