Als Webanwendungsentwickler steht man häufig vor dem Problem, wie fängt man am besten Benutzereingaben ab und validiert diese, bevor die Daten letztendlich in der Datenbank landen.
Javascript bietet hier nur begrenzte Werkzeuge wie alert, prompt oder confirm, die nicht nur in ihrer Benutzung eingeschränkt sind, sondern die Usebility durch z.b. ständiges Aufploppen von irgendwelchen Alerts bei Formularvalidierungen stark herabsetzen. Zu dem passen sie meist in die heutigen Web 2.0 Anwendungen wie ein Holzrad an ein Formel 1 Auto.
Also stellte sich bereits schon vor einem Jahr die Frage, wie integriert man solche Abfrage und Hinweisfenster in eine Anwendung. Die Lösung war vom Prinzip her schnell gefunden, sie hiess Lightbox. Doch Lightbox war entwickelt worden um Bilder darzustellen, keineswegs aber komplexen HTML Code der dann auch noch mit weiteren Teilen der Anwendung interagieren soll. Und Lightbox hatte einen weiteren wesentlichen Nachteil, Multi-Layering war damit nicht möglich.
Deswegen entstand ein Derivat von Lightbox: Lockbox . Da zu der damaligen Zeit der Plugin-Layer von XAJAX noch nicht in dem Maße existierte wie heute, entstand erst jetzt das Plugin dazu für XAJAX.
Die Konfiguration ist ziemlich einfach, neben der XAJAX Klasse werden auch noch die xajaxPlugin sowie xajaxPluginManager Klasse eingebunden und danach noch die modalWindow Klasse:
<?php
$core = './xajax/xajax_core';
require_once( $core . '/xajax.inc.php' );
$xajax = new xajax();
require_once( $core . '/xajaxPlugin.inc.php' );
require_once( $core . '/xajaxPluginManager.inc.php' );
require_once './xajax/xajax_plugins/response/modalWindow/modalWindow.inc.php';
?>
In der ajax-Funktion wird dann einfach auf dem $objResponse-Objekt mit der ->plugin Funktion gearbeitet:
<?php
$objResponse = new xajaxResponse();
$objResponse->plugin( 'clsmodalWindow', 'addWindow', $windowcontent);
?>
Würde man die Funktion wie oben aufrufen würde $windowcontent in der Mitte des Browsers angezeigt werden. Man kann diesem Aufruf noch 3 weitere Parameter mitgeben:
<?php
$objResponse->plugin( 'clsmodalWindow', 'addWindow', $windowcontent, $backgroundcolor, $opacity, $className );
?>
$backgroundcolor ist dabei die Farbe des Layers der die Komplette Anwendung überdeckt,
$opacity ist dieProzentangabe [0-100] des alphawertes dieses Layers und mit
$className kann man dem layer fallsnötig noch eine Klassendefinition mitgeben.
Schliessen kann man die Fenster natürlich auch:
<?php
$objResponse->plugin( 'clsmodalWindow', 'closeWindow');
?>
oder aber man verwendet direkt im HTML-Code die Funktion
onclick="xjxmW.closeWindow()"
Für das Aussehen der Fenster ist natürlich dann jeder selbst verantwortlich, mehr ist aber nicht notwendig.
Zur Demo gehts hier.
| modalWindow_0.9.0_b1.rar | [5.4 KB | RAR] |
 |
|