jQuery基础教程-第8章-003Providing flexible method parameters

一、The options object

1.增加阴影效果

(function($) {
    $.fn.shadow = function() {
        return this.each(function() {
            var $originalElement = $(this);
            for (var i = 0; i < 5; i++) {
                $originalElement
                    .clone()
                    .css({
                        position: 'absolute',
                        left: $originalElement.offset().left + i,
                        top: $originalElement.offset().top + i,
                        margin: 0,
                        zIndex: -1,
                        opacity: 0.1
                    })
                    .appendTo('body');
            }
        });
    };
})(jQuery);

$(document).ready(function() {
    $('h1').shadow();
});

 

(function($) {
    $.fn.shadow = function(options) {
        return this.each(function() {
            var $originalElement = $(this);
            for (var i = 0; i < options.copies; i++) {
                $originalElement
                    .clone()
                    .css({
                        position: 'absolute',
                        left: $originalElement.offset().left + i,
                        top: $originalElement.offset().top + i,
                        margin: 0,
                        zIndex: -1,
                        opacity: options.opacity
                    })
                    .appendTo('body');
            }
        });
    };
})(jQuery);

Calling this method now requires us to provide an object containing the option values:

$(document).ready(function() {
    $('h1').shadow({
        copies: 3,
        opacity: 0.25
    });
});

 

二、Default parameter values

(function($) {
    $.fn.shadow = function(opts) {
        var defaults = {
            copies: 5,
            opacity: 0.1
        };
        var options = $.extend(defaults, opts);
        // ...
    };
})(jQuery);



$(document).ready(function() {
    $('h1').shadow({
        copies: 3
    });
});

$(document).ready(function() {
    $('h1').shadow();
});

 

三、Callback functions

(function($) {
    $.fn.shadow = function(opts) {
        var defaults = {
            copies: 5,
            opacity: 0.1,
            copyOffset: function(index) {
                return { x: index, y: index };
            }
        };
        var options = $.extend(defaults, opts);
        return this.each(function() {
            var $originalElement = $(this);
            for (var i = 0; i < options.copies; i++) {
                var offset = options.copyOffset(i);
                $originalElement
                    .clone()
                    .css({
                        position: 'absolute',
                        left: $originalElement.offset().left + offset.x,
                        top: $originalElement.offset().top + offset.y,
                        margin: 0,
                        zIndex: -1,
                        opacity: options.opacity
                    })
                    .appendTo('body');
            }
        });
    };
})(jQuery);

$(document).ready(function() {
    $('h1').shadow({
        copyOffset: function(index) {
            return { x: -index, y: -2 * index };
        }
    });
});

 

四、Customizable defaults

To make the defaults customizable, we need to move them out of our method definition and into a location that is accessible by outside code:

(function($) {
    $.fn.shadow = function(opts) {
        var options = $.extend({}, $.fn.shadow.defaults, opts);
        // ...
    };
    $.fn.shadow.defaults = {
        copies: 5,
        opacity: 0.1,
        copyOffset: function(index) {
            return { x: index, y: index };
        }
    };
})(jQuery);

$(document).ready(function() {
    $.fn.shadow.defaults.copies = 10;
    $('h1').shadow({
        copyOffset: function(index) {
            return { x: -index, y: index };
        }
    });
});