Jquery plugin template POPUP Plugin

以一个popup 的例子，学习怎么写jquery插件。插件 实例化时候 包括传属性，函数。类似jqueryUI 的使用感觉。

实现效果类似 android 的 toast 的效果。 显示提示消息，过几秒后消失。

是用方法与 JQuery UI 一样。

$('#aa').popup({
               position:{
                   x:100,
                   y:200
               },
               duration:1000,
               text:'大家好',
               hide:function(duration) {
                   console.log(this);
                   alert('fadeout duraion' + duration);
               }
           });

代码讲解：

首先用jquery选择器，选择一个元素，来当作popup的容器。之后就是利用plugin的方法来穿参数。可以穿的参数有：

postion: popup显示的 position坐标

duration: popup显示的时间

text: 显示的文字

hide: popup div 隐藏后的回调函数

 

插件代码如下：

(function($) {
    var methods = {
        init:function(options) { //初始化一个 jqueryplugin实例
            return this.each(function() {
                var instance = this;  //获取当前实例
                var isInitialized = $(instance).data("isInitialized");
                if(isInitialized == null) { //判断是否实例化过

                    $(instance).data('options', options);

                    //给 插件对象 附加css
                    render(instance);

                    $(instance).data("isInitialized", 'true');
                }
            })
        },

        show:function() {
            var options = $(this).data('options'),
                duration = options.duration,
                that = this;

            $(this).fadeIn(duration, function() {
                that.fadeOut(duration, function() {
                    // 给初始化时候的  hide函数 传值
                    if(options.hide != undefined && options.hide != null) {
                        options.hide(duration);
                    }

                });
            });
        }
    };

    //private
    var popFadeOut = function(duration) {

        setTimeout(function() {

        }, duration);

    };

    //private
    var render = function(instance) {
        var $self = $(instance),
            options = $self.data('options'),
            duration = options.duration,
            position = options.position,
            isTop = options.isTop,
            text = options.text;

        var cssObject = new Object();
        cssObject['height'] = '50px';
        cssObject['width'] = '200px';
        cssObject['position'] = 'absolute';
        cssObject['left'] = position.x || 300;
        cssObject['top'] = position.y || 100;
        cssObject['background'] = 'black';
        cssObject['color'] = 'white';
        cssObject['display'] = 'none';
        if(isTop) {
            cssObject['zIndex'] = 999999;
        }
        $self.text(text);

        $self.css(cssObject);

    };

    /**
     * popUp插件构造函数。
     *
     * version 1.0
     * Author: Yuqiao Gao 3/19/2013.
     */
    $.fn.popup = function(method) {
        if(methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if(typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jquery.popup');
        }
    };
})(jQuery);