Du bist hier: Downloads > Programme von mir > JavaScript - SDO-Objekt v3.05.01 > Dokumentation

SDO – Dokumentation

* Funktioniert nicht im Netscape 4.


Einbinden der SDO-Bibliothek in die HTML-Seite

Im HEAD Bereich der HTML-Seite muss folgende Zeile eingefügt werden:

<script type="text/javascript" src="sdo.js"></script>

Alle Module, welche auf das SDO-Objekt aufbauen (z.B. das Menu-Objekt) müssen nach der SDO-Bibliothek eingebunden werden.

Im BODY-Tag muss folgender Zusatz eingebunden werden:

onload="initSDO()"

Da SDO-Objekte auf Layer zugreifen, müssen diese bereits geladen sein, wenn sie benutzt werden. Deshalb dürfen alle Objekte erst nach dem Ausladen der Seite instanziiert werden. Dafür muss eine Funktion namens initDevices() definiert werden. Diese wird von der initSDO() aufgerufen. In der initDevices() Funktion können dann alle Objekte erzeugt und Aktionen gestartet werden. Dies klingt jetzt vielleicht etwas kompliziert, aber nach 1-2 Beispielen erkennt man, dass es gar nicht so kompliziert ist. Smiley glücklich

SDO-Objekt - Funktionsreferenz

globale Variablen

ie4 true/false
(default:false)
Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Internet Explorer 4.x ist.
ie5 true/false
(default:false)
Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Internet Explorer 5.x ist.
ie6 true/false
(default:false)
Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Internet Explorer 6.x ist. Unterstüzt den DOM-Standart.
ns4 true/false
(default:false)
Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Netscape 4.x ist.
ns6 true/false
(default:false)
Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Netscape 6.x oder 7.x ist. Unterstüzt den DOM-Standart.
opera true/false
(default:false)
Browservariable, ist nach der Initialisierung gültig. Gibt an, ob der Browser ein Opera Browser ist.
mac true/false
(default:false)
Browservariable, ist nach der Initialisierung gültig. Gibt an, ob es sich um einen Mac handelt. Auf dem Mac ist Internet Explorer 5.x die höchste verfügbare Version und diese kann im Gegensatz zur Windows Version keine Inhalte dynamisch verändern. Netscape ist auf dem Mac identisch zur Windows Version.
debug true/false
(default:false)
Gibt an, ob debugFehlermeldungen ausgeben werden sollen.
operaWarning true/false
(default:false)
Gibt an, ob eine Warnung bei Verwendung eines Opera Browsers ausgegeben werden soll. Opera bis Version 6 (aktuell) unterstützt leider keinerlei dynamische Ebenenmanipulation.
delay integer
(default:20)
Zeit zwischen Animationsschritten (z.B. moveTo)
aList typ:Container Ist das Listener Objekt. Alle Objekte die überwacht werden sollen können mit den Methoden des Container-Objektes hinzugefügt oder entfernt werden.
helpo typ:MObject Ist das Objekt für das Tooltip. Manipluationen daran sind nicht empfehlenswert.
enableToolTips true/false
(default:false)
Gibt an ob ToolTips verwendet werden sollen. Aktivierung sollte nur noch über die Funktion setToolTips gemacht werden.

Wenn man keine Extraseite für den Opera machen möchte, aktiviert man den Warnhinweis für Operabenutzer, in dem man einfach im JavaScript eine Zeile einfügt:
operaWarning=true;
Genauso verfährt man, wenn man eine der anderen globalen Variablen ändern möchte.


setToolTips(t_or_f)

Aktiviert oder deaktivert ToolTips. Ein Layer Namens 'tooltip' muss existieren!

t_or_f Muss true oder false sein.

Beispiel: setToolTips(true)


screenWidth()

Gibt die verfügbare Fensterbreite zurück.

Beispiel: var width=screenWidth()


screenHeight()

Gibt die verfügbare Fensterhöhe zurück.

Beispiel: var height=screenHeight()


getOffsetX()

Gibt an um wieviele Pixel die Seite nach rechts gescrollt ist.

Beispiel: var scrollLeft=getOffsetX()


getOffsetY()

Gibt an um wieviele Pixel die Seite nach unten gescrollt ist.

Beispiel: var scrollTop=getOffsetY()


toolTip(text)

Zeigt einen Tooltip mit entsprechendem Text an. Wenn kein Text übergeben wird, wird das Tooltip gelöscht.

Benötigt einen Layer mit Namen 'tooltip' auf der HTML Seite!

