Wenn aber das unbedingt nur von einer Lightbox kommt, dann sollte man sich kurz hinsetzen, einen geeigneten Klon aussuchen (hier ist die große Lightbox Matrix) und die Klickvergrößerung von TYPO3 damit ersetzen. Das ist schnell, effektiv und in diesem Beitrag erklärt.

Vorbereitungen

Für mein aktuelles Projekt habe ich mich für den Lightbox Clone TopUp entschieden. Sieht sehr vielversprechend aus. Also welcher Klone auch immer: Daten herunterladen und ins Projekt einbinden. Dazu gehören mind. jQuery und das entsprechende Plugin, in vielen Fällen auch noch eine CSS Datei. Firebug verrät im Script Reiter ob es funktioniert hat.

TopUp benötigt keine CSS Datei, dafür aber einen Bilder- und einen Players-Ordner in dem SWF Dateien gespeichert sind um verschiedene Medien wiederzugeben. Per JavaScript können die Pfade angepasst werden:

TopUp.host = 'http://www.kiwi-service.de/';

TopUp.images_path = 'fileadmin/template/img/topup/';

TopUp.players_path = 'fileadmin/template/flash/';

JavaScript einbinden

Eine Besonderheit bringt TopUp mit: Es lädt dynamisch die benötigten JavaScriptdateien nach. Dafür braucht er den kompletten javascripts/jquery Ordner. Dieser muss im gleichen Ordner liegen wie top_up-min.js.

fileadmin/template/js/top_up-min.js

fileadmin/template/js/jquery/...

Test

Alle benötigten Dateien sind eingebunden und in Firebug sichtbar. Um zu testen ob es funktioniert, füge ich ein Inhaltselement vom Typ HTML ein und schreibe mein eigenes Bild rein. Testbilder sind im Images Ordner vorhanden.

<a href="fileadmin/template/img/topup/photos/1.jpg" class="top_up">

  <img src="fileadmin/template/img/topup/thumbnails/1.jpg">

</a>

Funktioniert, wunderbar! Wenn nicht, dann die eigene Seite mit den Beispielen vergleichen.

Typoscript

Nun muss man TYPO3 noch das hässliche JavaScript PopUp austreiben. Hier mein Konfiguration für Version 4.3

temp.imageLinkWrap = 1

temp.imageLinkWrap {

enable = 1

typolink {

parameter.cObject = IMG_RESOURCE

parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile

parameter.cObject.file.maxW = {$styles.content.imgtext.maxW}

parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
title.field = imagecaption // title

title.split.token.char = 10

title.if.isTrue.field = imagecaption // header

title.split.token.char = 10

title.split.returnKey.data = register : IMAGE_NUM_CURRENT

parameter.cObject = IMG_RESOURCE

parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile

ATagParams = target="_blank"

}

}
tt_content.image.20.1.imageLinkWrap >

tt_content.image.20.1.imageLinkWrap < temp.imageLinkWrap 

Als erstes wird das temporäre Objekt temp.imageLinkWrap erzeugt und konfiguriert. Interessant ist die letzte Angabe ATagParams - darüber gibt man jedem Link die Klasse top_up mit, damit das Plugin sich um die Bilder kümmert.

Anschließend wird die Standardvergrößerung in tt_content.image.20.1.imageLinkWrap überschrieben. Cache leeren und Seite neuladen, fertig!

TopUp Spezialitäten

Dieses TopUp ist wirklich ein schönes Teil. Mit der Funktion addPresets() lassen sich für Links in DOM Bereichen Voreinstellungen treffen. Zum Beispiel alle Bilder die über ein Inhaltselement eingestellt sind, zu einer Gruppe zusammenfassen:

TopUp.addPresets({

".csc-textpic-imagewrap a": {

group: "images"

}

});

Das bedeutet alle TopUp-Links im Div .csc-textpic-imagewrap werden der Gruppe images zugewiesen. Im Overlay gibts dann Vor- und Zurückpfeile.

Fazit

Die Initialisierung und Einstellungen einer Lightbox variieren natürlich. Es gibt aber ein paar schöne und elegante Tools deren Einsatz sich lohnen. Vorallem im Zusammenspiel mit der brand neuen TYPO3 Version 4.3 - ein großartiger Schritt mit schönen Verbesserungen. Unbedingt ansehen. Und TopUp einbinden!

Zum Beispiel in einem Tool welches umfangreiche Exportmöglichkeiten besitzt und gerade von einer jungen, dynamischen Agentur entwickelt wird. In dem Programm legt man ein Exportscript an und kann diesem verschiedene Exportdateien zuweisen die beim durchlaufen dynamisch erstellt werden.

Diese einfache 1:n Beziehung ist mit Cake schnell gebacken, mit ein paar Zeilen erweitert und läuft. Allerdings verteilt auf mehreren Seiten. Zum Glück gibt uns Cake einfache Möglichkeiten an die Hand um das zu verhindern.

In diesem Artikel will ich aufschreiben wie man praktisch jedes Cake Projekt zusammen mit dem Lieblings-Javascriptframework jQuery in eine coole Web 2.0 Anwendung verwandeln kann.

Grundlagen

Ich gehe mal von einer laufenden Cakeanwendung aus. Da gibt es die Tabelle Export und die Tabelle Exportfiles. Die beiden sind über eine 1:n Beziehung verknüpft, die Anwendung wurde gebacken und man verfügt über die normalen CRUD Funktionen.

Wenn Interesse an einem Tutorial dazu besteht, wäre ein kurzer Hinweis in den Kommentaren oder per Mail nett.

Der AppController

Den schönsten Teil bringt Cake schon mit: den RequestHandler. Mit dessen Hilfe kann man auf Ajaxanfragen reagieren. Als erstes muss er in der Datei app/app_controller.php eingebunden werden:

$components = array('RequestHandler');

Anschließend stehen in jedem Controller über $this->RequestHandler umfangreiche Möglichkeiten zur Verfügung. Besonders toll wirds im Callback beforRender(). Dieser wird im AppController definiert und von Cake automatisch aufgerufen, wenn die Logik im entsprechenden Controller abgearbeitet wurde.

So sieht die Killerfunktion aus:

function beforeRender() {

  if($this->RequestHandler->isAjax()) {

     Configure::write('debug', 0);

     if($this->RequestHandler->prefers() == 'json') {

        die(json_encode($this->viewVars));

     }

     else {

        $this->layout = 'ajax';

     }

  }

}

Was hier passiert ist so gut wie selbsterklärend: Wenn es sich um eine asynchrone Anfrage handelt if($this->RequestHandler->isAjax()), dann wird als erstes jegliche Debugausgabe verboten. Das muss man sich unbedingt merken, sonst besteht die Gefahr auszuflippen weil debug() "aufeinmal" nichts mehr ausgibt. Auf der anderen Seite kann man aber nicht mit einem JSON String in Javascript weiterarbeiten, wenn dem ein Datenbanklog am Hintern an der schließenden Klammer klebt. Also nicht vergessen!

Nach dem Cake weiß, das es eine Ajaxanfrage bearbeitet, wird geprüft, welche Rückantwort erwartet wird $this->RequestHandler->prefers(). Wenn diese JSON ist, werden alle viewVars, dass sind alle Variablen die über $this->set() im Controller gesetzt wurden, als JSON Objekt zurück gegeben. Damit stehen dem Javascript alle Informationen zur Verfügung die sonst im View verarbeitet werden. Toll oder?

Dieses die(json_encode()) finde ich noch nicht ganz so elegant wie der ganze Rest von Cake, tut aber seine Arbeit. Vielleicht hat jemand einen schöneren Ansatz?!

