E-Books for you

There will be only one global loader on the page, so you can represent it with a singleton
object, which (boringly) will be called Loader. Loader needs to encapsulate three basic functions:
initializing (which includes creating the loader element itself), showing the loader, and
hiding the loader:
Loader = {
initialize: function(parent) {
this.loader =
$img({ src: 'images/loader.gif', alt: 'Loading...', id: 'loader' });
parent.appendChild(this.loader);
this.hide();
CHAPTER 9 n A DYNAMIC HELP SYSTEM 200
Ajax.Responders.register({
onCreate: function() {
Loader.show();
},
onComplete: function() {
Loader.hide();
}
});
},
show: function() {
this.loader.show();
},
hide: function() {
this.loader.hide();
}
};
Most of the work is in the initialize() method. First, the method creates the loader element
itself with Low Pro??™s DOM builder, which provides a shortcut and some cross-browser fixes for
creating DOM node structures. For each HTML tag there is a $xxx() function that will create
that node. If you pass in an object literal as the first argument, the given properties will be set
as attributes on the element. Any other arguments are appended as children to the created
node. The preceding example just creates a single tag, but take a look at the following
example to get an idea of how a larger node structure might go together:
var product = $div({ 'class' : 'product' },
$h2('Sprocket 47'),
$p({ 'class' : 'description' }, 'The worlds best sprocket'),
$a({ href : '/sprockets/74'}, 'Read more')
);
Back to the Loader; after creating the loader image element, append it onto the passed
parent-child nodes.


Pages:
257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281