Question

以下代码将使用方法

创建一个插件

(function ( $ ) {

    $.fn.greenify = function( options ) {

        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white"
        }, options );

        // Greenify the collection based on the settings variable.
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });

    };

}( jQuery ));

我们可以这样使用：

$( "div" ).greenify({
    color: "orange"
});

但我想知道这样的事情

<div class="pluginclass"></div>

然后这应该是插件，只是在标记中使用类，但不像$('div').pluginclass();

Answer 1

因此，您只想在与CSS类匹配的所有div上运行函数，而不是创建需要用户调用的函数？这与编写任何普通的jQuery脚本没什么不同：

(function ( $ ) {
    var settings = { color: "white", backgroundColor: "green" };
    $(".pluginclass").each(function() {
        // Do work
    };
    // Greenify the collection based on the settings variable.
    $(".pluginclass").css({
        color: settings.color,
        backgroundColor: settings.backgroundColor
    });

}( jQuery ));

只要在页面上包含上述内容，所有.pluginclass div的背景都会设置为绿色，并且颜色会设置为白色。

如何用类创建一个插件？

1 个答案: