Wieder verwendbare Webkomponenten für Mozilla

Ein gutes Beispiel eines solchen selbst erstellten Steuerelements ist ein Definitionskästchen auf einer Webseite, welches Informationen mithilfe eines schwebenden DIV-Elements hervorhebt, das an ein selbst erstelltes Element „gebunden“ ist. Die Definition wird dann im DIV-Element angezeigt. Dies ist ein sehr nützliches Steuerelement, weil es den verfügbaren Platz auf einer Webseite vergrößert, ohne das Design zu zerstören. Außerdem wird so der Inhalt der Definition an einen bestimmten Bereich der Seite gebunden, zum Beispiel an ein Bild oder Wort.

Üblicherweise wird dies mithilfe von mouseover-Ereignissen für ein bestimmtes Element erreicht. Der Event-Handler setzt den Wert von innerHTML eines DIV-Elements auf die entsprechende Information und macht das Element sichtbar. Das mouseout-Ereignis ist verantwortlich für das Ausblenden des DIV-Elements, nachdem der Mauszeiger das Element verlassen hat. Der folgende einfache Code erledigt genau dies:

Mithilfe von XBL kann man Content-Gruppen erstellen, auf die dann als individuelles Steuerelement zugegriffen werden kann. Nach demselben Prinzip kann man ein Steuerelement mithilfe von XBL erzeugen und außerdem mit zusätzlichen Style-Informationen das Erscheinungsbild des schwebenden Textes beeinflussen:

Man beachte, dass der Implementierung am Anfang des XBL eine Eigenschaft namens definition hinzugefügt wurde. Damit wird die Information im Attribut des selbst erstellten Tags gespeichert. Dann werden zwei Event-Handler hinzugefügt, einer für mouseover und einer für mouseout. Der mouseover-Event-Handler wird dem zweiten Knoten in dem anonymen Content zugewiesen, dem HTML-Div-Element. Er setzt die Eigenschaft innerHTML des Elements, positioniert das Element entsprechend den Eigenschaften clientX und clientY des mouseover-Events und stellt die Sichtbarkeit auf visible. Das DIV-Element wird mit der linken oberen Ecke an der Stelle angezeigt, an der sich der Mauszeiger befindet. Wenn das mouseout-Ereignis eintritt, wird die Sichtbarkeit auf hidden gesetzt. Und schließlich wird das DIV-Element dem content-Abschnitt des XBL hinzugefügt.

Hier eine einfache HTML-Seite, welche diesen XBL-Code einsetzt:

Wie man sieht, wird die Bindung innerhalb des STYLE-Tags implementiert. Das definition-Attribut liefert die Information, die innerhalb des DIV-Elements angezeigt wird. Man kann den XBL-Code als Datei mit dem Namen „test.xml“ speichern, den HTML-Code als separate Datei abspeichern und das Ganze in einem Mozilla-basierten Browser sofort ausprobieren.