扩展jQuery插件以更改配置

Extend jQuery plugin to change configuration

本文关键字：配置 jQuery 插件 扩展      更新时间：2023-09-26

我创建了一个简单的jQuery插件来将元素更改为蓝色，并可以向它传递一个参数来将元素改为给定的颜色。

我现在希望创建一个新的插件，将颜色更改为黄色，而不必将颜色作为参数传递。我读过https://stackoverflow.com/a/4414356/1032531，但它似乎描述了向对象添加方法。

这是如何最好地完成的？

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>

您可以在changeColorToYellow中使用this.changeColor（｛color:'yellow'｝）。不提供任何选项将使您的插件做一件正确的事情。只要你不打算创建多个插件，只是想用不同的颜色做同样的事情，这是可以的。

代码

<!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>
相关文章：