Extend jQuery plugin to change configuration

Question

I created a simple jQuery plugin to change an element to blue, and can pass it a parameter to change the element to a given color.

I now wish to create a new plugin which changes the color to yellow without having to pass the color as a parameter. I've read https://stackoverflow.com/a/4414356/1032531, but it seems to describe adding a method to a object.

How is this best accomplished?

http://jsbin.com/xedohu/1/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Extend jQuery Plugin</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            (function($){
                var defaults = {
                    'color'  : 'blue'
                };

                var methods = {
                    init : function (options) {
                        var settings = $.extend({}, defaults, options);
                        return this.each(function () {
                            $(this).css('color',settings.color);
                        });
                    },
                    destroy : function () {
                        return this.each(function () {});
                    }
                };

                $.fn.changeColor = 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.changeColor');
                    }    
                };
                }(jQuery)
            );

            jQuery.fn.extend({
                changeColorToYellow: function() {
                    //What do I do?
                    //$.changeColor({color:'yellow'})
                }
            });

            $(function() {
                $('#myElement1').changeColor();
                $('#myElement2').changeColor({color:'red'});
                $('#myElement3').changeColorToYellow();
            });
        </script>

    </head>
    <body>
        <p id='myElement1'>myElement1</p>
        <p id='myElement2'>myElement2</p>
        <p id='myElement3'>myElement3</p>
    </body>
</html>

@jcubic Thanks. Seems to work. Is this considered a proper approach? For my real application, I need to pass multiple parameters, and am just trying to make my script more concise. See http://jsbin.com/folutu/1/ — user1032531, Apr 09 '15 at 12:41

score 0 · Accepted Answer · answered Apr 09 '15 at 12:45

You can use this.changeColor({color: 'yellow'}) inside changeColorToYellow. Providing no options will make your plugin do one thing right. This is okay as long as you're not planning to create multiple plugins just trying to do the same thing with different colors.

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Extend jQuery Plugin</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            (function($){
                var defaults = {
                    'color'  : 'blue'
                };

                var methods = {
                    init : function (options) {
                        var settings = $.extend({}, defaults, options);
                        return this.each(function () {
                            $(this).css('color',settings.color);
                        });
                    },
                    destroy : function () {
                        return this.each(function () {});
                    }
                };

                $.fn.changeColor = 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.changeColor');
                    }    
                };
                }(jQuery)
            );

            jQuery.fn.extend({
                changeColorToYellow: function() {
                    this.changeColor({color: 'yellow'});
                }
            });

            $(function() {
                $('#myElement1').changeColor();
                $('#myElement2').changeColor({color:'red'});
                $('#myElement3').changeColorToYellow();
            });
        </script>

    </head>
    <body>
        <p id='myElement1'>myElement1</p>
        <p id='myElement2'>myElement2</p>
        <p id='myElement3'>myElement3</p>
    </body>
</html>

Instead of creating method `$.changeColorToYellow()`, could it be something like `$.changeColor.ToYellow()`? — user1032531, Apr 09 '15 at 12:49
That's also possible if you want to call it like that. You can change changeColor to have multiple methods such as toYellow or toBlue. With this, simply initialize it as {} then add functions to the object. — Joshua Arvin Lat, Apr 09 '15 at 13:06

Extend jQuery plugin to change configuration

1 Answers1