text Gibt den anzuzeigenden Text an.

Beispiel: <a href="..." onMouseOver="toolTip('Ein sinnvoller Hilfetext')" onMouseOut="toolTip()">


initSDO()

Initialisiert alle Dinge, die für die Verwendung der SDO-Bibliothek notwendig sind. Diese Funktion muss im BODY Tag der HTML Seite aufgerufen werden.

Beispiel: <body onLoad="initSDO()">


initSDO_soft()

Startet die Initialisierung im Minimalmodus. Es werden nur die Browservariablen gesetzt. Sinnvoll, wenn man nur ein paar kleine Scripte hat, welche Browserspezifisch arbeiten. Die checkBrowser() Funktion der SDO-Bibliothek ist immer auf dem neuesten Stand! Eventuell werden später einige andere Init-Funktionen hinzugefügt. Deshalb ist es besser diese Funktion zu verwenden, anstatt checkBrowser() direkt aufzurufen.

Beispiel: <body onLoad="initSDO_soft()">


checkBrowser()

Diese Funktion wird intern während der Initialisierung aufgerufen und überprüft, welcher Browser gerade verwendet wird. Sie ist immer auf dem neuesten Stand und funktioniert mit Opera 6, Mozilla 1, Netscape 7 und InternetExplorer 6. Ebenso mit den jeweiligen Browsern früherer Versionen. Auserdem können Mac Computer erkannt werden.


initDevices()

Diese Funktion ist als leere Funktion implementiert, um Fehlermeldungen zu unterbinden, falls sie nicht existiert. Es sollte eine Funktion mit genau diesem Namen implementiert werden, welche alle Objekte anlegt und Aktionen startet. Alle Objekte müssen aber bereits auserhalb der initDevices() Funktion definiert sein und werden erst in der initDevices() Funktion erzeugt. Ansonsten sind sie nicht global verfügbar! Falls dies nicht verständlich ist sollte man sich die Beispielseite anschauen.

MoveableObject


interne Variablen

scrolling true/false
(default:false)
Gibt an, ob bei setPosition() Bildschirmscrollen mit einberechnet werden soll.
moveable true/false
(default:false)
Gibt an, ob das Objekt verschiebbar sein soll. Beim setzen auf true muss das Objekt aber mit setPosition() absolut positioniert werden, damit es seine Start-Koordinaten kennt.
updzi true/false
(default:true)
Gibt an, ob beim verschieben der zIndex erhöht werden soll. Fenster kommen damit bei Aktivierung in den Vordergrund.
info Array
(default:leer)
Ist ein Array, welches am Anfang leer ist und bei Bedarf mit Zusatzinfos gefüllt werden kann.
Nicht veränderliche Variablen. Nur für Programmierer von Modulen interessant und sollten auch nicht verändert werden!
xc integer Beinhaltet die aktuelle X-Koordinate des Objektes. Ist erst nach Verschiebung belegt.
yc integer Beinhaltet die aktuelle Y-Koordinate des Objektes. Ist erst nach Verschiebung belegt.
objn String Beinhaltet den Namen des Objektes.
name String Beinhaltet den Namenn des verwalteten Layers.
active true/false Gibt an, ob das Objekt gerade aktiv ist.
zIndex integer Gibt den aktuellen zIndex des Objektes an.
mma true/false Gibt den aktuellen Aktivitäts-Status an.
width integer Gibt die Breite des Objektes an. Ist nur nach resizeTo() belegt.
height integer Gibt die Höhe des Objektes an. Ist nur nach resizeTo() belegt.


MObject(name,objn)

Dies ist der sogenannte "Konstruktor". Damit bezeichnet man in der Objektorientierten Programmierung die Funktion, welche das Objekt erzeugt.

name Ist der Name des Layers, welcher dem Objekt zugeordnet ist. 1 Objekt kann immer nur einem Layer zugeordnet sein. Ein Layer kann aber durch mehrere Objekte verwaltet werden, auch wenn dies praktisch wohl nur in Ausnahmefällen Sinn macht.
objn Ist der Name des Objektes, welches gerade erzeugt wird. Dies ist nötig, da sich das Objekt manchmal im HTML-Text selber aufrufen lassen muss. Dazu muss es seinen Namen kennen.

Beispiel: object1=new MObject('layer1','object1');


moveTo(x,y,s)

Verschiebt das Objekt an die definierte X,Y-Position in einer bestimmten Anzahl von Schritten.

Das Objekt muss vorher mit setPosition() absolut positioniert worden sein!

