The second part of the initialize() method then uses Prototype??™s
Ajax.Responders to show and hide the loader graphic when necessary. Ajax.Responders.
register() enables you to register global event handlers that are called whenever any Ajax
call is initiated or completed. This gives you an excellent and extremely simple method by
which to implement a global loader.
Now that you??™ve finished writing the loader you need to attach it into the page. You can
do this by using Event.addBehavior() once again:
Event.addBehavior({
'#header' : function() {
Loader.initialize(this);
}
});
CHAPTER 9 n A DYNAMIC HELP SYSTEM 201
Here Event.addBehavior() is used in a slightly different way. When you just specify a CSS
selector without the event type, the given function is executed as soon as the DOM is loaded.
You exploit this behavior to initialize the Loader object passing it, which refers to the selected
element, as the parent node to the loader. I added a little CSS in the main.css to make sure
that it appears in the top-right corner of the header; then you??™re done.
When using Low Pro, Event.addBehavior() becomes the glue between the HTML document
and the core JavaScript code. Decoupling JavaScript logic from the document has powerful
advantages for maintainance and if the HTML changes at any point. Instead of searching
through the core code to find out which code affects which element, you just change the CSS
selectors to reflect the new structure of the document.
Pages:
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282