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

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

今天给大家介绍一下下边这个漂亮的 页面右上角咆哮提示效果 的实现,效果图如下:


Bootstrap简单好用的页面右上角咆哮提示框_第1张图片

Bootstrap简单好用的页面右上角咆哮提示框_第2张图片


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>

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


你可能感兴趣的:(bootstrap,弹出框,提示框,咆哮)