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