0

The following code will create a plugin with methods

(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 ));

And we can use like this:

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

But I want to know something like this

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

And then this should be as per plugin that is just using class in markup but not like $('div').pluginclass();

1 Answer 1

0

So instead of creating a function which needs to be called by the user, you just want to run a function on all divs matching your CSS class? This would be no different to writing any normal jQuery script:

(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 ));

As soon as you include the above on the page, all .pluginclass divs will have their background set to green and their colour set to white.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.