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

 

 

你可能感兴趣的:(jquery插件)