De:Tutorien:Einen Lade-Hinweis erstellen
De:Tutorien:Einen Lade-Hinweis erstellen
Eine der einfachsten und zugleich wichtigsten Aufgabe von xajax liegt in der Bereitstellung von 'Lade...'-Nachrichten als sichtbarer Information, wenn xajax eine Server-Anfrage ausführt. xajax stellt dazu zwei Funktionen bereit, die Sie überschreiben können, um dies zu ermöglichen: xajax.loadingFunction() und xajax.doneLoadingFunction().
In diesem Tutorial zeigen wir Ihnen, wie Sie eine Lade-Nachricht erstellen, um Ihre Freund zu erstaunen und Ihre Feinde zu beeindrucken. Bereiten Sie sich auf den Kampf vor!
Zuerst erstellen wir eine einfache xajax-Seite, die eine wirklich langsame Funktion enthält.
<?php require("xajax.inc.php"); function slow_function() { $objResponse = new xajaxResponse(); sleep(2); // Wir tun zwei Sekunden lang gar nichts $objResponse->addAlert("All done"); return $objResponse; } $xajax = new xajax(); $xajax->registerFunction('slow_function'); $xajax->processRequests(); ?><html> <head> <title>Loading Bar Demo</title> <? $xajax->printJavascript(); ?> </head> <body> <input type="button" onclick="xajax_slow_function();" value="Slow Function" /> </body> </html>
So, jetzt haben wir eine langsame Funktion samt zugehörigem Button. Klicken Sie auf den Button und sehen Sie, wie schmerzhaft es ist, dass es keine sichtbare Rückmeldung gibt. Blöd, oder?
Jetzt kommt der interessante Teil. Zuerst erstellen wir einen div-Bereich, in dem unsere Lade-Nachricht erscheinen wird:
<div id="loadingMessage" style="font-size: 22px; display: none;"> Loading... </div>
Haben Sie das "display: none;" im style-Attribug des Divs bemerkt? Das brauchen wir, da wir nicht zeigen wollen, dass wir eine Funktion laden bis wir tatsächlich eine Funktion laden.
Als nächstes brauchen wir JavaScript-Code, um den Lade-Div einzublenden, wenn es Arbeit gibt. Das machen wir so:
<script type="text/javascript">
<!--
xajax.loadingFunction =
function(){xajax.$('loadingMessage').style.display='block';};
// --></script>
Der HTML-Code sieht nun also wie folgt aus:
<html> <head> <title>Loading Bar Demo</title> <? $xajax->printJavascript(); ?> </head> <body> <script type="text/javascript"> <!-- xajax.loadingFunction = function(){xajax.$('loadingMessage').style.display='block';}; // --></script> <input type="button" onclick="xajax_slow_function();" value="Slow Function" /> <div id="loadingMessage" style="font-size: 22px; display: none;"> Loading... </div> </body> </html>
Klicken Sie auf den Button und schauen Sie, was passiert. Stimmt, wir sehen die Lade-Nachricht erscheinen. Aber sie verschwindet noch nicht wieder. Also überschreiben wie nochmal eine von xajax-Funktionen, um die Lade-Nachricht zu verstecken, wenn wir fertig sind.
Nur zum Wohle der Vielfalt machen wir die Sache anders, wenn wir mit dem Laden fertig sind:
<script type="text/javascript">
<!--
function hideLoadingMessage()
{
xajax.$('loadingMessage').style.display = 'none';
}
xajax.doneLoadingFunction = hideLoadingMessage;
// --></script>
Jetzt haben wir also Funktionen zum Anzeigen und zum Verstecken der Lade-Nachricht erstellt. Klicken Sie auf den Button und -- wenn alles gut geht -- sollten Sie die Lade-Nachricht sehen, die dann nach zwei Sekunden wieder verschwindet.
Gut gemacht! Sie haben gerade einen Lade-Hinweis erstellt. :)
Die fertige Seite zum Vergleich:
<?php require("xajax.inc.php"); function slow_function() { $objResponse = new xajaxResponse(); sleep(2); // Wir tun zwei Sekunden lang gar nichts $objResponse->addAlert("All done"); return $objResponse; } $xajax = new xajax(); $xajax->registerFunction('slow_function'); $xajax->processRequests(); ?><html> <head> <title>Loading Bar Demo</title> <? $xajax->printJavascript(); ?> </head> <body> <script type="text/javascript"> <!-- xajax.loadingFunction = function(){xajax.$('loadingMessage').style.display='block';}; function hideLoadingMessage() { xajax.$('loadingMessage').style.display = 'none'; } xajax.doneLoadingFunction = hideLoadingMessage; // --></script> <input type="button" onclick="xajax_slow_function();" value="Slow Function" /> <div id="loadingMessage" style="font-size: 22px; display: none;"> Loading... </div> </body> </html>
