自动初始化自定义jQuery插件

时间:2017-01-06 16:02:15

标签: javascript jquery html css jquery-plugins

我正在使用jQuery Boilerplate作为起点创建新的手风琴插件。

我是一个jQuery新手,当涉及到构建插件时,但它目前看起来效果很好。

用户可以在元素本身($('elem').plugin({"option":"value"}))上以传统方式(<div data-plugin='{"option":"value"}'>)或内联初始化插件。

问题是需要在插件代码之外调用插件,在每个方法的document ready内(例如 - $('elem').plugin())。

我想用这个插件做的是让插件自动初始化标记中的set元素,例如<div data-accordion>。我已经尝试在jQuery包装器中将元素包装在document ready内,但它似乎无法正常工作。

样板的代码是:

;( function( $, window, document, undefined ) {

    "use strict";

        var pluginName = "defaultPluginName",
            defaults = {
                propertyName: "value"
            };

        function Plugin ( element, options ) {
            this.element = element;
            this.settings = $.extend( {}, defaults, options );
            this._defaults = defaults;
            this._name = pluginName;
            this.init();
        }

        $.extend( Plugin.prototype, {
            init: function() {
                this.yourOtherFunction( "jQuery Boilerplate" );
            },
            yourOtherFunction: function( text ) {
                $( this.element ).text( text );
            }
        } );

        $.fn[ pluginName ] = function( options ) {
            return this.each( function() {
                if ( !$.data( this, "plugin_" + pluginName ) ) {
                    $.data( this, "plugin_" +
                        pluginName, new Plugin( this, options ) );
                }
            } );
        };

} )( jQuery, window, document );

希望有人可以提供帮助。

谢谢:)

0 个答案:

没有答案