0

我需要编写一个可以以类似于以下方式使用的插件：这不是我真正使用它的目的，但这是我测试的开始，以获得全面的理解。

html:

<div id="div"></div>

Javascript：

var plugin = $('#div').plugin();

plugin.message.set('hi');
alert(plugin.message.get());

我缺少的是能够在元素上创建插件的一个实例，并使用它来获取和设置属性：

我假设我会设置如下所示，有人可以填补空白吗？例如，我不确定如何调用方法“get”以及如何传递参数...

$.fn.plugin = function () {
    var target = this;

    methods: {

        var message = {
            get: function () {
                return $(target).text();
            },
            set: function () {
                $(target).text(message);
            },
        };

    };

};
4

1 回答 1

2

这是一个常用的 jQuery 插件基本骨架：

(function($)
{
    var parameters = 
    {
        myDefault: "default"
    };

    var methods = {
        init : function(options) {
            return this.each(function() {
                parameters = $.extend(parameters, options);
            });
        },
        myMethod: function(){}
    };

    $.fn.myPlugin = function(methodOrOptions) {
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.myPlugin' );
        }    
    };

})(jQuery);

以这种方式使用它：

在里面

$('#myDiv').myPlugin({
    myDefault: "override"
});

这将调用该init方法，在这种情况下会更改默认参数。

调用方法

$('#myDiv').myPlugin('myMethod');

在这里查看更多信息：http ://learn.jquery.com/plugins/basic-plugin-creation/

于 2013-07-15T13:07:58.853 回答