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