x Gibt die X-Zielkoordinate des Objektes an.
y Gibt die Y-Zielkoordinate des Objektes an.
s Gibt die Anzahl der Animationsschritte an. Als Abstand zwischen den einzelnen Animationsschritten wird die globale delay Variable verwendet.

Beispiel: object1.moveTo(100,100,15);


saveLayer()

Speichert den Inhalt des Layers. Dieser kann später mittels restoreLayer() wieder hergestellt werden. Sehr sinnvoll, für Hover-Effekte um schnellere Animationen zu erzeugen.


restoreLayer()

Stellt den Inhalt eines zuvor mit saveLayer() gesicherten Layers wieder her.


setZIndex(num) *

Legt den zIndex für ein Objekt fest. Es kann bei mehreren Objekten somit in den Vordergund oder Hintergrund gesetzt werden.

num Gibt den neuen zIndex des Layers an.

Beispiel: object1.setZIndex(7);


setStyle(style,val) *

Weißt einem Objekt einen CSS-Style zu. Siehe dazu auch die externer Link Hilfe Seite zu CSS im SELFHTML.

Auf Grund der Struktur des SDO-Objektes ist es möglich, dass einige Styles in einigen Browsern nicht korrekt dargestellt werden. Insbesondere sei hier Mozilla und der darauf aufbauende Netscape erwähnt, welche in dieser Beziehung teilweise Fehlerhaft sind. Auch ist eine unterschiedliche Interpretation im IE und NS möglich.

style Gibt den Namen eines Sytles an.
val Gibt den Wert des entsprechenden Styles an.

Beispiel: object1.setSytle('color','#FF0000');


isActive()

Gibt einen true/false Wert zurück. Je nachdem, ob das Objekt gerade aktiv (Maus befindet sich über Objekt) oder inaktiv ist. Diese Funktion ist besonders für Hover-Effekte nützlich.

Beispiel: if ( object1.isActive() ) { alert('Ja ich bin aktiv!') }


write(txt)

txt Gibt den zu schreibenden Text an. Dieser kann auch HTML Code enthalten.

Beispiel: object1.write('<b>schöner Text</b>');


add(txt)

Fügt einem Objekt neuen Text hinzu.

txt Gibt den hinzuzufügenden Text an. Dieser kann auch HTML Code enthalten.

Beispiel: object1.add('<i>mehr Text</i>');


activeStart()

Diese Funktion wird aufgerufen, wenn das Objekt aktiviert wird. Sie ist nur als leerer Prototyp implementiert. Das heißt, Sie müssen sie erst definieren, damit etwas ausgeführt wird. Dies gibt Ihnen aber die flexible Möglichkeit bei Aktivierung (Maus wird über das Objekt bewegt) oder Deaktivieren (Maus verlässt das Objekt wieder) des Objektes eigene Aktionen auszuführen, ohne sich um die Überwachung des Objektes kümmern zu müssen! Das Objekt muss dazu aber dem globalen Listener-Objekt hinzugefügt werden.

Beispiel:

object1.activeStart=function() { alert('Ich wurde aktiviert Smiley glücklich') }
aList.add('object1');

Dieses Objekt würde jetzt beim Überfahren mit der Maus die Meldung 'Ich wurde aktiviert Smiley glücklich' ausgeben.


activeEnd()

Diese Funktion wird aufgerufen, wenn das Objekt deaktiviert wird. Sie ist ebenfalls nur als leerer Prototyp implementiert. Sie ist das Gegenstück zur Funktion activeStart(). Sie muss ebenfalls erst gefüllt werden.

Beispiel: object1.activeEnd=function() { alert('Ich wurde deaktiviert Smiley glücklich') }

Dieses Objekt würde jetzt beim Verlassen mit der Maus die Meldung 'Ich wurde deaktiviert Smiley glücklich' ausgeben.


hide() *

Macht das Objekt unsichtbar.

Beispiel: object1.hide()


show() *

Macht das Objekt wieder sichtbar.

Beispiel: object1.show()


resizeTo(width,height)

Setzt die Größe des Objektes auf die angegebenen Werte. (Danach sind auch die internen Werte für width und height gesetzt.)

width Gibt die Länge in Pixeln an.
height Gibt die Höhe in Pixeln an.

Beispiel: object1.resizeTo(100,200)


setPosition(x,y)

Positioniert das Objekt an den angegebenen X,Y-Koordinaten.

x Gibt die X-Position am Bildschirm an.
y Gibt die Y-Position am Bildschirm an.

