一个简单的消息提示jquery插件

89 阅读 0 评论 59 点赞

我是靠谱客的博主单薄巨人，这篇文章主要介绍一个简单的消息提示jquery插件，现在分享给大家，希望可以做个参考。

最近在工作中写了一个jquery插件，效果如下：

就是一个简单的提示消息的一个东西，支持最大化、最小化、关闭、自定义速度、自定义点击事件，数据有ajax请求和本地数据两种形式。还有不完善的地方，只做了最基本的功能，等有了修改再上传上来。

复制代码

/**
* 消息提示<br>
* 自动生成的html结构如下:
*
* <div class="title">消息提醒 <div class="toggle" style=""></div> <div
* class="close"></div> </div> <div class="content">
* <ul>
* <li>1、<a href="message.html">八成土地底价成交</a></li>
* <li>2、<a href="message2.html">国有建设用地使用权挂牌出让公告</a></li>
* <li>3、<a
* href="message3.html">您有一笔成本结算单（2013-000666）需要审批。2013-09-15 9:30</a></li>
* </ul>
* </div>
**/
/**
* 消息提示器
*
* 参数说明
*
* @param {Object}
*
title 提示标题：默认为消息提醒
* @param {Object}
*
items 提示数据：默认为undefined <br>
*
items中对象必须的属性包括：id，link，text，其他属性可以任意添加.
*
当参数中提供了ajax的url时，不会使用items中的数据
* @param {Object}
*
ajax 提示数据：默认为{type : 'POST', dataType : 'json', url : '' }
*
参数与jQuery中的参数一致，但dataType必须为json，返回的数据格式必须与items属性的格式一致<br>
* @param {Object}
*
initShow 布尔值，是否在页面加载时就显示，默认为true
* @param {Object}
*
onClose 函数，this表示当前的reminder控件，在点击关闭按钮时会掉用此回调函数
* @param {Object}
*
slideDuration 数值，最小化或最大化时的速度，默认为500
* @param {Object}
*
onToggle 函数，最小化或最大化时的回调，this表示当前的reminder控件，在点击最小化或者最大化按钮时调用
* @param {Object}
*
fadeDuration 数值，关闭按钮点击后窗口淡入淡出的速度，默认为1000
* @param {Object}
*
onItemClick 函数，在点击数据项时调用，this表示当前的reminder控件，参数为数据项对象
*
* @author Lee
* @since 2013-8-19 <br>
*/
(function($, undefined) {
$.fn.reminder = function(options, params) {
if (typeof options == 'string') {
if (this.length > 0) {
}
return;
}
var opts = $.extend(true, {}, $.fn.reminder.defaults, options);
return this.each(function() {
$(this).data('reminder.opts', opts);
_init.call($(this));
});
};
function _init() {
_initHTML.call(this);
_initData.call(this);
_initEvent.call(this);
}
function _initHTML() {
var opts = this.addClass('reminder').data('reminder.opts'), container = $('<ul></ul>');
$('<div></div>').addClass('title').text(opts.title).append(
'<div class="toggle"></div>').append(
'<div class="close"></div>').appendTo(this);
$('<div></div>').addClass('content').append(container).appendTo(this);
}
function _initData() {
var opts = this.data('reminder.opts'), items = opts.items;
if (opts.ajax.url) {
var $this = this;
$.ajax($.extend(true, {}, opts.ajax, {
success : function(items) {
_appendItem.call($this, items);
opts.ajax.success.call(this, items);
}
}));
} else {
_appendItem.call(this, items);
}
}
function _appendItem(items) {
var container = this.find('.content>ul');
if (items && items instanceof Array) {
for ( var i = 0; i < items.length; i++) {
var li = $('<li></li>').appendTo(container), item = items[i];
$('<a></a>').attr('link', item.link).attr('id', item.id).text(
item.text).data('data', item).appendTo(li);
}
}
}
function _initEvent() {
var $this = this;
var opts = this.data('reminder.opts');
this.delegate('.close', 'click', function() {
_close.call($this);
}).delegate('.toggle', 'click', function() {
_toggle.call($this);
}).delegate('.content li a', 'click', function() {
var data = $(this).data('data');
_itemClick.call($this, data);
});
if (opts.initShow) {
this.find('.content').slideDown(opts.slideDuration);
}
}
function _close() {
var opts = this.data('reminder.opts');
this.fadeOut(opts.fadeDuration);
opts.onClose.call(this);
}
function _toggle() {
var opts = this.data('reminder.opts'), $this = this;
this.find('.content').slideToggle(opts.slideDuration, function() {
$this.find('.toggle').toggleClass('min');
});
opts.onToggle.call(this);
}
function _itemClick(item) {
var opts = this.data('reminder.opts');
opts.onItemClick.call(this, item);
}
$.fn.reminder.defaults = {
title : '消息提醒',
items : [ {
id : '',
link : '',
text : '',
data : undefined
} ],
ajax : {
type : 'POST',
dataType : 'json',
url : ''
},
initShow : true,
onClose : $.noop,
slideDuration : 1000,
onToggle : $.noop,
fadeDuration : 500,
onItemClick : $.noop
};
})(jQuery);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
/**
* 消息提示<br>
* 自动生成的html结构如下:
*
* <div class="title">消息提醒 <div class="toggle" style=""></div> <div
* class="close"></div> </div> <div class="content">
* <ul>
* <li>1、<a href="message.html">八成土地底价成交</a></li>
* <li>2、<a href="message2.html">国有建设用地使用权挂牌出让公告</a></li>
* <li>3、<a
* href="message3.html">您有一笔成本结算单（2013-000666）需要审批。2013-09-15&nbsp;9:30</a></li>
* </ul>
* </div>
**/
/**
* 消息提示器
*
* 参数说明
*
* @param {Object}
*
title 提示标题：默认为消息提醒
* @param {Object}
*
items 提示数据：默认为undefined <br>
*
items中对象必须的属性包括：id，link，text，其他属性可以任意添加.
*
当参数中提供了ajax的url时，不会使用items中的数据
* @param {Object}
*
ajax 提示数据：默认为{type : 'POST', dataType : 'json', url : '' }
*
参数与jQuery中的参数一致，但dataType必须为json，返回的数据格式必须与items属性的格式一致<br>
* @param {Object}
*
initShow 布尔值，是否在页面加载时就显示，默认为true
* @param {Object}
*
onClose 函数，this表示当前的reminder控件，在点击关闭按钮时会掉用此回调函数
* @param {Object}
*
slideDuration 数值，最小化或最大化时的速度，默认为500
* @param {Object}
*
onToggle 函数，最小化或最大化时的回调，this表示当前的reminder控件，在点击最小化或者最大化按钮时调用
* @param {Object}
*
fadeDuration 数值，关闭按钮点击后窗口淡入淡出的速度，默认为1000
* @param {Object}
*
onItemClick 函数，在点击数据项时调用，this表示当前的reminder控件，参数为数据项对象
*
* @author Lee
* @since 2013-8-19 <br>
*/
(function($, undefined) {
$.fn.reminder = function(options, params) {
if (typeof options == 'string') {
if (this.length > 0) {
}
return;
}
var opts = $.extend(true, {}, $.fn.reminder.defaults, options);
return this.each(function() {
$(this).data('reminder.opts', opts);
_init.call($(this));
});
};
function _init() {
_initHTML.call(this);
_initData.call(this);
_initEvent.call(this);
}
function _initHTML() {
var opts = this.addClass('reminder').data('reminder.opts'), container = $('<ul></ul>');
$('<div></div>').addClass('title').text(opts.title).append(
'<div class="toggle"></div>').append(
'<div class="close"></div>').appendTo(this);
$('<div></div>').addClass('content').append(container).appendTo(this);
}
function _initData() {
var opts = this.data('reminder.opts'), items = opts.items;
if (opts.ajax.url) {
var $this = this;
$.ajax($.extend(true, {}, opts.ajax, {
success : function(items) {
_appendItem.call($this, items);
opts.ajax.success.call(this, items);
}
}));
} else {
_appendItem.call(this, items);
}
}
function _appendItem(items) {
var container = this.find('.content>ul');
if (items && items instanceof Array) {
for ( var i = 0; i < items.length; i++) {
var li = $('<li></li>').appendTo(container), item = items[i];
$('<a></a>').attr('link', item.link).attr('id', item.id).text(
item.text).data('data', item).appendTo(li);
}
}
}
function _initEvent() {
var $this = this;
var opts = this.data('reminder.opts');
this.delegate('.close', 'click', function() {
_close.call($this);
}).delegate('.toggle', 'click', function() {
_toggle.call($this);
}).delegate('.content li a', 'click', function() {
var data = $(this).data('data');
_itemClick.call($this, data);
});
if (opts.initShow) {
this.find('.content').slideDown(opts.slideDuration);
}
}
function _close() {
var opts = this.data('reminder.opts');
this.fadeOut(opts.fadeDuration);
opts.onClose.call(this);
}
function _toggle() {
var opts = this.data('reminder.opts'), $this = this;
this.find('.content').slideToggle(opts.slideDuration, function() {
$this.find('.toggle').toggleClass('min');
});
opts.onToggle.call(this);
}
function _itemClick(item) {
var opts = this.data('reminder.opts');
opts.onItemClick.call(this, item);
}
$.fn.reminder.defaults = {
title : '消息提醒',
items : [ {
id : '',
link : '',
text : '',
data : undefined
} ],
ajax : {
type : 'POST',
dataType : 'json',
url : ''
},
initShow : true,
onClose : $.noop,
slideDuration : 1000,
onToggle : $.noop,
fadeDuration : 500,
onItemClick : $.noop
};
})(jQuery);