Wenn die Anfrage kein JSON erwartet, wird nicht das Standardlayout genutzt, sondern auf das Ajax umgeschaltet. Das befindet sich in der Datei app/views/layouts/ajax.ctp und besteht nur aus einer Zeile:

<?php echo $content_for_layout; ?>

Standardlayout

Um Probleme beim ändern der BaseURL zu vermeiden habe ich mir angewöhnt im Standardlayout das Tag base zu verwenden um mit jQuery schnell auf die URL zugreifen zu können. In der Datei app/views/layouts/default.ctp muss dafür folgende Zeile hinzugefügt werden:

<base href="http://<?=$_SERVER['HTTP_HOST']?><?=$this->base?>/" host="http://<?=$_SERVER['HTTP_HOST']?>" />

Ich weiß, das Attribut host verhindert eine komplette Validierung, allerdings brauche ich in einigen Fällen nur den Host und in anderen die komplette BaseURL, da zum Beispiel die erstellen Formulare mit $form->create(...) schon die BaseURL enthalten.

Das wird man gleich sehen.

jQuery Action

Da sind jetzt in wenigen Zeilen mächtige Grundlagen gelegt worden, die man mit jQuery an seiner Seite ausnutzen möchte. Im Formular zur Erstellung eines neuen Exports habe ich ein Button "Neue Exportdatei", die bei Klick in den Container div#new das Formular lädt um eine neue Datei zu speichern. Nichts leichter als das:

