zoukankan      html  css  js  c++  java
  • 一个简单的消息提示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

  • 相关阅读:
    flutter android 开发笔记(三.flutter和android数据交互)
    flutter android 开发笔记(二.module集成,混合页面)
    flutter android 开发笔记(一.集成)
    svn主干开辟分支、分支合并到主干
    svn主干开辟分支、分支合并到主干
    打包aar时把依赖的jar打包进aar中
    as修改已有项目的svn地址
    Flutter踩坑日记(一)
    android中两个不同名称的app不能同时安装
    aar、jar、so的引入和aar打包包含so、aar、jar文件
  • 原文地址:https://www.cnblogs.com/lmtoo/p/3271890.html
Copyright © 2011-2022 走看看