Annak idején Lokesh Dhakar megalkotta a Lightbox JS-t, ami egy nagyon látványos képmegjelenítő volt, majd megszületett a Lightbox2. Használata egyszerű volt, mivel a képnézegetőt DOM manipulációval építette fel, így a felhasználónak igazán semmi dolga nem maradt. Majd megjelentek a különböző klónok is:
- Lightbox Gone Wild – allows non-image content w/AJAX calls – by Chris Campbell
- Leightbox – allows non-image content w/inline Divs – by Simon de Haan
- Greased Lightbox – by Joe Lencioni based on the work of Gavin Montague
- WordPress Plugin – by Safirul Alredha
- Drupal Module – by Mark Ashmead
- Flashlightbox – allows you to call the script from within a Flash file – by Kelli Shaver
- Flashlightbox v2 – updated with bug fixes and caption support – by Jeff Garczewski
Ez az úgy nevezett Gray Box technológia adta az ötletet a Modalbox orosz megalkotójának is. A szintén prototype-on és script.aculo.us fájlokon alapuló inline popup alkalmazással könnyedén le tudunk kódolni például egy user regisztrációt oldalujratöltés nélkül. Az ablak tartalmát külső html fájlok alkotják, melyet a prototype Ajax.Request osztálya kér le:
new Ajax.Request( this.url, { method: this.options.method.toLowerCase(), parameters: this.options.params,
onComplete: function(transport) {
var response = new String(transport.responseText);
this.MBcontent.innerHTML = response;
this.focusableElements = this._findFocusableElements();
this._moveFocus(); // Setting focus on first 'focusable' element in content (input, select, textarea, link or button)
this.event("afterLoad"); // Passing callback
response.extractScripts().map(function(script) {
return eval(script.replace("<!--", "").replace("// -->", ""));
}).bind(window);
Felmerül a kérdés, hogy miért nem az Ajax.Updater-t használja, mert akkor nem kéne innerHTML-ezni. De akkor meg az eredmény divből kéne visszaszedni a tartalmat a későbbi feldolgozáshoz (eval). Tehát csak kéne. Az alábbi minta a kapott html kódrészletét mutaja, láthatjuk, hogyan készíti elő a következő boxot, és a Cancel gombra való kattintást:
<input type="button" value="Continue..." onclick="Modalbox.show('Simple form example', 'frame-demo-step2
.html?v=1', {width: 500, height: 480 });"> or <a href="#" title="Cancel & close dialog" onclick="Modalbox
.hide({afterHide: function() { alert('You pressed cancel. This is the afterHide callback example.')}
}); return false;">Cancel & close</a>
Vélemyényünk szerint ez a callback megoldás nagyon jól ki van találva. Röviden ennyi, aki kedvet kapott hozzá, az letöltheti innen, a Google Code-on túrhat további információkért.
Visszajelzés: dev2 - webfejlesztés