$ajax({

  url: $('base').attr('href')+'exportfiles/add/export:'+$('#ExportEditForm').attr('rel'),

  dataType: 'html',

  success: function(form) {

      $('#new').html(form);

  }

};

Als benannten Parameter wird die ID des aktuellen Exports übergeben. Im Controller steht diese Information im Array $this->params['named'] zur Verfügung. Von da wird sie an den View übergeben und hier wird, sofern gesetzt ein verstecktes Formularfeld erzeugt, anstatt der gebackenen Liste der vorhandenen Exports.

Mit der Verwendung des Ajax-Layouts und der Angabe dataType: 'html' steht in der Variable form der Success Funktion genau das Formular zur Verfügung, welches im View definiert wurde.

JSON benutzen

Wenn das Formular ausgefüllt wurde, muss man das Abschicken abfangen. Leider unterstützt die Live Funktion noch nicht den Event submit, deshalb muss man sich mit einem Klick auf den Submitbutton helfen.

$('#new .submit input').live('click', function() { ... });

Das wirklick spannende ist natürlich auch hier die Ajaxanfrage und das Geheimnis liegt im dataType: 'json'.

$.ajax({

  url: $('base').attr('host')+$form.attr('action'),

  data: $form.serialize(),

  type: 'POST',

  dataType: 'json',

  success: function(content) {

    if(content.saved) {

        $form.closest('fieldset').prev().find('ul')

            .find('li.empty').remove().end()

            .append('<li>Neuer Eintrag <b>'+$form.find('input[type=text]:first').val()+'</b> angelegt.</li>');

    }

    else {

        alert("Leider ist ein Fehler beim speichern aufgetreten.");

    }

  }

});

In der Variable $form ist das jQuery Objekt gespeichert, welches das Formular widerspiegelt, dass gerade abgeschickt wurde. Da man immer wieder darauf zugreifen muss, macht es Sinn das in eine Variable zu legen um Zeit bei der Abarbeitung zu sparen.

In der Variable content stehen jetzt dank AppController und RequestHandler alle View-Variablen zur Verfügung. Über das Auslesen des Attributs Action des Formulars muss man sich nicht mal mehr Gedanken machen wo das Formular überhaupt abgearbeitet wird. Wichtig ist nur das in der entsprechenden Funktion ein Status gesetzt wird:

$this->set('saved', true);

Fazit

Nach genau dem gleichen Prinzip funktioniert auch das Löschen oder jeder andere Anwendungsfall der einem einfällt. Ich bin im Moment mal wieder begeistert von diesen beiden tollen Frameworks und den schier unerschöpflichen Möglichkeiten.

Demnächst gibt es dann hoffentlich mal die Vorstellung von einem fertigen Tool. Bis dahin freue ich mich auf Fragen und Verbesserungsvorschläge. Vielen Dank fürs lesen!

Das Problem mit den Dingern, ist die dynamische Veränderung. Ein einfaches $("select").find("option:first").remove(); funktioniert zwar zum entfernen, aber das hinzufügen von Options ist schon schwieriger (-böser Blick zum Internet Explorer-). Und wenn die Selectbox sich dann an einer weiteren orientieren soll, dann wirds haarig.

Die Lösung ist das Klonen und verstecken der "originalen" Box. Aus dem Klon kann man dann die überflüssigen Auswahlmöglichkeiten entfernen.

Und jetzt folgt der Artikel wie man das effizient anstellen könnte. Natürlich Hand in Hand mit jQuery.

Das Problem

Folgende Anforderung bestand im aktuellen Projekt: In der ersten Selectbox wird die Frequenz gewählt (monatlich, vierteljährlich usw.). Die zweite Box bietet eine Auswahl an Monaten zur Angabe der Dauer.

<select name="frequency" class="frequency">

  <option value="1">monatlich</option>

  <option value="3">vierteljährlich</option>

  <option value="6">halbjährlich</option>

  <option value="12">jährlich</option>

</select>

<select name="months" class="months">

  <option value="0">0</option>

  <option value="1">1</option>

  <option value="2">2</option>

  <option value="3">3</option>

  <option value="4">4</option>

  <option value="5">5</option>

  <option value="6">6</option>

  <option value="7">7</option>

  <option value="8">8</option>

  <option value="9">9</option>

  <option value="10">10</option>

  <option value="11">11</option>

</select>

Theoretisch

Sehr einfach zu erklären: Der Anwender wählt in der ersten Auswahl "halbjährlich" - darauf hin stehen in der Monatsauswahl nur noch "0" und "6" zur Verfügung. Welcher Monat angezeigt wird, kann ganz einfach mit der Modulo-Operation berechnet werden. Darüber hatte ich mich auch schon im Blog ausgelassen.

Der Klon wird mit der Klasse active gekennzeichnet und muss vor der nächsten Veränderung entfernt werden.

Praktisch

Jetzt wirds nett. jQuery ist natürlich im Projekt eingebunden. Sobald das Dokument geladen wurde, muss ein Eventhandler auf die Frequenzauswahl gelegt werden.

jQuery(function($) {

  $("select.frequency").onChange(function() {

  //hier gehts weiter!!

  });

});

Diese Form ist besser als das überall gesehene $(document).ready(function() {}), denn die $ Funktion muss nicht mehr zwangsläufig von jQuery besetzt sein, sondern wird dem eigenen Code als Parameter übergeben.

Als nächstes beschreibe ich alle Schritte zum Ändern der Selectbox $("select.months") einzelnd. Anschließend gibts nochmal die komplette Funktion unkommentiert im Ganzen.

new_frequency = $(this).val();

$form = $(this).parents("form:first");

Die Auswahl wird in new_frequency zwischengespeichert und das umfassende Formular in der Variable $form abgelegt, um später schneller darauf zugreifen zu können.

Die Variable $form beginnt mit einem Dollarzeichen. Damit kennzeichne ich Variablen, die ein jQuery-Objekt enthalten. So ist es leicher, diese im weiteren Verlauf zu erkennen. Dieses Vorgehensweise kann ich wärmstens empfehlen.

if($("select.months.active", $form).length > 0) {

  $("select.months", $form).filter(".active").remove().end().show();

}

Mit der Anweisung $("select.months.active", $form).length werden alle Selectboxen mit der Klasse active gesucht. Sind diese vorhanden, werden beide Selectboxen (die ggf. versteckte und der Klon) selektiert.

Mit der Funktion filter(".active") wird davon die aktive Selectbox ausgewählt und entfernt. Das end() setzt die Auswahl von filter() zurück und show() zeigt die übrig gebliebene Selectbox an.

jQuery Power in einer einzigen Zeile! Aber es wird noch besser...

Die Selectbox mit der Klasse .months muss geklont werden, verändert, angezeigt und die ursprüngliche Box versteckt werden. Zum Glück braucht man dazu auch nicht mehr als eine Zeile.

$("select.months", $form).clone().hide().insertBefore("select.months").end().addClass("active").find("option").filter(function(i) { return i%new_frequency == 0 ? false : true; }).remove();

Sieht komplizierter aus als es ist. Man kann es praktisch Stück für Stück lesen:

1. $("select.months", $form) sucht die Selectbox im aktuellen Formular mit der Klasse months.
2. clone() kopiert die aktuelle Auswahl und speichert sie irgendwo zwischen. Die Auswahl besteht nicht aus dem Klon, sondern der ursprünglichen Auswahl.
3. hide() - deshalb kann die Auswahl, also die erste Selectbox, auch einfach versteckt werden. Das passiert nach dem klonen, damit der Klon nicht extra wieder eingeblendet werden muss.
4. insertBefore("select.months") fügt den Klon vor der Selectbox ein.
5. end() setzt die Auswahl zurück. Damit besteht die Auswahl aus dem Klon und nicht mehr aus der ursprünglichen Selectbox.
6. addClass("active") fügt die Klasse hinzu damit der Klon später erkannt werden kann.
7. find("option") sucht alle Optiontags innerhalb der geklonten Selectbox.
8. filter(function(i) { return i%new_frequency == 0 ? false : true; })
   Ein großartiges Stück jQuery präsentiert hier die ganze Power der filter() Funktion. Dieser kann man nicht nur einen Tagnamen, eine ID oder eine Klasse übergeben, sondern auch eine anonyme Funktion! Anhand dieser wird jedes enthaltene Element überprüft. Gibt die Funktion true zurück, bleibt das Element in der Auswahl; ansonsten fliegt es raus.
   Diese Funktion besteht nur aus einer simplen Berechnung und schmeißt alle Monate raus, welche zur gespeicherten Frequenz passen.
   Schön, oder?
9. remove() entfernt dann die übrig gebliebenen Auswahlmöglichkeiten.

Fertig! Eine einzige Zeile klont und bearbeitet die Auswahlmöglichkeit. Und das sooft der Benutzer möchte. So sieht die Funktion im ganzen aus:

$(".frequency").change(function() {

  new_frequency = $(this).val();

  $form = $(this).parents("form:first");

  

  if($("select.months.active", $form).length > 0) {

    $("select.months", $form).filter(".active").remove().end().show();

  }

  

  $("select.months", $form)

      .clone().hide().insertBefore(".plan:visible select.months").end().addClass("active")

      .find("option").filter(function(i) { return i%new_frequency == 0 ? false : true; }).remove();

});

Fazit

Ich mag jQuery. Kennst du eine besser Lösung? Mal abgesehen von Plugins die das ganze mit einem unüberschaubaren Overhead erledigen?

Ansonten viel Spaß mit abhängigen Selectboxen.

Da hilft nur eins: während der Eingabe dem Benutzer direkt passende Tags vorschlagen. Eine automatische Vervollständigung wie beim Mailen in den großen sozialen Netzwerken oder beim suchen bei Google.

Zum Glück haben sehr schlaue Leute schon diverse Plugins erstellt, welche einen JSON String oder eine simple Textliste verarbeiten können. Zum Beispiel Autobox2. Gleich mal die Demo angucken, runterladen und dann ins eigene Projekt integrieren.

So funktionierts...

Vorbereitung

Bestimmt ist jQuery schon im gesamten Projekt verfügbar, wenn nicht, muss es unter views/layouts/default.ctp mit Hilfe des Javascript Helpers eingebunden werden:

echo $javascript->link('jquery.min');

echo $javascript->link('jquery.action');

echo $scripts_for_layout;

Der Javascript Helper sucht die Dateien automatisch im Ordner webroot/js/ und bindet sie ein, sofern sie vorhanden sind. In der Datei jquery.action.js befindet sich mein eigenes Script in dem das Verhalten der Seite gesteuert wird.

Sehr wichtig für den nächsten Schritt ist die Ausgabe der Variable $scripts_for_layout. Diese kann von jedem View aus befüllt werden. Das brauchen wir im View der Edit/Add Methode vom Model:

$javascript->link(array(

  'jquery.templating',

  'jquery.ui.autobox.ext.js',

  'jquery.ui.autobox.js'

), false);

Damit werden die Javascript Dateien nicht überall eingebunden, sondern nur auf den Seiten auf denen sie auch benötigt werden.

Nach dem gleichen Prinzip, aber mit dem HTML Helper wird die Autobox CSS Datei eingebunden.

$html->css('jquery.ui.autobox.css', null, array(), false);

Und da wir gerade dabei sind, bietet es sich an diese Datei zu öffnen und in der Zeile 66 den Pfad zum close.gif anzugeben. Wenn sich alles in den korrekten Ordnern befindet ist es einfach:

background: url('../img/close.gif');

Aussehen wird es gut, aber im Moment weiß das Script nicht wo es sich befindet. Damit die Baseurl auch in Javascript zur Verfügung steht, habe ich mir angewöhnt im HTML Gerüst das Basetag zu erweitern:

<base href="http://<?=$_SERVER['HTTP_HOST']?><?=$this->base?>/" host="http://<?=$_SERVER['HTTP_HOST']?>" />

Mit dieser Zeile im Layout wird später vieles einfacher. Leider validiert es mit dem Attribut host nicht mehr, wer darauf Wert legt, muss sich also eine andere Lösung überlegen.

jQuery Action

Jetzt gehts los und das Plugin wird initalisiert. Ich mache das gerne in der Datei jquery.action.js. Um es auf die schnelle zu testen, kopiere ich einfach das Beispiel aus der Demo. Gemäß des letzten Posts zu HABTM heißt mein Feld temp_tags. Das resultiert in der ID ModelTempTags:

jQuery(function($) {

  

  var list1 = [{text: 'Curious George'}, {text: 'George of the Jungle'}, {text: 'Felix the Cat'}];

  

  $('#ModelTempTags').autobox({

  [tab]list: list1,

  [tab]match: function(typed) { return this.text.match(new RegExp(typed, "i")); },

  [tab]insertText: function(obj) { return obj.text },

  [tab]templateText: "<li>Hey: <%= text %></li>"

  });

});

Seite neuladen, und... herrlich! Funktioniert. Nur eine Kleinigkeit: Die vorhandenen Tags werden nicht übernommen. Zum Glück hilft eine einzige Zeile um das Problem zubeheben. Innerhalb der Autobox Konfiguration wird die Vorbelegung (prevals) angegeben:

prevals: $('#LinkTempTags').val().split(', ')

Mit dieser Zeile wird der Inhalt ausgelesen, beim Komma geteilt und der Autobox als Vorbelegung übergeben. Dann kanns jetzt losgehen mit der asynchronen Datenübertragung. Das Attribut list in der Autobox Konfiguration wird ausgetauscht mit einer URL:

ajax: $('base').attr('href')+'tags/index',

Damit wird im Parameter val die Benutzereingabe an den Tags Controller geschickt. Und der muss jetzt noch reagieren.

Antworten mit CakePHP

Der Controller Tags ist dafür zuständig eine Liste zu genierieren. In der Variable $this->params['url']['val'] steht die Benutzereingabe zur Verfügung. Mit der wird eine Datenbankabfrage gestartet:

$tags = $this->Tag->find('all', array('conditions' => array('title LIKE' => $this->params['url']['val'].'%'), 'order' => 'Tag.title ASC'));

Mit Hilfe der RequestHandler Componente wird ein Ajaxaufruf erkannt. Dafür muss die Componente im Controller eingebunden werden.

class TagsController extends AppController {

  var $components = array('RequestHandler');

In der Index Funktion wird bei einem Ajaxaufruf der Renderingprozess gestoppt und purer Text zurück gegeben.

if($this->RequestHandler->isAjax()) {

  Configure::write('debug', 0);

  $this->autoRender = false;

  return '['.implode(',', Set::format($tags, '{text: "{0}"}', array('{n}.Tag.title'))).']';

}

Besondere Aufmerksamkeit verdient die letzte Zeile. Implode bekommt ein Array, das aus dem Core Utility Set stammt: Format. Eine großartige Funktion die ein verschachteltes Array umformatiert. In diesem Fall zu JSON Objekten, welche dann mit einem Komma verbunden werden.

Das wars! Kaum zu glauben, aber ein Neuladen macht die Einbindung komplett. Und den Webentwickler fröhlich!

Speichern im Model

Das Plugin erstellt für jeden Tag ein verstecktes Formularfeld, welches den gleichen Namen hat wie das Ursprungsfeld. Damit die eingegebenen Daten übertragen werden, muss der Name auf ein Array hinweise:

echo $form->input('temp_tags', array('name' => 'data[Model][temp_tags][]');

Der Trick sind die beiden eckigen Klammern am Ende. Damit steht die Eingabe im Model als Array zur Verfügung:

debug($this->data['temp_tags']);

Ganz normal. Aber: Mit ein bisschen jQuery lässt sich der Mouseover-Status schon bei einem Klick festsetzen. Das sieht gut aus und wirkt fast wie ein dynamisches nachladen der Seite.

Ansehen kann man sich diesen Effekt zum Beispiel hier im Hauptmenü oder auf der Seite von Isabel von Roon. Wie der Effekt eingebaut wird, was find(), filter() und siblings() bedeutet und wie man den aktiven Menüpunkt hervorhebt wird in diesem Artikel besprochen.

Die HTML Grundage

Das oben genannte Beispiel ist zu simpel, deshalb machen wir es etwas komplizierter undzwar mit einem verschachtelten Menü.

<div id="menu">

<ul>

<li><a href="#">Punkt 1</a></li>

<li>

<a href="#">Punkt 2</a>

<ul>

<li><a href="#">Punkt 2.1</a></li>

<li><a href="#">Punkt 2.2</a></li>

<li><a href="#">Punkt 2.3</a></li>

</ul>

</li>

<li>

<a href="#">Punkt 3</a>

<ul>

<li><a href="#">Punkt 3.1</a></li>

<li><a href="#">Punkt 3.2</a></li>

<li><a href="#">Punkt 3.3</a></li>

<li><a href="#">Punkt 3.4</a></li>

</ul>

</li>

<li><a href="#">Punkt 4</a></li>

</ul>

</div>

Die Funktionsweise ist klar: Bei einem Klick ins Menü darf sich nur das jeweilige Menü verändern (die Nachbarn). Einfach die Aktiv-Klasse generell zu entfernen und dem angeklickten Menüpunkt zuweisen hätte zur Folge, dass beim Klick ins Submenü der darüber liegende Punkt seine Aktiv-Klasse verlieren würde.

Demo: Hier ansehen was ich meine.

Lovley jQuery

Wer jetzt an ein kompliziertes und umfangreiches Script denkt, der hat noch nicht genug mit jQuery gearbeitet. Denn die Anforderungen benötigen nur eine einzige Zeile:

jQuery(function($) {

  $('#menu a').click(function() {

    $(this).blur().parents('li').siblings('li:has(.active)').find('a').removeClass('active').end().end().end().addClass('active');

    return false;

  });

});

Was hier passiert ist wird jetzt Stück für Stück durchleuchtet:

jQuery(function($) {})
Diese Funktion wird aufgerufen, sobald das DOM fertig geladen wurde. Als Parameter wird das jQuery-Framework übergeben und in der Variable $ gespeichert. Mit dieser Schreibweise hat man weniger Stress, wenn ein Kollege auf die Idee kommt ein zweites Javascript Framework einzubinden (Grrr...)

$('#menu a').click(function() {})
Mit dieser Anweisung werden alle Links im Element mit der ID Menü selektiert und jeder einzelne bekommt einen Eventhandler zugewiesen: click.

In der Funktion ist der angeklickte Link in der Variable this gespeichert.

$(this)
Mit diesem Konstrukt wird der angeklickte Menüpunkt in ein jQuery-Objekt verwandelt, und liegt als einziges auf dem Elementstack.

.blur()
entfernt den gepunkteten Rahmen um den Link. Eine alternative Möglichkeit wäre outline:none im CSS anzugeben. Je nach belieben.

.parents('li')
Jetzt wird es spannend! Diese Funktion wählt alle Elternelemente aus. Mit der Einschränkung, dass sie vom Typ li sind.

.siblings('li:has(.active)')
Siblings steht für Nachbarn. Diese Funktion findet nur die benachbarten Elemente. Klickt man also auf ein Untermenü, befinden sich nach siblings() alle LI Elemente dieser Liste im Stack.

Mit der Übergabe eines Selectors kann man die Nachbarn auch gleich einschränken. li:has('.active') steht für alle LI Elemente welche ein Objekt der Klasse .active beinhalten.

Alternativ könnte man auch die Funktion filter() benutzen. Mit siblings('li') werden alle benachbarten LI Elemente ausgewählt. Anschließend mit filter(':has('.active')') auf das enthalten sein eines aktiven Links geprüft. Und genau hier liegt der Unterschied zwischen filter() und find():

Filter() filtert die Elemente im Stack. Find() sucht innerhalb der Elemente im Stack. Logisch, oder?

Mit siblings('li:has(.active)') sparen wir uns eine Anweisung und im Stack befinden sich alle benachbarten Elemente, die einen aktiven Link beinhalten. Weiter gehts.

.find('a')
Innerhalb des LI Elements wird jetzt nach dem aktiven Link gesucht und dieser ausgewählt.

.removeClass('active')
Entfernt die Klasse von dem Link. (Bitte daran denken keinen Punkt vor der Klasse anzugeben!)

.end()
Mit der Funktion end() wird eine Veränderung im Elementstack rückgängig gemacht. Dabei bezieht sich das end() immer auf die als letztes getätigten Veränderungen.

Das erste end() macht also das find('a') rückgängig, im Stack befinden sich jetzt wieder die LI Elemente mit einem (ehemals) aktiven Link.

.end()
Als nächstes werden die Nachbarn aus dem Stack geworfen. (siblings)

.end()
Und jetzt noch die Elternelemente raus und wieder zurück zum Kind: $(this). Wir befinden uns jetzt wieder ganz am Anfang der Auswahl und es bleibt nur noch eine Funktion:

.addClass('active')
Diese Funktion weißt dem angeklickten Link die passende Klasse zu, damit beim nächsten Klick das ganze Spiel wieder von vorne beginnen kann.

Das wars!

Im Beispiel habe ich noch ein return false; hinzugefügt. Diese Anweisung verhindert, dass der Browser sein Standardverhalten abspielt (bei Links die angeklickte Seite aufrufen). In einer wirklichen Umgebung darf das natürlich nicht vorkommen.

Ich hoffe ihr konntet etwas aus diesem Artikel mitnehmen. Weitere jQuery Fragen und Beispiellösungen stelle ich gerne auf Anfrage vor. Nur rein in die Kommentare.

Frohes verketten!

jQuery bietet ja ein tolles Ajaxkonstrukt an mit dem es kein Problem ist Daten vom Server zu holen. Aber auf die Dauer wird es doch etwas nervig immer wieder zu tippen.

Und weil "objektorientiertes Javascript" und selber entwickeln so viel Spaß macht, habe ich mir eine alternative Lösung einfallen lassen: Im Projekt werden an geeigneter Stelle Elemente erzeugt, die alle benötigten Informationen enthalten.

Diese werden in einem Updater registriert, welcher sich um die regelmäßige Abfrage kümmert. Das war die Theorie und jetzt kommt die Praxis.

Das Element

Ein Element besteht aus einer URL auf dem Server, dem Typ der zurückerwartenden Daten und einer Funktion die aufgerufen wird, wenn die Aktion erfolg hatte. Im Quelltext sieht das so aus:

var Paul = new element('count/paul', 'json', function(j) {

  alert("Paul hat "+j.count+" Einträge.");

});

Diese Elemente können überall im Projekt erzeugt werden. Alternativen zu json sind alle Formen die jQuerys Ajaxfunktion erkennt: Html, Text und Jsonp.

Der Updater

Ganz am Anfang (oder am Ende, je nach Geschmack) wird der Updater initalisiert:

var Updater = new updater();

Der Updater akzeptiert zwei Einstellungen:

Updater.intervall = 1000; // Zeit bis zur nächsten Abfrage

Updater.baseurl = "http://kleiner.test.com/"; // String der vor jede URL geschrieben wird

Und hat eine handvoll Funktionen für den dynamischen Umgang mit dem Objekt:

Updater.start(); // Startet den Vorgang sofern Elemente vorhanden sind

Updater.stop(); // Stoppt die Aktualisierungen

Updater.isRunning(); // Prüft ob sich der Updater in Aktion befindet

Updater.log(); // Schreibt alle gespeicherten Elementen in die Konsole

Updater.register(Element); // Fügt ein neues Element hinzu

Updater.remove(Element); // Entfernt ein Element

Die Verwendung

Dem Updater werden beliebig viele Elemente, auch zur Laufzeit, übergeben:

Updater.register(Paul);

Updater.start();

Das wars! Die Funktion im übergebenen Element wird jetzt, im erfolgsfall, alle 1000 Millisekunden aufgerufen.

Die technische Seite vom Element

So sieht das Element aus:

function element(url, dataType, successFunction) {

  //einstellungen
  this.url = url;
  this.data = {};
  this.type = 'get'
  this.dataType = dataType || 'html';

  //callback um die daten zu bekommen
  this.getData = function() {
    return this.data;
  }

  //callback um an die URL zu kommen
  //erster parameter ist die im Updater gespeicherte baseurl
  this.getUrl = function(BASEURL) {
    return this.url;
  }

  //callback wenn eine antwort vorliegt
  //erster Parameter ist die Antwort vom Server, zweiter der Updater an sich
  this.success = successFunction || function(html, Updater) {
    console.log('Anfrage #'+Updater.counter);
    console.log(html);
  }

  //callback wenn ein fehler aufgetreten ist
  //erster parameter ist der Updater an sich um dieses Element daraus zu entfernen
  this.error = function(Updater) {
    //bei einem fehler entfernt sich das objekt selbstständig aus dem updater
    Updater.remove(this);
  }

}

Zwei Funktionen sind wichtig: getData() wird aufgerufen, bevor die Anfrage an den Server gesendet wird. Der Rückgabewert der Funktion wird an den Server geschickt.

Damit ist es also möglich, auf Veränderungen im Frontend zu reagieren. Zum Beispiel:

Paul.getData = function() {

  return {relation: $('body').attr('rel'), project: $('#project_selector').val()};

}

Schön, oder? Natürlich kann man sich noch viel einfallen lassen. Etwa mit der URL, welche mit Hilfe der Funktion getUrl() aus dem Element geholt wird. Es soll ja Fälle geben (CakePHP), bei denen es leichter ist Daten per URL zu übergeben:

Paul.getUrl = function(BASEURL) {

  return BASEURL+this.url+'/'+$('#team .paul').attr('rel');

}

Die Funktionen success(return, Updater) und error(Updater) erklären sich von selbst und haben als Parameter immer das umfassende Element dabei. Deshalb kann sich das Objekt in einem Fehlerfall auch selbstständig entfernen. Es könnte auch das Intervall verändern, ein neues Objekt hinuzfügen, oder was auch immer!

Die technische Seite vom Updater

Als erstes der gesamte Block Quelltext:

function updater() {

  //einstellungen
  this.intervall = 1000;
  this.elements = new Array();
  this.active_element = 0;
  this.baseurl = BASEURL;

  this.running = false;
  this.counter = 0;
  this.timeout = '';

  //alle elemente anzeigen
  this.log = function() {
    console.log(this.elements);
  }

  //neues element hinzufügen
  this.register = function(element) {
    this.elements.push(element);
  };

  //ein element entfernen
  this.remove = function(element) {
    for(i in this.elements) {
      if(this.elements[i] == element) {
        //delete this.elements[i];
        this.elements.splice(i, 1);
        return true;
      }
    }
    return false;
  }

  //elemente durchgehen
  this.process = function(active_element) {
    this.active_element = active_element || 0;

    if(this.elements[this.active_element]) {
      _this = this;
      _elem = this.elements[this.active_element];

      //ajaxaufruf
      $.ajax({
        //einstellungen
        url: _elem.getUrl(_this.baseurl),
        data: _elem.getData(),
        type: _elem.type,
        dataType: _elem.dataType,

        //hat funktioniert!
        success: function(result) {
          _elem.success(result, _this);
        },

        //ein fehler
        error: function(error) {
          //das object soll entscheiden wie es weitergeht
          _elem.error(_this);
        },

        //wie auch immer soll das nächste element aufgerufen werden
        complete: function() {
          _this.next();
        }
      });     

    }
    else {
      this.active_element = 0;
      this.next();
    }
  };

  //ruft process erneut auf, verzögert um intervall mit dem activen element
  this.next = function() {
    if(this.isRunning()) {
      //nur so zum spaß
      this.counter++;

      //zeit die bis zum nächsten aufruf vergehen soll
      var _intervall = 0;

      //nächstes element suchen
      this.active_element++;

      //schon am ende angelangt?
      if(this.active_element >= this.elements.length) {
        this.active_element = 0;

        //längerer intervall bis es wieder los geht
        _intervall = this.intervall;
      }

      //erneut aufrufen
      _this = this;
      _this.timeout = window.setTimeout(function() {
        _this.process(_this.active_element);
      }, _intervall);
      return true;
    }
    else {
      return false;
    }
  }

  //startet den vorgang
  this.start = function() {
    this.active_element = -1;
    this.running = true;
    this.counter = 0;
    this.next();
  }

  //stoppt das updaten
  this.stop = function() {
    this.running = false;
    window.clearTimeout(this.timeout);
    return this.counter;
  }

  //prüfen ob der Updater läuft
  this.isRunning = function() {
    return this.running;
  }
}

Nett, oder? Was ist passiert? Die Einstellungen sollten klar sein. In der Variable timeout wird der aktuelle Timeout gespeichert. Damit kann man beim Abbrechen alle Verbindungen trennen, anstatt noch eine ausführen zu müssen.

Log(), register() und remove() sind an sich uninteressant. Außer eine Erwähnung, dass der Operator delete ein Element zwar entfernt, aber danach nicht das Array neu durchnummeriert. Da liegen dann lauter "undefinied" rum. Deshalb habe ich splice() benutzt. Funktioniert super.

Spannend wird es in der Funktion process(). Diese wird für jedes Element aufgerufen. Als Parameter erwartet sie den Key vom aktiven Element. Wenn ein Element vorhanden ist, wird die Ajaxabfrage ausgeführt.

Innerhalb der Funktion Ajax() bekommt das this eine neue Bedeutung. Deshalb musste ich es in _this zwischenspeichern.

Die Funktion ruft also, je nach umstand, success() oder error() auf und übergibt die Kontrolle an das Element. In jedemfall wird aber _this.next() durch die Funktion Ajax.complete() aufgerufen. Diese wird, unabhängig vom Status, nach jeder Ajaxanfrage ausgeführt.

In der Funktion next() wird das nächste Objekt gesucht. Sofern der Updater läuft isRunning() wird der Counter erhöht und das Intervall auf Null gesetzt. Das passiert, weil alle registrierten Elemente sofort nacheinander aufgerufen werden sollen und erst anschließend die in this.intervall angegebene Zeit gewartet wird.

Wenn alle Elemente durchgearbeitet wurden, wird der Index auf Null und der Intervall auf die eingestellte Zeit gesetzt.

Anschließend gibt es ein klassisches window.setTimeout() um das ganze Spielchen wieder von vorne anzufangen.

Start(), stop() und isRunning() erklären sich wieder von selbst, und damit ist die Vorstellung beendet!

Fazit

Der große nächste Erweiterungsschritt ist in dem Updater alle Anfragen zu sammeln und in einem Packet an den Server zu schicken. Die Antwort kann dann direkt vom Updater auseinander gefriemelt und an die verschiedenen Elemente verteilt werden.

Dazu muss der Server allerdings noch vorbereitet werden, und bisher sind es noch nicht viele Benutzer. Aber ich denke es ist eine solide Grundlage die gut erweitert werden kann.

Das war auch die Intention dieses Postings. Hast du einen Vorschlag? Kritik? Hinweis? Freue mich über Kommentare und Inspiration. Danke für die Aufmerksamkeit.

<a href="#" id="ein-interner-link">Ein <span>wichtiger</span> Link</a>

Natürlich wird das Element ausgewählt und das HTML mit der Funktion html ausgelesen.

$("#ein-interner-link").html();

Diese Abfrage liefert allerdings das hier:

Ein <span>wichtiger</span> Link

Das ist nicht das gesamte HTML, sondern nur das innerHTML. Im folgenden Artikel gibt es die Lösung. Oder direkt zur verbesserten Lösung.

Der komplette HTML Code

Das zu selektierende Element wird mit einem Container umschlossen, dieser wird ausgewählt und dann befindet sich in der innerHTML Eigenschaft der komplette HTML Code des Elements.

So sieht es dann mit jQuery aus:

$("#ein-interner-link").wrap("<div></div>").parent().html();

Das liefert zwar den korrekten HTML Code, hat allerdings zwei Probleme:

1. Der Ursprungslink befindet sich jetzt in einem DIV Container. Wenn diese Funktion mehrfach angewendet wird, hat man eine ganze Reihe DIVs um den Link.

Die Lösung ist wieder einfach: Vor dem umschließen wird das Element kopiert:

$("#ein-interner-link").clone().wrap("<div></div>").parent().html();

2. Die Lösung ist so unelegant. Und wenig jQuery-like. Wenn jemand einen besseren Weg kennt, dann her damit. Bis dahin habe ich die Funktionalität in das Plugin entireHtml ausgelagert:

(function($) {

  jQuery.fn.entireHtml = function() {

  [tab]return this.clone().wrap('<div></div>').parent().html();

  }

})(jQuery);

Damit sieht es netter aus und wenn der rettende, alles erklärende Kommentar auftaucht, ist eine Veränderung nur noch an einer Stelle notwendig. So sieht die Anwendung dann aus:

$("#ein-interner-link").entireHtml();

Das ist doch wieder ganz nett. Was meinst du?

Inzwischen gibt es eine verbesserte Lösung in Pauls Blog.

Nun gibt es aber beim aktuellen Projekt folgendes Problem: Einem Projekt wird ein Kunde zugeordnet und jedes Projekt kriegt einen Ansprechpartner. Dieser Ansprechpartner ist in der User-Datenbank gespeichert und besitzt eine ID zu einem Kunden.

Legt man ein neues Projekt an und wählt einen Kunden aus, sollen nur noch die passenden Ansprechpartner angezeigt werden.

Nichts leichter als das! Hier stelle ich meine sehr flexible Möglichkeit für die Umsetzung mit jQuery und CakePHP vor. Grundwissen allerdings vorrausgesetzt.

Vorbereitungen

(Alle CakePHP Pfadangaben beziehen sich auf den app/ Ordner)
jQuery muss eingebunden werden. Dafür will ich den Ajaxhelper benutzen. Da das gesamte Projekt mit jQuery arbeiten soll, habe ich es für alle Controller auf einen Schlag eingebunden, und zwar in der Datei app_controller.php.

class AppController extends Controller {

  var $helpers = array('Ajax');

}

Die Javascriptdateien kommen in den Ordner /webroot/js/ und sind anschließend im Default Layout (oder welchem auch immer) in der Datei views/layouts/default.ctp schnell eingebunden:

echo $javascript->link(

  array(

  [tab]'jquery.min.js',

  [tab]'jquery.action.js',

  )

);

Damit der absolute Pfad der Anwendung in der JavaScript Datei zur Verfügung steht, wird im Layout das Tag <base> gesetzt. Das wird dann ausgelesen:

<base href="http://<?=$_SERVER['HTTP_HOST']?><?=$this->base?>/" />

Das Formular

Um für das neue Anlegen und das Bearbeiten von Projekten nicht zwei Formulare pflegen zu müssen, habe ich das Formular in ein Element ausgelagert, es befindet sich jetzt in der Datei views/elements/projectform.ctp und wird im View add.ctp und edit.ctp mit dem Befehl

echo $this->element("projectform");

eingebunden. Die Datei selbst besteht, gekürzt, aus folgenden Zeilen:

$c = array('') + $customers;

echo $form->input('customer_id', array(

  'class' => 'relation',

  'rel' => 'ProjectContact',

  'data' => 'users|customer_id',

  'options' => $c

));

echo $form->input('contact', array(

  'options' => $contacts

));

In der ersten Zeile wird das Array $customers, welches im Controller gesetzt wurde, um ein leeres Element am Anfang erweitert. Als nächstes folgen ein paar Erweiterungen für das zu erzeugende HTML Element auf die mit jQuery dynamisch zugegriffen wird.

'class' => 'relation' ist der grundlegende Hinweis für jQuery das hier was passieren soll.
'rel' => 'ProjectContact' bezeichnet die ID des Selectors welches die dynamischen Inhalte darstellt.
'data' => 'users|customer_id' enthält zwei Teile: users steht für das Model aus dem die Daten gezogen werden, customer_id ist die Spalte die mit dem Wert dieser Selectbox verglichen wird.
'options' => $c weißt dann nur noch das neue Array dem Element hinzu.

jQuery Action

Weiter gehts in der Datei webroot/js/jquery.action.js. Als erstes muss die Baseurl ausgelesen werden.

if($("base").length == 1)

  BASEURL = $("base").attr("href");

else {

  alert("Keine BaseUrl gefunden!!!");

}

Als nächstes kommt die geballte Action für die Selectbox. Erstmal der ganze fette Block jQuery-Schönheit vorweg, anschließend Zeile für Zeile erklärt. Für weitere dynamische Selectboxen muss man diesen Code dann nicht mehr anpassen:

$("select.relation").each(function() {
  //Vorhandene Elemente entfernen
  target = "#"+$(this).attr("rel");
  $(target).find("option").remove();

  //Eventhandler binden
  $(this).change(function() {
    $(target).find("option").remove();

    //Ajaxanfrage abschicken
    data = $(this).attr("data").split("|");
    val = $(this).val();
    if(val > 0) {
      $.ajax({
        url: BASEURL+data[0]+'/get/',
        data: {field: data[1], value: val},
        dataType: 'json',

        success: function(j) {
          $.each(j, function(i) {
            $(target).append('<option value="'+i+'">'+this+'</option>');
          });
        },
        error: function(e) {
          alert("Fehler bei der Ajaxanfrage! Siehe Konsole.");
          console.log(e);
        }
      });
    }
  })
});

$("select.relation").each(function() { Jede Selectbox mit der Klasse relation dient als Auslöser und braucht spezielle Behandlung.
In der Variable target wird die ID der zu ändernde Selectbox, für die spätere Verwendung gespeichert "#"+$(this).attr("rel");
$(target).find("option").remove(); entfernt die vorhandenen Einträge.

Jetzt wird der Selectbox ein Eventhandler zugewiesen, der ausgeführt wird, sobald sich der Inhalt der Selectbox ändert: $(this).change(function() {.
Falls es die zweite Änderung ist, müssen vorhandene Inhalte entfernt werden $(target).find("option").remove(); und per Ajax neue Inhalte geladen. Die Variable val speichert die aktuelle Auswahl und data beinhaltet die Informationen von weiter oben. Wenn eine gültige ID ausgewählt wurde, dann wird die Ajaxanfrage gesendet.

url: BASEURL+data[0]+'/get/', gesucht wird die Funktion get im Controller data[0] (im Beispiel = users).
data: {field: data[1], value: val}, für die Datenabfrage wird field und value standardmäßig per GET übergeben
und als Rückgabe ein JSON String erwartet dataType: 'json'.

Wenn die Anfrage erfolgreich war, wird diese Funktion ausgeführt: success: function(j) {
j beinhaltet das erhaltene JSON Array und wird Schritt für Schritt durchgegangen $.each(j, function(i) { um dem Zielelement target eine neue Option hinzuzufügen $(target).append('<option value="'+i+'">'+this+'</option>');

Danach folgt noch ein Errorhandler, der je nach belieben gestalltet werden kann, im Großen und Ganzen aber uninteressant ist.

Das wars schon. Jetzt gehts in den Controller User unter controllers/users_controller.php.

Im Controller

In der URL habe ich die Funktion get genannt, also muss sie hier definiert werden:

class UsersController extends AppController {

  function get() {

  }

}

Als erstes wird wie gewohnt eine Liste von Daten aus dem Model gezogen:

$list = $this->User->find('list', array(

  'conditions' => array(

  [tab]'User.'.$this->params['url']['field'] => $this->params['url']['value']

  )

));

Und jetzt wird es spannend, mit Hilfe der RequestHandler Komponente, die in der Datei app_controller.php oder constrollers/users_controller.php eingebunden wird.

var $components = array('RequestHandler');

Jetzt steht das Objekt $this->RequestHandler zur Verfügung, mit dessen Hilfe z.B. abgefragt werden kann ob die ankommende Anfrage per Ajax gesendet wurde. Wenn dies der Fall ist, darf es keine Debugausgaben mehr geben und die Liste soll als JSON String ausgegeben werden. Und so versteht das auch CakePHP:

if($this->RequestHandler->isAjax()) {

  Configure::write('debug', 0);

  $this->autoRender = false;

  return json_encode($list);

}

Fertig! jQuery kriegt jetzt von der Funktion einen JSON String zurück und kann diesen, wie beschrieben, in die Selectbox einfügen.

Fazit

Diese Lösung ist nur ein Vorschlag und ich bin mir sicher das es viele verschiedene Lösungswege gibt. Wahnsinnig wichtig ist die Tatsache, dass hier kein bisschen auf die Sicherheit geachtet wurde. Dieses Beispiel sollte man nicht unverändert im Livebetrieb einsetzen!

Ich bin mir auch nicht sicher, ob der gewählte Weg der beste ist. Deshalb freue ich mich diesmal besonders über Kommentare mit Anmerkungen und Erweiterungen.

Frohes backen!

Soweit kein Problem; vor einiger Zeit habe ich ein schönes Beispiel gefunden welches genau diese Problem löst, in allen Browsern und nur mit CSS. Was aber, wenn die Seite mit dem 960 Grid System CSS Framework aufgebaut wurde und nicht nur ein Footer hat sondern zwei?

Um genau zu sein, ist die Breite vom CSS Framework auf 960 Pixel beschränkt, der Footer mit Inhalten befindet sich innerhalb des umfassenden Containers, aber die Hintergrundgrafik soll über die gesamte Breite gehen.

Unmöglich? Niemals! Es folgt eine Skizze, der Lösungsansatz und ein paar Worte über das 960.gs.

Die Anforderung

Diese Skizze soll das Problem verdeutlichen. Der weiße Bereich ist der Inhalt welcher sich in der Höhe ausdehnt und den gesamten Platz ein nimmt.

Header und Footer sollen aber über die gesamte Breite gehen, wobei die Inhalte sich aber am Content orientieren müssen da die gesamte Seite zentriert ist.

"Viel Spaß" hat der Designer gesagt, hatte ich auch!

Das 960.gs

CSS Frameworks sind in aller Munde und es lassen sich damit wirklich schnell und einfach Layouts aufbauen. Ich habe mich in diesem Projekt gegen das kompliziertere, aber dafür flexiblere YAML entschieden weil es mir überdimensioniert erschien.

Im 960.gs entscheidet man sich für ein 12- oder 16-spaltiges Layout und benennt, je nach dem, den umfassenden Container:

<div class="container_16"></div>

<div class="outerwrap">
  <div class="container_16 wrap png_fix">
  [tab]
  [tab]<!-- KOPF -->
  [tab]<div class="grid_11 top">
  [tab]  <ul class="menu sf-menu">
  [tab]  [tab]###MAIN_MENU###
  [tab]  </ul>
  [tab]</div>
  [tab]
  [tab]<div class="grid_4 top logo">
  [tab]  ###LOGO###
  [tab]</div>
  [tab]
  [tab]<!-- TEASER (Bild) -->
  [tab]<div class="grid_11 teaser left">
  [tab]  ###TEASER###
  [tab]</div>
  [tab]
  [tab]<div class="grid_4 teaser right png_fix">
  [tab]  ###LOGIN###
  [tab]</div>

  [tab]
  [tab]<!-- CONTENT -->
  [tab]<div class="content_wrap">
  [tab]  
  [tab]  <!-- ganze spalte -->
  [tab]  <div class="grid_11 left">
  [tab]  [tab]<div class="content">
  [tab]  [tab]  ###CONTENT_LEFT###
  [tab]  [tab]</div>
  [tab]  </div>
  [tab]  
  [tab]  <!-- Rechts vom Inhalt -->
  [tab]  <div class="grid_4 right png_fix">
  [tab]  [tab]###CONTENT_RIGHT###
  [tab]  </div>
  [tab]  
  [tab]  <div class="clear"></div>
  [tab]</div>
  [tab]
  [tab]
  [tab]<!-- FOOTER -->
  [tab]<div class="footer_wrap">
  [tab]  <div class="grid_11 footer">
  [tab]  [tab]###COPYRIGHT###
  [tab]  </div>
  [tab]  
  [tab]  <div class="grid_4 footer">
  [tab]  [tab]<ul>
  [tab]  [tab]  ###FOOTER_MENU###
  [tab]  [tab]</ul>
  [tab]  </div>
  [tab]  
  [tab]  <div class="clear"></div>
  [tab]</div>
  </div>
</div>

Ein allgemeines Problem von CSS Frameworks wird in diesem Template auch gleich sichtbar: CSS Frameworks neigen zur Divirites. Dafür wird einem aber eine große Menge CSS-Nerv abgenommen. Hier bleibt kritisch zu betrachten wie viel Traffic die Seite zu erwarten hat und wie viel Zeit für die Realisierung veranschlagt wurde.

100% Höhe Nr. 1

Die kleinere Aufgabe besteht darin den Footer an das untere Ende der Seite zu kleben. Das geht mit dem Tutorial von xs4all ganz leicht: Der Container wrap bekommt eine relative Position zugewiesen und eine Mindesthöhe von 100%.
Der footer_wrap wird absolut positioniert und mit bottom:0 an den unteren Rand vom wrap gelegt. Damit bei längerem Inhalt oder kleinem Browserfenster, der Inhalt nicht über den Footer reicht kriegt der Container content_wrap einen Innenabstand (padding) nach unten, welcher der Höhe vom Footer plus Abstand enthält. Das ist der Trick!

100% Höhe Nr. 2

Jetzt hat der Footer noch kein Hintergrundbild. Damit es über die gesamte Breite geht kriegt es der Container outerwrap. Der hat allerdings ein Problem: Bei 100% Höhe hängt der Balken immer am unteren Browserrand. Wenn die Inhalte länger sind, bleibt der Balken einfach stehen. Im Bild repräsentiert der schwarze Rahmen das Browserfenster.

Da im guten Standard Typoscript sowieso jQuery eingebunden ist und für diverse Zwecke genutzt wird, kann das Lieblingsframework hier treue Dienste leisten:

Die Besucher ohne JavaScript kriegen einfach keinen Balken zu sehen. Dem Container outerwrap wird das Hintergrundbild wieder genommen und statt dessen der Klasse balken zugewiesen. Im jQueryscript wird eine Funktion hinzugefügt: fix_outerwrap_bug().

function fix_outerwrap_bug() {

  $(".outerwrap")

  [tab].addClass("balken")

  [tab].css("height", $(document).height());

}

jQuery(function($) {

  fix_outerwrap_bug();

});

$(window).resize(function() { fix_outerwrap_bug(); });

Fazit

Das es ohne JavaScript nicht funktioniert ist natürlich nicht ganz so schön, aber für eine Kleinigkeit im Design zu verkraften. Selber Schuld wer JavaScript deaktivert. Dank jQuery ist es ganz einfach und validieren tut es auch, warum also nicht?

Wer die vorgestellte Lösung in Aktion sehen will, dem sei ein Besuch auf der Seite http://www.arminiusfunds.com ans Herz gelegt. Viel Spaß und frohes investieren!

Soweit kein Problem und schon tausendmal implementiert. Aber wie sieht es aus, wenn der Redakteur mehrere Bilder auswählt? Na logisch: auf der Seite werden sie sehr sanft übergelendet (fadeIn, fadeOut). Und klar, das passiert natürlich mit jQuery und dem genialen Plugin innerfade von den medienfreunden.

Diese Technik eingesetzt findet sich zum Beispiel auf der Seite zur Ausstellung über Audrey Hepburn.

TYPO3 Template

Nachdem eine Seite mit mehreren Dateien über Seiteneigenschaften / Ressourcen / Dateien ausgestattet wurde, wird ins HTML Template gewechselt und ein neuer Marker eingebunden. Ich nenne ihn mal rubrikBild mit der ID head.

<div id="head">###rubrikBild###</div>

Als nächstes wird der Marker per Typoscript definiert. Er ist vom Typ COA und soll aus einer Liste von Bildern bestehen.

rubrikBild = COA

rubrikBild {

  10 = IMAGE

  10.file {

  [tab]import = uploads/media/

  [tab]import.data = levelmedia : -1, slide

  [tab]import.listNum = 0

  }

  10.wrap = <li>|</li>

  

  wrap = <ul>|</ul>

}

Das erste Objekt 10 wird definiert als Bild = IMAGE. Über die Angabe 10.file wird eine Datei angesprochen. import gibt den Ursprungsort an, import.data bestimmt die Vererbung auf Unterseiten. Damit wird das Bild der übergeordneten Seite angezeigt, sollte kein eigenes bestehen. import.listNum wählt aus der Liste das erste Bild aus. Abschließend wird das generierte Img-Tag in einem Listenelement verpackt 10.wrap = <li>|</li> und das komplette Objekt als Liste wrap = <ul>|</ul>.

Hm. Mit diesem Code wird jetzt nur ein einziges Bild in einer Liste dargestellt. Eindeutig zuwenig zum Überblenden. Deshalb muss dieser Code mit einer Schleife ersetzt werden. Dazu werden die ausgewählten Dateien in einen Text geschrieben und mit der Funktion split auseinander genommen. Anschließend kann jedes Element einzeln behandelt werden.

rubrikBild = COA

rubrikBild {

  10 = TEXT

  10.data = levelmedia:-1, slide

  10.split {

  [tab]token = ,

  [tab]cObjNum = 1

  [tab]1 {

  [tab]  10 = IMAGE

  [tab]  10.file.import.current = 1

  [tab]  10.file.import = uploads/media/

  [tab]  10.wrap = <li>|</li>

  [tab]}

  }

  

  wrap = <ul>|</ul>

}

Das Auslesen der Datei und die Wraps sind wie im oberen Beispiel, aber hier werden jetzt alle angegebenen Dateien ausgelesen!

CSS

Die Darstellung der Liste richtet sich natürlich nach dem Seitenlayout. Auf jeden Fall sollte man es mit position:absolute so einrichten, das alle Bilder übereinander liegen damit Benutzer ohne JavaScript nicht von einem Haufen sinnloser Bilder erschlagen werden.

JavaScript

Jetzt fehlen noch ein paar Zeilen jQuery und fertig ist die Funktion! Als erstes muss das Plugin innerfade eingebunden werden. Natürlich über Typoscript im Roottemplate und dort entweder per page.10.headerData oder page.includeJS, je nach Geschmack würde ich mal behaupten.

Dann wird eine Datei für eigene Scripte benötigt, ich nenne sie gerne action.js (eingebunden NACH dem jQuery Core und allen benötigten Plugins), die eine Funktion beinhaltet, welche aufgerufen wird sobald alles fertig geladen wurde:

jQuery(function($) {

  // ... hier gehts los ...

});

if($("#head ul li").length > 1) {

  // ...hier gehts weiter ...

}

$("#head ul").innerfade({

  speed: 2000,

  timeout: 4000,

  containerheight: '250px'

});

Zu beachten ist, dass die Funktion innerfade auf den umfassenden Container, also auf das <ul>, angewendet wird und nicht auf die einzelnen Elemente. Wenn man die Angabe containerheight vergisst weglässt, dann funktioniert es nicht im Internet Explorer. Daran denken! Noch mehr mögliche Einstellungen sind im Quelltext von jquery.innerfade.js dokumentiert.

Fertig

Jetzt in der Schulung die Freude der Auftraggeber genießen und viele schöne Überblendungen auf den eigenen Seiten beobachten. Sobald unsere neue Seite veröffentlich wurde, wird sie hier als Beispiel dienen. Bitte noch ein bisschen Geduld. Die Ausstellungsseite timeless-audrey benutzt diese Technik.

PS: Ein Linktipp; die Firefox Erweiterung Wappalyzer verrät auf einen Blick welche Systeme eine Internetseite einsetzt. Sehr praktisch! Danke t3n.