使用jquery弹出消息框
使用前需要导入jquery.js文件common.css文件
common.js文件中：
// 消息框
var $message;
var messageTimer;
$.message = function () {
var message = {};
if ($.isPlainObject(arguments[0])) { //用于判断指定参数是否是一个纯粹的对象。所谓"纯粹的对象"，就是该对象是通过"{}"或"new Object"创建的
message = arguments[0]; //arguments是什么，怎么使用，下面有解释
} else if (typeof arguments[0] === "string" && typeof arguments[1] === "string") { //比较值类型
message.type = arguments[0];
message.content = arguments[1];
} else {
return false;
}
if (message.type == null || message.content == null) {
return false;
}
if ($message == null) {
//class="messageContent message' + message.type + 'Icon" 是接收前端的type，然后去css中找对应的样式
$message = $('<div class="xxMessage"><div class="messageContent message' + message.type + 'Icon"><\/div><\/div>');
if (!window.XMLHttpRequest) { //判断浏览器类型
$message.append('<iframe class="messageIframe"><\/iframe>');
}
$message.appendTo("body"); //将值插入到body的最后一行
}
//先清空所有样式，在进行添加前端传来的样式，并且显示message.content中的文本
$message.children("div").removeClass("messagewarnIcon messageerrorIcon messagesuccessIcon").addClass("message" + message.type + "Icon")
.html(message.content);
$message.css({"margin-left": -parseInt($message.outerWidth() / 2), "z-index": zIndex++}).show();
//定时器，消息框显示的时间
clearTimeout(messageTimer);
messageTimer = setTimeout(function () {
$message.hide();
}, 3000);
return $message;
}
了解这个对象之前先来认识一下javascript的一些功能：
其实Javascript并没有重载函数的功能，但是Arguments对象能够模拟重载。Javascrip中国每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。arguments.length为函数实参个数，arguments.callee引用函数自身。
arguments他的特性和使用方法
特性：
arguments对象和Function是分不开的。因为arguments这个对象不能显式创建，arguments对象只有函数开始时才可用。
使用方法：
虽然arguments对象并不是一个数组，但是访问单个参数的方式与访问数组元素的方式相同
例如：
arguments[0],arguments[1],。。。。。。。。arguments[n],
在js中 不需要明确指出参数名，就能访问它们，例如：
function test() {
var s = "";
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
s += arguments[i] + ",";
}
return s;
}
test("name", "age")
输出结果：
name,age
我们知道每一个对象都有自己的属性，arguments对象也不例外，首先arguments的访问犹如Array对象一样，
用0到arguments.length-1来枚举每一个元素。下面我们来看看callee属性，返回正被执行的Function 对象，
也就是所指定的 Function 对象的正文。callee 属性是 arguments 对象的一个成员，仅当相关函数正在执行时才可用。
callee 属性的初始值就是正被执行的 Function 对象，这允许匿名的递归函数。
var sum = function (n) {
if (1 == n) {
return 1;
} else {
return n + arguments.callee(n - 1);
}
}
alert(sum(6));
通俗一点就是，arguments此对象大多用来针对同个方法多处调用并且传递参数个数不一样时进行使用。根据arguments的索引来判断执行的方法。
arguments 的用法和特性基本就是这么多了。可能callee属性用到的比较少。但是如果自己封装或者写一些js的时候 除了callee的东西基本都会用到。有不对的地方希望朋友们多多支出。大家共同进步。
要弹框时在JS中调用 $.message方法:
//这个方法是回调函数，message是Controller返回的
store.saveResumesOptions(data).then(function (message) {
$.message(message.type, message.content);
});
//也可以单独调用
$.message("error", "发生错误");message.type 可以根据自己的要求写但是一定要跟CSS中的 类名一样 如果message.type 位置传的是warn的话 在CSS中就找到 messagewarnIcon这个CSS样式
因为 ‘’message' + message.type + 'Icon‘’ 进行了拼接
对应的CSS：
div.xxMessage .messagewarnIcon {
background: url(../images/common.gif) -60px -360px no-repeat;
}
div.xxMessage .messagesuccessIcon {
background: url(../images/common.gif) -30px -390px no-repeat;
}
div.xxMessage .messageerrorIcon {
background: url(../images/common.gif) 0px -420px no-repeat;
}也可以写个信息类定义接口，给其他类进行调用返回:
package com.app;
import com.app.util.SpringUtils;
/**
* 消息
*
* @author APP TEAM
* @version 1.0
*/
public class Message {
/**
* 类型
*/
public enum Type {
/** 成功 */
success,
/** 警告 */
warn,
/** 错误 */
error
}
/** 类型 */
private Type type;
/** 内容 */
private String content;
/** 标号，错误标号，成功标号等 */
private Integer code;
/** 复杂类型数据 */
private Object data;
/**
* 初始化一个新创建的 Message 对象，使其表示一个空消息。
*/
public Message() {
}
/**
* 初始化一个新创建的 Message 对象
*
* @param type
* 类型
* @param content
* 内容
*/
public Message(Type type, String content) {
this.type = type;
this.content = content;
}
/**
* @param type
* 类型
* @param content
* 内容
* @param args
* 参数
*/
public Message(Type type, String content, Object... args) {
this.type = type;
this.content = SpringUtils.getMessage(content, args);
}
/**
* 返回成功消息
*
* @param content
* 内容
* @param args
* 参数
* @return 成功消息
*/
public static Message success(String content, Object... args) {
return new Message(Type.success, content, args);
}
/**
* 返回警告消息
*
* @param content
* 内容
* @param args
* 参数
* @return 警告消息
*/
public static Message warn(String content, Object... args) {
return new Message(Type.warn, content, args);
}
/**
* 返回错误消息
*
* @param content
* 内容
* @param args
* 参数
* @return 错误消息
*/
public static Message error(String content, Object... args) {
return new Message(Type.error, content, args);
}
/**
* 获取类型
*
* @return 类型
*/
public Type getType() {
return type;
}
/**
* 设置类型
*
* @param type
* 类型
*/
public void setType(Type type) {
this.type = type;
}
/**
* 获取内容
*
* @return 内容
*/
public String getContent() {
return content;
}
/**
* 设置内容
*
* @param content
* 内容
*/
public void setContent(String content) {
this.content = content;
}
public Integer getCode() {
return code;
}
public Message setCode(Integer code) {
this.code = code;
return this;
}
public Object getData() {
return data;
}
public Message setData(Object data) {
this.data = data;
return this;
}
@Override
public String toString() {
return SpringUtils.getMessage(content);
}
}Controller或其他类中调用方法 ：
@RequestMapping(value = "/{id}/resumes", method = RequestMethod.GET)
@ResponseBody
public Message viewResumes(@PathVariable(value = "id") Long id,
@RequestParam(value = "status", required = true) String status) {
Message message = new Message();
if (ResumesVo.RESUMES_STATUS_All.equals(status)) {
message.setData(resumesService.viewAllResumes(id));
} else {
message.setData(resumesService.viewOtherResumes(id));
}
message.setType(Message.Type.success);
message.setContent("成功");
return message;
}效果 ：
success的效果如下(操作成功的这样的内容可以自行编辑)
error的效果就是操作成功前面是红叉
warn的效果就是操作成功前面是个黄色感叹号
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
