jQuery im CSS programmieren

05.06.2013

jQuery kann entweder über CSS-Only Aufrufe verknüpft oder auch direkt im CSS programmiert werden. Anhand eines Beispieles zeige ich Ihnen, was damit möglich ist.

Aufgabenstellung

Als Beispiel nehmen wir eine CSS-Only-Variante für eine Inhaltsbox. Diese soll zuerst nur in einer gewissen Höhe angezeigt werden. Durch eine Aufklappfunktion kann die Box nachträglich maximiert und wieder verkleinert werden. Alle Anpassungen sollen rein in CSS umgesetzt werden. Der IE 7 soll die Box immer in der vollen Höhe anzeigen und max-height ignorieren, obwohl er es eigentlich unterstützt, da der :before-Selektor nicht genutzt werden kann. 

Quelltext der CSS-Only Variante

/*@wCssFragment{class:elementBox;variant:25;caption:Vergrößerbar;caption-en:Expandable}*/
.elementBox_var25                          {}
.elementBox_var25 > .boxInner              {max-height:200px;*max-height:10000px;overflow:hidden;-w-jquery:jQuery(this).after('<div class="boxInnerOpener"></div><div class="boxInnerCloser"></div>');}
.elementBox_var25 > .boxInnerOpener        {*display:none;cursor:pointer;margin-top:10px;border-top:solid 1px $borderColorLines;-w-jquery:jQuery(this).click(function()\007BjQuery(this).hide()\003BjQuery(this).prev().css('max-height', '10000px')\003BjQuery(this).next().show()\007D);}
.elementBox_var25 > .boxInnerOpener:before {float:right;content:'ausklappen';padding:0 8px;background-color:$backgroundColorBoxSheet;}
.elementBox_var25 > .boxInnerCloser        {display:none;cursor:pointer;margin-top:10px;border-top:solid 1px $borderColorLines;-w-jquery:jQuery(this).click(function()\007BjQuery(this).hide()\003BjQuery(this).prev().prev().css('max-height', '200px')\003BjQuery(this).prev().show()\007D);}
.elementBox_var25 > .boxInnerCloser:before {float:right;content:'zuklappen';padding:0 8px;background-color:$backgroundColorBoxSheet;}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo pretium nisl. Integer sit amet lectus. Nam suscipit magna nec nunc. Maecenas eros ipsum, malesuada at, malesuada a, ultricies dignissim, justo. Mauris gravida dui eget elit.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo pretium nisl. Integer sit amet lectus. Nam suscipit magna nec nunc. Maecenas eros ipsum, malesuada at, malesuada a, ultricies dignissim, justo. Mauris gravida dui eget elit.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo pretium nisl. Integer sit amet lectus. Nam suscipit magna nec nunc. Maecenas eros ipsum, malesuada at, malesuada a, ultricies dignissim, justo. Mauris gravida dui eget elit.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo pretium nisl. Integer sit amet lectus. Nam suscipit magna nec nunc. Maecenas eros ipsum, malesuada at, malesuada a, ultricies dignissim, justo. Mauris gravida dui eget elit.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo pretium nisl. Integer sit amet lectus. Nam suscipit magna nec nunc. Maecenas eros ipsum, malesuada at, malesuada a, ultricies dignissim, justo. Mauris gravida dui eget elit. 

Konventionelle Lösungsansätze

Ein Ansatz wäre nun, das Template anzupassen, indem man die notwendigen HTML-Elemente ergänzt, diese über jQuery dynamisiert und die Darstellung im CSS anpasst. 

Eine reine CSS / jQuery-Lösung, bei der auf die HTML-Anpassung verzichtet wird, wäre auch denkbar und der ersten Lösung vorzuziehen. HTML, welches nur in Verbindung mit JavaScript genutzt werden kann, sollte vorzugsweise auch per JavaScript generiert werden, da es sonst generell über CSS ausgeblendet werden muss und keinerlei Funktion hat. 

Lösung über CSS-Only

Um die Programmierung noch kompakter zu gestalten wurde in diesem Fall die CSS-Only Variante gewählt. Diese hat nicht nur den Vorteil, dass sie sehr kompakt und übersichtlich programmiert werden kann, sondern ist auch vollständig über die Oberfläche installierbar. 

HTML-Elemente im CSS über jQuery ergänzen

Über eingebettetes jQuery werden die notwendigen HTML-Elemente, also die Auf- und Zuklapper ergänzt. Diese erhalten dann gleich die im folgenden über CSS definierten Klassen. Über den :before-Selektor werden die Beschriftungen ergänzt. Bei mehrsprachigen Seiten können Sie die Texte sprachabhängig im CSS definieren.

Onclick-Ereignisse im CSS über jQuery setzen

Die über jQuery im CSS generierten HTML-Elemente erhalten nun die notwendigen onclick-Ereignisse, welche zum einen den auto-height Wert anpassen und zum anderen die jeweils alternative Schaltfläche per CSS einblenden.

Sonderzeichen bei der eingebetteten Programmierung

Wenn Sie innerhalb von CSS jQuery programmieren, müssen Sie verhindern, dass Sonderzeichen als CSS interpretiert werden. Dazu müssen diese hexadezimal codiert werden. Zu codierende Sonderzeichen sind:

  • ; - \3B
  • { - \7B
  • } - \7D

Ausgelagerte Skripte

Die über CSS generierten jQuery-Skripte werden in der scripts/optimized/css.js gespeichert und nach dem Laden über die ui.js in der Reihenfolge interpretiert, wie sie im CSS programmiert werden. 

Vorteile und Grenzen der eingebetteten jQuery Programmierung

Als Entwickler hat man durch diese Art den Vorteil, dass man nicht in mehreren Dateien programmieren muss, da jQuery und CSS sowieso aufeinander abgestimmt werden müssen. Der Vorteil der einfachen Installation über CSS-Only Varianten wurde ja bereits angesprochen. Anpassungen bestehender Varianten sind am Ort des Geschehens schnell durchführbar und weitere Varianten lassen sich auf Basis bestehender Umsetzungen schnell erstellen. Über den  @wCssFragment-Kopf sind die gemachten Varianten zudem sofort für die Redakteure verfügbar und die im CSS ausgefüllten Bezeichnungen werden sprachabhängig vom Editor automatisch erkannt.

Bei Umfangreichen jQuery-Skripten eignet sich das CSS-Only Prinzip eher als Schnittstelle zu externen jQuery-Funktionen, da die Programmierung direkt im CSS sonst schnell unübersichtlich werden würde. Auch bei häufig benötigten Funktionen empfiehlt es sich, diese als jQuery-Funktionen bereitzustellen und im CSS nur noch zu verknüpfen.