Mit jQuery besitzt Community Framework 2 ein sehr starkes JavaScript-Framework ein, das sich auch relativ einfach erweitern lässt. In diesem Tutorial gehe ich jedoch lediglich darauf ein, vorhandenes HTML zu ändern, da diese Möglichkeit im Template selbst durch ein Plugin wegfällt.
Hierzu eignet sich die Funktion
api.jquery.com/detach/
Eigentlich entfernt sie lediglich das gewählte Element aus dem DOM (Document Object Model), d.h. aus dem Quelltext. Man kann das so entfernte Element aber einfach in eine Variable speichern, so dass der Code nicht endgültig verloren ist, sondern noch vorhanden und an jede beliebige Stelle wieder gesetzt werden kann.
Ein Beispiel für das Entfernen des Benutzermenüs: Damit wird der Bereich mit der ID
Um das Element nun wieder einzufügen, gibt es mehrere Möglichkeiten. Um einmal drei Beispiele zu nennen:
Als Beispiel: Damit wird alles, was in der Variable
Um den Code aber auch in das Framework zu bekommen, benötigt man einen Templatelistener. Entweder schreibt man hierzu eine eigene Klasse und speichert diese in eine Datei, um die Klasse dann an benötigter Stelle aufzurufen (hier würd ein Templatelistener beim Event
Teil 10: Zugriff auf die Datenbank
Hierzu eignet sich die Funktion
.detach()
, die man hier nachlesen kann:api.jquery.com/detach/
Eigentlich entfernt sie lediglich das gewählte Element aus dem DOM (Document Object Model), d.h. aus dem Quelltext. Man kann das so entfernte Element aber einfach in eine Variable speichern, so dass der Code nicht endgültig verloren ist, sondern noch vorhanden und an jede beliebige Stelle wieder gesetzt werden kann.
Ein Beispiel für das Entfernen des Benutzermenüs: Damit wird der Bereich mit der ID
#topMenu
aus dem DOM entfernt und gleichzeitig in die Variable $topMenu
gespeichert.Um das Element nun wieder einzufügen, gibt es mehrere Möglichkeiten. Um einmal drei Beispiele zu nennen:
.html()
.after()
.before()
.html()
gibt das Innere eines Elements an, d.h. das Benutzermenü würde innerhalb des Elements zu finden sein..after()
gibt den Bereich nach dem Element an, d.h. das Benutzermenü würde nach dem Element zu finden sein..before()
gibt den Bereich vor dem Element an, d.h. das Benutzermenü würde vor dem Element zu finden sein.Als Beispiel: Damit wird alles, was in der Variable
$topMenu
steht (also alles, was über .detach()
entfernt wurde), hinter den Bereich mit der ID #main
eingefügt. Das funktioniert dann alles zur Laufzeit.Um den Code aber auch in das Framework zu bekommen, benötigt man einen Templatelistener. Entweder schreibt man hierzu eine eigene Klasse und speichert diese in eine Datei, um die Klasse dann an benötigter Stelle aufzurufen (hier würd ein Templatelistener beim Event
javascriptInclude
und einer beim Event javascriptInit
benötigt) oder man benötigt nicht mehr Code und schreibt das oben genannte JavaScript gleich in das Event javascriptInit
.Teil 10: Zugriff auf die Datenbank
Teil 1: Das erste eigene Plugin
2.157 mal gelesen
Fighter456 -
Ich würde dich bitten, dass du ein Thema im Forum eröffnest, weil das hier die erlaubte Anzahl von Zeichen überschreiten würde.