WCF2: Inhalte mit jQuery dynamisch manipulieren

  • WCF 2

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

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 .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:

JavaScript-Quellcode

  1. var $topMenu = $('#topMenu').detach();
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:

JavaScript-Quellcode

  1. var $topMenu = $('#topMenu').detach();
  2. $('#main').after($topMenu);
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
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

2.157 mal gelesen

Kommentare 3

  • 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.

  • Black Rider -

    Danke, habe das korrigiert.

    Mit JavaScript haben deine Fragen sonst ja nichts mehr zu tun, ich werde mal "meinen" PHP-Spezialisten bezüglich der Beantwortung rüberschicken - vielleicht macht er ja ein Tutorial dazu oder antwortet dir direkt.

  • Less -

    Besten Dank für das Tutorial! Es war wieder sehr hilfreich!
    Nur ich glaube statt "includeJavaScript" ist "javascriptInclude" und statt "initJavaScript" ist "javascriptInit" gemeint.

    Mich würden aber noch zwei Dinge zum Thema interessieren:
    1) In welchem Ordner sollte man die passenden ???Action.class.php unterbringen?
    2) Und warum muss für diese auch eine gleichnamige ???Editor.class.php anlegen? Was ist der Sinn dahinter?