Basic jquery Tutorial-8th Chapter -003providing Flexible Method parameters

One, the Options object

1. Add Shadow Effect

1(function($) {2$.fn.shadow =function() {3         return  This. each (function() {4             var$originalElement = $ ( This);5              for(vari = 0; I < 5; i++) {6 $originalElement7 . Clone ()8 . css ({9Position: ' Absolute ',TenLeft: $originalElement. Offset ().I, OneTop: $originalElement. Offset (). Top +I, Amargin:0, -ZIndex:-1, -opacity:0.1 the                     }) -. AppendTo (' body '); -             } -         }); +     }; - }) (jQuery); +  A$ (document). Ready (function() { at$ (' H1 '). Shadow (); -});

1(function($) {2$.fn.shadow =function(options) {3         return  This. each (function() {4             var$originalElement = $ ( This);5              for(vari = 0; i < options.copies; i++) {6 $originalElement7 . Clone ()8 . css ({9Position: ' Absolute ',TenLeft: $originalElement. Offset ().I, OneTop: $originalElement. Offset (). Top +I, Amargin:0, -ZIndex:-1, - opacity:options.opacity the                     }) -. AppendTo (' body '); -             } -         }); +     }; -}) (JQuery);

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

1 $ (document). Ready (function() {2     $ (' H1 '). Shadow ({3         copies:3,4         opacity:0.255    }); 6 });

Second, Default parameter values

1(function($) {2$.fn.shadow =function(opts) {3         varDefaults = {4Copies:5,5opacity:0.16         };7         varOptions =$.extend (defaults, opts);8         // ...9     };Ten }) (jQuery); One  A  -  -$ (document). Ready (function() { the$ (' H1 '). Shadow ({ -Copies:3 -     }); - }); +  -$ (document). Ready (function() { +$ (' H1 '). Shadow (); A});

Third, Callback functions

1(function($) {2$.fn.shadow =function(opts) {3         varDefaults = {4Copies:5,5opacity:0.1,6Copyoffset:function(index) {7                 return{x:index, y:index};8             }9         };Ten         varOptions =$.extend (defaults, opts); One         return  This. each (function() { A             var$originalElement = $ ( This); -              for(vari = 0; i < options.copies; i++) { -                 varoffset =Options.copyoffset (i); the $originalElement - . Clone () - . css ({ -Position: ' Absolute ', +Left: $originalElement. Offset ().Offset.x, -Top: $originalElement. Offset (). Top +Offset.y, +margin:0, AZIndex:-1, at opacity:options.opacity -                     }) -. AppendTo (' body '); -             } -         }); -     }; in }) (jQuery); -  to$ (document). Ready (function() { +$ (' H1 '). Shadow ({ -Copyoffset:function(index) { the             return{x:-index, Y:-2 *index}; *         } $     });Panax Notoginseng});

Iv. Customizable Defaults

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

1(function($) {2$.fn.shadow =function(opts) {3         varOptions =$.extend ({}, $.fn.shadow.defaults, opts);4         // ...5     };6$.fn.shadow.defaults = {7Copies:5,8opacity:0.1,9Copyoffset:function(index) {Ten             return{x:index, y:index}; One         } A     }; - }) (jQuery); -  the$ (document). Ready (function() { -$.fn.shadow.defaults.copies = 10; -$ (' H1 '). Shadow ({ -Copyoffset:function(index) { +             return{x:-index, y:index}; -         } +     }); A});

Basic jquery Tutorial-8th Chapter -003providing Flexible Method parameters