一个简单的消息提示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&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);

 

 2013-08-21

 

 下载地址：http://pan.baidu.com/share/link?uk=641094506&shareid=3987044409