Beispiel: object1.setPosition(100,200)


startFollow()

Startet den Maus-Folge-Modus. Dabei folgt das Objekt der Maus mit dem zur Aktivierung gegebenem X,Y-Offset. Mit X,Y-Offset ist der Abstrand von der linken oberen X,Y-position des Objektes zur Maus X,Y-Position gemeint. Diese Funktion wird verwendet, wenn die interne Variable moveable auf true gesetzt wurde und das Objekt verschoben wird. Ein externer Aufruf dieser Funktion bringt zur Zeit nix.

Zur Zeit beschränkt sich die Funktionalität noch darauf, dass es verschieben ermöglicht. Eine allgemeine Verwendung wäre unter Umständen nach Anpassung des Codes auch möglich...


stopFollow()

Das Gegenstück zur Funktion startFollow(). Damit wird der Maus-Folge-Modus wieder deaktiviert. Ein externer Aufruf dieser Funktion bringt zur Zeit nix.

ContainerObject


interne Variablen

list Array Array zur internen Verwaltung der Objekte. Auf das Array kann mittels %object%.list zugegrifen werden. %object% ist dabei durch den Namen des erzeugten Containers zu ersetzen. Änderungen und Manipulationen sind nicht sinnvoll, da dadurch die Konsitenz zerstört werden könnte. Es ist nur ein lesender Zugriff sinnvoll, um zum Beispiel über alle Objekte zu iterieren. Einzelne Objekte im Array werden folgendermassen angesporchen: %object%.list[%num%]. %num% Ist hierbei eine zahl zwischen 0 und %object%.list.length. Wenn das Array leer ist, ist die Länge -1. Zu Details zum Array Objekt ist hier die externer Link Array Hilfeseite im SELFHTML.


Container()

Erzeugt einen neuen Container. Ein Container ist im Grunde ein Array, in dem keine doppelten Einträge vorkommen können.

Beispiel: object2=new Container();


add(object)

Fügt ein Objekt zum Container hinzu. Dabei wird geprüft, dass das Objekt noch nicht vorkommt. Ansonsten wird es am Ende des Array angefügt. Am Ende der Funktion wird addPersonal(object) aufgerufen. object ist hierbei das an add() übergebene Objekt. Zu Details hierzu bitte die Hinweise zu addPersonal() lesen.

object Kann im Grunde ein beliebiges Objekt sein. In der Regel sind Zeichenketten am sinnvollsten, welche den Namen eines Objektes tragen. Diese können dann mittels der eval() Funktion von JavaScript angesprochen werden.

Beispiel: object2.add('object1')


remove(object)

Entfernt ein Objekt aus dem Array. Wenn es nicht existiert passiert nichts. Am Ende der Funktion wird removePersonal(object) aufgerufen. object ist hierbei das an remove() übergebene Objekt. Zu Details hierzu bitte die Hinweise zu removePersonal() lesen.

object Kann im Grunde ein beliebiges Objekt sein. In der Regel sind Zeichenketten am sinnvollsten, welche den Namen eines Objektes tragen. Diese können dann mittels der eval() Funktion von JavaScript angesprochen werden.

Beispiel: object2.remove('object1')


addPersonal(object)

Diese Funktion wird nach dem hinzufügen eines Objektes mittels add() aufgerufen. Diese Funktion ist leer, kann aber selber definiert werden. Dadurch können beim hinzufügen von Objekten weitere Aktionen ausgeführt werden. Ein direkter Aufruf der addPersonal() Funktion ist nicht vorgesehen.

object Ist das an add() übergebene Objekt.

Beispiel: object2.addPersonal=function(object) { alert('Objekt '+object+' wurde hinzugefügt.') }

Dadurch würde beim hinzufügen eines Objektes zu object2 ein Hinweis ausgegeben, dass das Objekt erfolgreich hinzugefügt wurde.


removePersonal(object)

Diese Funktion wird nach dem entfernen eines Objektes mittels remove() aufgerufen. Diese Funktion ist leer, kann aber selber definiert werden. Dadurch können beim entfernen von Objekten weitere Aktionen ausgeführt werden. Ein direkter Aufruf der removePersonal() Funktion ist nicht vorgesehen.

object Ist das an add() übergebene Objekt.

Beispiel: object2.removePersonal=function(object) { alert('Objekt '+object+' wurde entfernt.') }

Dadurch würde beim entfernen eines Objektes aus object2 ein Hinweis ausgegeben, dass das Objekt erfolgreich entfernt wurde.