13. März 2012

Mit Grids und jQuery schöne Effekte basteln

in Tutorial, TYPO3, TypoScript

Jeder von euch kennt die Extensions wie z.B. „jfmulticontent„, die für Redakteure schöne Tab-Navigationen oder Accordions bieten, um Inhaltselemente aufgeräumt und strukturiert anzeigen zu lassen.

Heute möchte ich eine für den Integrator einfache und für den Redakteur übersichtliche Methode zeigen, um solche Effekte ohne Extension und ohne die teils nervigen Updates nachzubauen.

Einzige Bedingung hierfür ist die TYPO3 Version >= 4.6 und die Extension „gridelements„.
Einfach über den Extension Manager installieren und – nicht vergessen – die statischen Templates einbinden.

Als Beispiel habe ich mir heute den Effekt „Accordion“ ausgesucht.

Wir beginnen damit, ein Grid Element anzulegen mit dem redakteursunterstützenden Namen Accordion. Im Wizard für die Elemente sind wir schnell fertig, da wir nur diesen einen Kasten benötigen. Wir geben der „Spalte“ auch den Namen Accordion und die Spaltennummer ist die „1“.

Nachdem wir das Grid Element gespeichert haben, müssen wir nur noch das TypoScript einfügen:

tt_content.gridelements_pi1.20.10.setup {
  # ID of gridelement
  1 < temp.gridelements.defaultGridSetup
  1 {
    columns {
      # colPos ID
      1 < .default
      1.wrap = <div class="accordion">|</div>;
    }
  }
}

Die HTML-Grundstruktur haben wir jetzt. Nun brauchen wir das nötige JavaScript. Das finden wir unter http://jqueryui.com. Dort können wir für das Accordion nötige JS zusammenstellen lassen. Dieses müssen wir herunterladen, entpacken und in unsere TYPO3 Instanz hochladen.
Dann die nötigen TypoScript-Befehle:

# CSS von Accordion / Theme ui-lightness
page.includeCSS.accordion = fileadmin/res/css/ui-lightness/jquery-ui-1.8.18.custom.css
# jQuery Source
page.includeJSFooterlibs.jquery = fileadmin/res/js/jquery-1.7.1.min.js
# jQuery UI Accordion Source
page.includeJSFooter.accordion = fileadmin/res/js/jquery-ui-1.8.18.custom.min.js
# jQuery UI Accordion Init
page.includeJSFooter.accordion_init = fileadmin/res/jquery-accordion.js

Die letzte Datei jquery-accordion.js müssen wir selbst erstellen und den initialisierenden Code hineinschreiben:

$(function() {
  $( ".accordion" ).accordion();
});

Da laut Dokumentation der Standard-Header ein <h3> ist, wir in unserem Beispiel aber die css-styled-content Erweiterungen nutzen, müssen wir den Code anpassen:

$(function() {
  $( ".accordion" ).accordion({ header: 'div.csc-header' });
});

Weitere Anpassungen von Accordion kann man auf der Seite von jQuery UI einsehen.

Somit müssten wir jetzt ein schönes Resultat finden, wenn wir Inhaltselement in das Grid Element hineinziehen (Drag’n’Drop möglich):

15 Reaktionen zu “Mit Grids und jQuery schöne Effekte basteln”

Kommentare abonnieren (RSS) oder TrackBack URL

Du schreibst „… ohne die Verwendung von Extensions…“. Und in der nächsten Zeile schreibst du dass man lediglich die Extension gridelemts benötigt. Also doch wieder eine Extension…

Klaus am 13. März 2012 um 22:01

Accordions ohne Extension zu basteln geht aber auch. Das habe ich gerade lokal auf einer Testseite gemacht! Dachte bei diesem Artikel etwas neues zu finden…..

maddin am 14. März 2012 um 08:41

Cooles Tutorial! Hat man t3jquery installiert, so braucht man nur noch sein custom ui theme + das custom Js. Möchte man es ala Bootstrap Collapsible Plugin, dann einfach die Option „collapsible: true“ hinzufügen. Jetzt habe ich für manche Sachen die Qual der Wahl „flux“ oder „gridelements“… :-]

Josef Florian Glatz am 14. März 2012 um 08:57

Bzgl. Extension: Soll nicht gridelements irgendwann in den Core übergehen? Oder ist das nur ein Gerücht?

Josef Florian Glatz am 14. März 2012 um 08:58

Gridelements in den Core zu integrieren ist wohl das langfristige Ziel. Aber m. W. wurde es erstmal als Extension veröffentlicht, damit man hier unabhängiger von Core-Releases ist und somit schneller auf Bugs o. ä. reagieren kann.

Tobi am 14. März 2012 um 09:24

Da ich zukünftig nicht mehr templavoila einsetze, sondern gridelements (was etliche Funktionen von TemplaVoila nachbildet) und FLUIDTEMPLATE, kommt dieser Artikel wie gerufen, danke 🙂

Sven Burkert am 14. März 2012 um 16:17

Hi

bei mir ist es ganz genauso wie bei Sven.
Danke für den guten Tipp.

KimPixel am 19. März 2012 um 23:31

mir fällt gerade auf das es so nicht möglich ist mehr als 1 Inhaltselement innerhalb des Accordion zu haben.

KimPixel am 03. April 2012 um 11:04

Hallo,

ich bin durch den Artikel auf Gridelements ausmerksam geworden. Habe damit jetzt mal etwas experementiert. Klappt wunderbar! Sollte ein fester Bestandteil von Typo3 werden.

Hätte hier noch eine kleine Frage in die Runden. Wäre es über Gridelemente auch möglich eine Tabfunktionalität ähnlich wie bei http://typo3.cms-jack.ch/de/erweiterungen/jftabulatorsitemap/ zu realisieren?

Gruß Thomas

Thomas am 05. September 2012 um 11:00

Hallo Thomas,

in meinem Beispiel geht es ums Accordion. Du kannst das selbe natürlich auch mit Tabs machen. Einfach nur ein andere jQuery Aufruf, ansonsten das selbe Prozedere.

Thomas Löffler am 05. September 2012 um 11:05

Accordions horizontale oder vertikale gehen auch gut und einfach mit CSS3.

Kurt Kunig am 07. November 2012 um 17:16

Hallo Thomas,
ich habe das Accordion eingebaut, und hat auch wunderbar funktioniert… bis vor kurzem 🙁
Abhilfe durch ersetzen von „1 < temp.gridelements.defaultGridSetup" mit "… lib.gridelements…" im TypoScript.
Gruß, Jean-Jacques

Jean-Jacques am 11. April 2013 um 13:31

In meinem Blog kann man nachschauen, wie man einen Slider mit Ext. gridelements umsetzen kann:
http://blog.sbtheke.de/web-development/typo3-slider-mit-gridelements

Sven Burkert am 21. Juli 2013 um 18:13

Hallo, super Anleitung. Danke. Bei mir funzt es jedoch nicht. Habe typo3 6.2 fluid mit der Entwickler-Version von gridelements im Einsatz. Könnte es daran liegen?
Danke für Antworten!

Hartmut am 24. Mai 2014 um 20:03

Da das originale Posting schon etwas Älter ist, hat sich in der zwischenzeit das Setup etwas geändert:
tt_content.gridelements_pi1.20.10.setup {
1 < lib.gridelements.defaultGridSetup
1 {
columns {

Flo am 30. Mai 2014 um 14:03

Kategorien

Archiv