Weblication Tipps

Der Akkordion Effekt ist eine bereits weit verbreitete Javascript Technik, um viele Informationen auf einer Seite strukturiert und übersichtlich darzustellen. Dabei wird dem Benutzer nur ein Teil der Informationen angezeigt und mithilfe von Javascript andere Teile ausgeblendet, sowie bei Bedarf wie ein Akkordion aufgezogen und dargestellt.

Eine der wohl bekanntesten Beispiele für das Akkordion ist apple.com, dort wird es zum Beispiel auf der Unterseite Downloads im linken Seitenbereich genutzt. Allerdings gibt es auch zahlreiche andere Möglichkeiten den Effekt einzusetzen, so wird in diesem Beitrag gezeigt wie es auf einer Weblication Website mithilfe einer Liste eingesetzt werden kann, zum Beispiel für ein FAQ Bereich. Eine Umsetzung und Darstellung ist auf der Website hametum.de im Bereich Häufige Fragen zu sehen. Somit ist die Darstellung nicht nur besonders interessant und schön anzuschauen, sondern ebenfalls auch noch einfach über Weblication zu pflegen.

Nun zu den einzelnen Code-Fragmenten und wie dies umgesetzt wird:

Zunächst benötigt man natürlich jQuery. Wie bereits in dem Beitrag jQuery Lightbox in Weblication erwähnt, kann man jQuery hier herunter laden. Anschließend benötigt man noch das Plugin für die Akkordion Funktion, diese ist als Widget in dem jQuery UI enthalten und hier zu finden.

Hat man nun beide Skripte integriert, wird das Akkordion über den folgenden Code aktiviert:

jQuery().ready(function(){
jQuery('#accordion').accordion({
    header: 'h3',
    active: false
});
});

Dabei erkennt man, dass nach dem Element mit der ID “accordion” gesucht wird, um diesem den Akkordion Effekt mit zu geben. Als Header wird in diesem Fall eine h3-headline definiert, welche natürlich später auch im Code enthalten sein sollte. Natürlich kann dies beliebig angepasst werden, sofern die dazugehörigen Parameter ebenfalls geändert werden.

Daher ist unser Listentemplate (als faq.row abgespeichert) wie folgt strukturiert:

<!--PRC:LISTHEADER-->
<div id="accordion">
<!--PRC:LISTHEADER-->
 
<!--PRC:LISTROW-->
<!--PRC:EDITBUTTONROW -->
<h3><a href="#"><!--PRC:XLITE element="question" --></a></h3>
<div><!--PRC:XLITE element="answer"--></div>
<!--PRC:LISTROW-->
 
<!--PRC:LISTFOOTER--></div>
<!--PRC:LISTFOOTER-->

In dem Template wir auf XLITE Element zugegriffe, welche später die Daten darstellen werden. Nun muss dieses Listenelement noch durch einen Listenaufruf dargestellt werden. In der Listen werden XML Dateien dargestellt, welche in einem vordefiniertem Ordner liegen. Die Liste sieht in unserem Fall so aus:

  <executeXt type="weblication.list" version="1.1">
 <var name="listrow" value="/projekt/templates/list/rows/faq.row"/>
 <var name="listrowalt" value=""/>
 <var name="filetypes" value="xml"/>
 <var name="showmode" value="3"/>
 <var name="filesmax" value=""/>
 <var name="sort" value="item_sort_asc"/>
 <func name="List.show"/>
 <var name="subdirs" value=""/>
 <var name="static" value=""/>
 <var name="expires" value=""/>
 <var name="filter" value=""/>
 <var name="firstentry" value=""/>
 <var name="anonymous" value=""/>
 <var name="dir" value="/projekt/items/"/>
</executeXt>
 
Nun fehlt noch das Template (template.xml) für die einzelnen Elemente. Dies ist relativ einfach aufgebaut, eine XML Struktur mit einem Frage sowie einem Antwort Element:
<pre lang="xml">
<group>
	<question></question>
	<answer></answer>
</group>

Dieses Template können wir in einem template Unterordner ablegen und eine Pflegemaske dafür definieren. Somit wird die Bearbeitung für den Redakteur einfacher gemacht.

Pflegemasken sind unter dem Pfad /weblication/wEditors/ abgelegt. Wir nennen unsere FAQ.wMask.xml und definieren diese in den Ordnereinstellungen des Ordners in welchem die einzelnen XML Dateien liegen. Natürlich kann man Pflegemasken auch einfach in Weblication selber erstellen und zuweisen. Hier zu Orientierung unsere Pflegemaske:

<wMask version="1.0">
 <view bodyCaption="Body" bodyView="" defaultCaption="Entwurf" defaultView="" languageCaption="Sprachen" languageView="" maskCaption="Beschreibung" maskView="1" optionsCaption="Optionen" optionsHtmlCaption="HTML-Optionen" optionsHtmlView="" optionsView="" selected="mask" sourceCaption="Quelltext" sourceView=""/>
 <base file="template.xml"/>
 <element caption="Frage" editor="input" values="" wPath="xlite:question"/>
 <element caption="Antwort" editor="textarea" values="" wPath="xlite:answer"/>
</wMask>

Nun ist das Akkordion eingerichtet und kann befüllt werden. Die Darstellung der Akkordions kann sehr stark unterschiedlich sein. Ein gutes Beispiel sind die vielen Beispiele hier. Deswegen sind wir gespannt weitere Beispiele hier in den Kommentaren wieder zu finden. Einfach kommentieren und das eigene Design vorstellen.

Dieser Eintrag wurde am on Dienstag, 29. Dezember, 2009 um 19:44 Uhr veröffentlicht und ist abgelegt unter Weblication Mods, XML.
Du kannst Antworten oder Reaktionen auf den Beitrag mithilfe des RSS 2.0-Feeds verfolgen. Du kannst eine Antwort schreiben, oder einen Trackback von Deiner Seite erstellen.
Verwendete Tags: accordeon, akkordion, aufzieh effekt, jQuery, Pflegemasken, plugin.