仿网易邮箱5.0(四)：信息提示插件(tips.js)
2024-10-15 20:59:02
信息提示插件，在平常的开发中也是经常乃至的一个插件，像是一些辅助信息的提示，如：加载成功、提交信息成功或失败等等。这个插件在163邮箱中用在切换标签时提示加载状态。
下面我们先来分析一下这个小插件需要实现的一些接口：
1、显示时的停留时间，这个我们可以直接在实例化类时传递进去。
2、显示内容可更新，这样一来就可以在整个页面中仅创建一个实例，然后通过不断的更新内容来达到不同信息显示的效果。如：tips.update('msg');
3、显示，如果想实现内容可更新后再显示，就需要能够手动调用显示接口。如：tips.update('new msg').show();
4、隐藏，显示的时候我们可以直接立即隐藏。
5、删除，如果我们仅使用一次，或者是此操作之后页面中不再使用此插件，那么我们最好是从页面中移除而不仅仅是隐藏。
接下来我们看下源代码：
/**
* 信息提示插件
* @author Ly
* @date 2012/11/15
*/
;Neter.namespace('Neter.Tips'); /**
* @class
* @name Neter.Tips
* @param {Object} options 自定义配置信息，默认配置信息如下：
<pre>
options = {
container : document.body, // 信息提示框架放于哪个容器中进行显示，默认为body
msg : '', // 信息内容
showTime : 2000, // 提示信息显示时间，单位毫秒，默认为2000毫秒
type : 'success' // 提示框类型，success（绿色）、error（红色）、aside（灰色）、warning（棕色）
}
</pre>
*/
;Neter.Tips = function(options) {
var _this = this; this.defaults = {
container : document.body, // 信息提示框架放于哪个容器中进行显示，默认为body
msg : '', // 信息内容
showTime : 2000, // 提示信息显示时间，单位毫秒，默认为2000毫秒
type : 'success' // 提示框类型，success（绿色）、error（红色）、aside（灰色）、warning（棕色）
}; Neter.apply(this.defaults, options); this.handler = {
container : $(this.defaults.container),
tips : null
}; this.method = {
/**
* 创建框架
* @ignore
*/
create : function() {
var defaults = _this.defaults,
handler = _this.handler; handler.tips = $('<div></div>').addClass('neter-tips')
.html(defaults.msg)
.appendTo(defaults.container); return this;
}
};
}; ;Neter.apply(Neter.Tips.prototype, {
/**
* 渲染插件，渲染后仅是将插件添加到页面中，若要显示需调用show方法
* @function
* @name Neter.Tips.prototype.render
* @return {Neter.Tips} 返回插件的引用
*/
render : function() {
this.method.create(); return this;
},
/**
* 获取插件的DOM对象
* @function
* @name Neter.Tips.prototype.get
* @return {jQueryDOM} 返回当前插件的DOM对象，经过jQuery封装过。
*/
get : function() {
return this.handler.tips;
},
/**
* 更新插件的消息内容
* @function
* @name Neter.Tips.prototype.update
* @param {String} msg 消息内容
* @return {Neter.Tips} 返回插件的引用
*/
update : function(msg) {
this.defaults.msg = msg || this.defaults.msg; return this;
},
/**
* 显示插件
* @function
* @name Neter.Tips.prototype.show
* @param {String} [type] 指定信息框的类型，可以省略，省略则使用上次设置的类型
* @param {Boolean} [showType=false] 显示方式，默认为false，即以动画方式来显示，true为立即显示，并且不自动隐藏
* @return {Neter.Tips} 返回插件的引用
*/
show : function(type, showType) {
var defaults = this.defaults,
tips = this.handler.tips; if (!tips) { return this; } defaults.type = type || defaults.type; tips.html(defaults.msg)
.removeClass('neter-tips-success neter-tips-error neter-tips-aside neter-tips-warning')
.addClass('neter-tips-' + defaults.type)
.css({ marginLeft : -tips.outerWidth() / 2 }); if (showType) {
tips.css({ top : 0 }).show();
} else {
tips.animate({ top : 0 })
.delay(defaults.showTime)
.animate({ top : -tips.outerHeight() }, 'slow');
} return this;
},
/**
* 隐藏插件
* @function
* @name Neter.Tips.prototype.hide
* @return {Neter.Tips} 返回插件的引用
*/
hide : function() {
this.handler.tips && this.handler.tips.animate({ top : -this.handler.tips.outerHeight() }, 'slow'); return this;
},
/**
* 删除插件，删除后不能再调用show进行显示
* @function
* @name Neter.Tips.prototype.remove
* @return {Object} 返回null
*/
remove : function() {
this.handler.tips.empty().remove();
this.handler.tips = null; return null;
}
});
tips.js
这里面也没有什么值得说明的，代码比较简单，相信大家一看就明白。下面就列几种使用方法：
// 1. 直接创建并且显示
new Neter.Tips({ msg : '提交成功'}).render().show(); // 2. 指定类型，支持：success（绿色）、error（红色）、aside（灰色）、warning（棕色）
new Neter.Tips({ msg : '提交数据失败', type : 'error' }).render().show(); // 3. 使用图片作为显示内容
new Neter.Tips({ msg : $('<img>').attr('src', 'info.png') }).render();
也可以从这里单击下载示例文件。
最新文章
- 如何有效地描述软件缺陷(Defect)？
- 我的Sharepoint视图的使用
- XSS 跨站脚本攻击之构造剖析(一)
- acm算法模板（4）
- discuz搬家后报错SQL:SELECT value FROM [Table]vars WHERE name=’noteexists1′的解决办法
- Detect loop in a singly linked list
- 学习Android NestedScroll
- 数独破解c++代码
- JAVA策略模式
- 浅谈JVM与内存分配
- PHP导出excle图片与文字
- Qt 如何使用 QImage 设置指定的颜色为透明色？
- leetcode — flatten-binary-tree-to-linked-list
- .NET版本与CLR版本及兼容性
- Linux常用命令-解压缩篇
- 【软件工程Ⅱ】作业二 |分布式版本控制系统Git的安装与使用
- Eclipse + Maven 安装配置
- 网络管理命令ping和arping
- MySQL DataType--字符串类型
- CentOS总结归纳之基本操作（linux系管与运维一）