jQuery in Action
210
CHAPTER 7
Extending jQuery with custom plugins
(function($){
$.fn.photomatic = function(callerSettings) {
};
})(jQuery);
This defines our initially empty wrapper function, which (as expected from our
syntax description) accepts a single hash parameter named
syntax description) accepts a single hash parameter named
callerSettings
. First,
within the body of the function, we merge these caller settings with the default
settings as described by table 7.1. This will give us a single settings object that we
can refer to throughout the remainder of the method.
settings as described by table 7.1. This will give us a single settings object that we
can refer to throughout the remainder of the method.
We perform this merge operation using the following idiom (that we've
already seen a few times):
var settings = $.extend({
photoElement: '#photomaticPhoto',
transformer: function(name) {
return name.replace(/thumbnail/,'photo');
},
nextControl: null,
previousControl: null,
firstControl: null,
lastControl: null
}, callerSettings||{});
After the execution of this statement, the
settings
variable will contain the values
supplied by the caller, with defaults supplied by the inline hash object. But we're
not done with
not done with
settings
yet. Consider the
photoElement
property; it might contain
a string specifying a jQuery selector (either the default or one supplied by the
page authors), or it could be an object reference. We want to normalize that to
something we know how to deal with. By adding the statement
page authors), or it could be an object reference. We want to normalize that to
something we know how to deal with. By adding the statement
settings.photoElement = $(settings.photoElement);
we create a wrapped set containing the photo element (or possibly multiple ele-
ments if the page authors so chose). Now, we have something consistent that we
know how to deal with.
ments if the page authors so chose). Now, we have something consistent that we
know how to deal with.
We're also going to need to keep track of a few things. In order to know
what concepts like next image and previous image mean, we need not only a list
of the thumbnail images but also an indicator that identifies the current image
being displayed.
of the thumbnail images but also an indicator that identifies the current image
being displayed.
The list of thumbnail images is the wrapped set that this method is operating
on--or, at least, it should be. We don't know what the page authors collected in
the wrapped set, so we want to filter it down to only image elements; we can easily
do this with a jQuery selector. But where should we store the list?
the wrapped set, so we want to filter it down to only image elements; we can easily
do this with a jQuery selector. But where should we store the list?