hacking and gonzo since 2000
Initializing objects in GreyBox
GreyBox is built with extendability in mind and one can pass an options object to customize the behavior of GreyBox. In this little blog post I will show how it works.
Let's say we want a GB_show method that does not show the loading screen. The standard GB_show looks like this: GB_show = function(caption, url, /* optional */ height, width, callback_fn) {
var options = {
caption: caption,
height: height || 500,
width: width || 500,
fullscreen: false,
callback_fn: callback_fn
}
var win = new GB_Window(options);
return win.show(url);
}
The important aspects, in the above code, are:
Now if one opens greybox/base/base.js one will find the GreyBox class, its init function sets the default behavior, it looks like this: init: function(options) {
this.type = "page";
this.overlay_click_close = false;
this.salt = 0;
this.root_dir = GB_ROOT_DIR;
this.callback_fns = [];
this.reload_on_close = false;
this.src_loader = this.root_dir + 'loader_frame.html';
this.show_loading = true;
AJS.update(this, options);
},
Notice this.show_loading = true, we want to change that to false. So we simply create a new function called GB_myShow: GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
var options = {
caption: caption,
height: height || 500,
width: width || 500,
fullscreen: false,
show_loading: false,
callback_fn: callback_fn
}
var win = new GB_Window(options);
return win.show(url);
}
And that's it, now one can do following:
<a href="http://google.com/" onclick="return GB_myShow('Google', this.href)">Visit Google</a>
Google will be shown instantly, i.e. with out the "Loading..." screen. Scroll down to the bottom of GryeBox examples page to see a demo.
Code
·
JavaScript
·
Tips
•
29. Dec 2006
30 comments so far
|