Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen
Menü einblenden
 

Overlay-Windows

Schwierigkeit: für Fortgeschrittene

 


2 kbyte

Skript-Paket downloaden


Beschreibung:

Mit diesem Skript können sie ein Fenster (mit beliebigem Inhalt) innerhalb eines HTML-Dokuments erzeugen. Damit lassen sich zum Beispiel weitere Produktinformationen über dem aktuellen Text einblenden, eine Menüleiste auf Knopfdruck ein- oder ausblenden oder sogar ein eigenes Kontextmenü schreiben.

JavaScript-Syntax:

... für Overlay-Windows

Das Skript arbeitet mit einer eigenen Objekt-Klasse (die Verwendung von Klassen in JavaScript werde ich in einem eigenen Tutorial erläutern). Die neue Hüllklasse "overlayWindow" erleichtert das Arbeiten mit Layern in HTML-Dokumenten. Um CSS und andere Dinge brauchen sie sich daher keine Sorgen mehr zu machen.

Ein Layer kann damit in Zukunft fast wie ein echtes Objekt behandelt werden. Au

Klasseneigenschaften "overlayWindow"
Konstruktor myOverlayWindow = new overlayWindow(breite, höhe, html, style

breite = Breite des Fenster in Pixel
höhe = Höhe des Fenster in Pixel
html = Inhalt des Fensters (HTML)
style = Formatierungsanweisungen (CSS) - optional

Methoden
.move(x, y) verschiebt das Fenster an die Position, welche durch die Koordinaten x und y angegeben wird
Anmerkung: bei x und y handelt es sich um absolute Positionsangaben ausgehend von der oberen linken Ecke des Dokuments
.moveBy(x, y) verschiebt das Fenster um die angegeben Werte
.resize(breite, höhe) setzt die Fenstergröße auf die angegebene Breite und Höhe
.resizeBy(breite, höhe) erhöht die Fenstergröße um die angegebenen Werte
.setContent(html) ersetzt den HTML-Inhalt des Fensters durch den angegebenen Parameter
 
Abfrage von Umgebungsvariablen
.innerHTML( ) liefert HTML-Inhalt des Fensters
.height( ) liefert Höhe in Pixel
.width( ) liefert Breite in Pixel
.x( ) liefert die horizontale Position
.y( ) liefert die vertikale Position
Eigenschaften .id eindeutige JavaScript-Bezeichnung des Fensters
.style aktive CSS Formatierungsanweisungen
Hinweis das Skript fügt dem Objekt "document" die Eigenschaft "overlayWindows" hinzu. Das ist ein Array, welches Referenzen auf alle Overlay-Windows des gerade geladenen Dokuments enthält.

document.overlayWindows[ zahl ] oder
document.overlayWindows[ id ]