返回新对象的jquery插件

时间:2013-03-04 23:34:10

标签: javascript jquery object jquery-plugins

我正在创建我的第一个jQuery插件,并希望创建jQuery对象,但希望能够控制刚刚创建的对象......

我按照此处推荐的格式构建我的插件:http://docs.jquery.com/Plugins/Authoring

这是我的测试代码:

(function($){

    var $this = $(this);

    var methods = {
        init : function( options ) {

        //  methods.createDiv();

            $this = $('<div>TEST CONTENT</div>')
                .attr({ 'id':'test' })
                .css({'color':'white','backgroundColor': 'red'})
                .appendTo("body");

            setTimeout(function(){
                    methods.green();
                },
                3000
            );
            return $this;
         },

        green : function( ) {
            $this.css({'backgroundColor': 'green'});
        },
        blue : function( ) {
            $this.css({'backgroundColor': 'blue'});
        }
    };

    $.fn.myPlugin = 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.tooltip' );
        }
    };

})( jQuery );


$(document).ready(function () { 
    var myTest = $.fn.myPlugin();
    myTest.blue();
});

最终,我希望能够使用myTest变量控制新创建的div,但它不起作用。我确信有一些我遗漏的明显碎片和我正在犯的错误,但这就是我在这里发帖的原因。这是我的第一个插件,所以如果有人能帮我把这个测试代码启动并运行,我会很感激。目前,firebug报告:“TypeError:myTest.blue不是函数”

1 个答案:

答案 0 :(得分:-1)

将您的方法调用为:

myTest.myPlugin("blue");

以下是演示:http://jsfiddle.net/5p2Ba/

blue不是jQuery对象的方法。您只是使用闭包将methods对象绑定到模块中。