Dateiversion:
|
diesen Beitrag diskutieren,ergänzen, eine Frage stellen |
|
|
Homepagebau |
|
|
||
|
|
||||||
PopUp - Windows
Schwierigkeit: für Anfänger
Pop Up einblenden (Skript-Beispiel):
Beschreibung:
Sie kennen doch die kleinen, lästigen PopUp-Windows... Ich zeige ihnen jetzt, wie sie mit JavaScript ein neues Fenster aufrufen und ihren Wünschen entsprechend anpassen. (und hoffe, dass sie ihr Wissen nicht einsetzen um ihre Besucher zu ärgern *gg*)
Syntax:
Die Syntax lautet:
window.open("url", "target", "fullscreen=bool, toolbar=bool, location=bool, directories=bool, status=bool, personalbar=bool, menubar=bool, scrollbars=bool, resizable=bool, width=zahl, height=zahl")Dieser Aufruf setzt die Eigenschaften für ein Objekt vom Typ Window (also einem Fenster). Geht der Verweis auf ein nicht existierendes Objekt, so wird ein neues mit diesem Namen (hier bezeichnet durch target) erzeugt.
Der Text "bool" steht für einen Wahrheitswert ("1" für wahr oder "0" für falsch) und "zahl" ist durch eine positive ganze Zahl zu ersetzen.
Im Einzelnen:
url - gibt die URL der Seite an, die in dem Fenster geladen werden soll. Das muss nicht unbedingt eine Website sein. Sollten sie ein leeres Fenster erzeugen wollen, geben sie "about:blank" ein.
target - der interne Name des Objektes (hier des Fensters) das gemeint ist. Damit können sie zum Beispiel ein 'Refresh' auf ein vorhandenes Fenster anwenden, wenn sie dessen Namen kennen (weil sie es zum Beispiel vorher selbst erzeugt haben?). Möchten sie prinzipiell ein neues Fenster öffnen, dann wählen sie als target "_blank". Es gibt noch einige andere Standardtargets: "_self" bezeichnet den aktuellen Frame in dem der Befehl aufgerufen wurde, "_top" die gesamte Seite (wichtig bei Frames - bei 'normalen' Seiten gibt es keinen Unterschied zu "_self") und "_parent", um den Frame zu bezeichnet, der dem aktuellen Frame übergeordnet ist.
Kommen wir zum Parameterstring. Mit diesem Text werden die näheren Eigenschaften des Fensters gesetzt. Die Angabe ist optional. Fehlt dieser String, werden Standardwerte verwendet.
Für jede beeinflussbare Fenstereigenschaft existiert ein Schlüsselwort.
Implizite Variante: Jedes Schlüsselwort das in der Liste auftaucht wird mit "true" (wahr) bewertet und das dadurch symbolisierte Element wird angezeigt. Jedes fehlende Schlüsselwort wird dagegen automatisch mit "false" (falsch) belegt und das symbolisierte Element ausgeblendet.
Explizite Variante: Wem das zu kompliziert oder unübersichtlich ist, der hat außerdem die Möglichkeit, einfach alle Schlüsselwörter anzugeben und explizit zu belegen. Das heißt, indem hinter jedem Schlüsselwort der Wert ("=0" für nicht anzeigen und "=1" für anzeigen) angegeben wird.
Liste der Schlüsselwörter:
fullscreen - zeigt die Seite im Vollbildmodus an (nur Internet-Explorer ab Version 6)
toolbar - bezeichnet die Menüleiste ('Weiter'-, 'Zurück'-Button etc.) am oberen Bildschirmrand des Browser.
location - Eingabefeld für die URL
directories - Hotlinks oder Channelleiste (je nach Browser)
status - die Statuszeile
personalbar - einblendbare, persönliche Menüleiste
menubar - Menüleiste
scrollbars - die Scrollleiste(n) am rechten und unteren Bildschirmrand
resizable - bei Angabe, kann der Nutzer die Größe des Fensters verändern, ansonsten nicht.
width - dieser Wert gibt die Breite des Fensters in Pixeln an
height - dieser Wert gibt die Höhe des Fensters in Pixeln an
BEISPIEL ...
<input type="button" value="Testen!" name="Test"
onClick="window.open('about:blank', '_blank', 'resizable, width=300, height=280')">
hier wird der Befehl durch ein Event ausgelöst... "onClick" gibt an, dass der in Anführungsstrichen stehende Quellcode ausgeführt werden soll, sobald das Objekt - hier ein Button - angeklickt wird. "onClick" wird dabei in der Literatur auch als "Ereignis" (engl. Event) und das ausgeführte Skriptfragment als "Ereignisbehandlung" (engl. Eventhandler) bezeichnet. Das Gleiche funktioniert natürlich auch mit allen anderen anklickbaren Objekten wie zum Beispiel Grafiken. Bitte beachten: durch die Syntax erscheinen die Parameter hier in Hochkommata und nicht mehr in Anführungsstrichen wie normalerweise im HTML gefordert. (JavaScript kann wahlweise mit beiden Schreibweisen, Hochkommata: ' und Anführungsstrichen: ", umgehen. HTML fordert stets die letztere von beiden!)
|
Autor: Thomas Meyer |
Home: www.All-Community.de |
Kontakt: |