Ich möchte gerne zum Hauptmenü (Navigation)
Ich möchte zum Hauptinhalt der Seite
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht
Logo von kupix webdesign Internet-Agentur
  • Aktuelle Hauptseite:
  • Über uns
    • Wie Sie uns finden
    • Referenzen
      • Ref. Kompaktübersicht
      • Referenzen gruppiert
      • Nicht mehr online
    • Testimonials
    • Unsere Partner
    • Kontakt
    • Angebotsanfrage
    • Einzugsermächtigung
    • Barrierefreiheit
    • Detail-Infos
  • Leistungen
    • Webdesign
      • Betreuung Ihrer Webseiten
      • Web auf'm Smartphone
      • One-Pager
    • Webseiten mieten
    • Webhosting
    • Ihre Geschäftspapiere
    • SKI
      • Fragen
      • Beispiele
      • SKI bestellen
  • Aktuelle Hauptseite:TYPO3
    • Über das CMS 'TYPO3'
    • TYPO3–Qualitätskriterien
    • Was kostet TYPO3?
    • TYPO3 für Redakteure
    • TYPO3 Hochrüstung!?
    • TYPO3 Snippets
      • Eigenes Inhaltselement (CType)
      • MASK-Akkordeon
      • MASK-Tabs
      • MASK-Multicolumn
      • Slider über »Dateisammlung«
      • Text&Media–Slider
      • Text&Media Bilder aus Verzeichnis
      • Aktuelle Hauptseite:#Gridelements-Akkordeon
      • #Gridelements-Tabs
      • T3 jQuery-Zoomple
      • News-List Mini-Cards
    • TYPO3 Lernvideos
  • Service
    • Support / Fernwartung
    • Was bedeutet CMS?
    • Warum ein CMS!?
    • Das CMS TYPO3
    • E-Mail-Konto einrichten
    • E-Mails sind Postkarten
    • Homepage-Validierung
  • Designelemente
    • Grids (Rasterelemente)
      • 2-Spalter
      • 3-Spalter
      • 4-Spalter
      • 5-Spalter
    • Boxen
      • Video-Box
      • Boxen nebeneinander
    • Features
      • Akkordeon
      • Akkordeon CSS
      • Bilder aus Verzeichnis (Thumbs)
      • Bilder aus Verzeichnis (Mauer)
      • Slider mit Hintergrundbildern
      • BX-Slider
      • GE Cards
      • Lupeneffekt
      • Parallax
      • Tabs
      • Timeline / Roadmap (news)
      • Timeline / Roadmap (textmedia)
      • Tabellen sortieren
      • News: Mini-Cards
      • Textarea-Ticker
  • Aktuelles
    • Änderungen
    • News Archiv
  • Impressum
  • Datenschutz
  • Kontakt
  • Seitenübersicht
kupix Logo
Home » TYPO3 » TYPO3 Snippets » #Gridelements-Akkordeon
TYPO3
  • Über das CMS 'TYPO3'
  • TYPO3–Qualitätskriterien
  • Was kostet TYPO3?
  • TYPO3 für Redakteure
  • TYPO3 Hochrüstung!?
  • Aktuelle Seite:TYPO3 Snippets
    • Eigenes Inhaltselement (CType)
    • MASK-Akkordeon
    • MASK-Tabs
    • MASK-Multicolumn
    • Slider über »Dateisammlung«
    • Text&Media–Slider
    • Text&Media Bilder aus Verzeichnis
    • Aktuelle Seite:#Gridelements-Akkordeon
    • #Gridelements-Tabs
    • T3 jQuery-Zoomple
    • News-List Mini-Cards
  • TYPO3 Lernvideos

T3 jQuery-Akkordeon mit Gridelements

Und Ihr seht das jQuery-Akkordeon hier sofort im Einsatz:

Typoscript Code

Alle Gridelements wurden auf Fluid-Templates umgestellt. Demnach ist der Typoscript-Code:

//tt_content.gridelements_pi1.10 =< lib.stdheader
tt_content.gridelements_pi1.20.10.setup {
//  jQuery Akkordeon
   jqaccordion < lib.gridelements.defaultGridSetup
   jqaccordion {
      cObject = FLUIDTEMPLATE
      cObject {
            file = {$tmpPath}accordion.html
              templateRootPaths.10 = fileadmin/Templates/Templates/
             partialRootPaths.10 = fileadmin/Templates/Partials/
             layoutRootPaths.10 = fileadmin/Templates/Layouts/
         settings.defaultHeaderType = {$styles.content.defaultHeaderType}
         settings.accordion = 1
        }
   }
}

// MUSS ins SETUP geschrieben werden, ganz am Schluss, da sonst Teile gelöscht werden!!!
   tt_content.gridelements_view < tt_content.gridelements_pi1

 

Weiterhin steht im Fluidtemplate "accordion.html" beispielhaft:

<script type="text/javascript">
   $(function() {
      $( ".ge-accordion" ).accordion({
         header: '> .fsc > .ce-header',
         collapsible: true,
         autoHeight: false,
         heightStyle: 'content',
         active: 0
      });
   });
</script>

<div  id="c{data.uid}" class="ge-accordion l2t{data.flexform_acc-link2top}  fsc ceLayout {data.CType}{data.layout}"
      data-role="collapsible-set"
>
   <f:render partial="Header" arguments="{_all}" />
   <f:format.raw>{data.tx_gridelements_view_column_10}</f:format.raw>
</div>

Screenshots dazu

backend-Ansicht zum Arbeiten mit dem Gridelement fürs jQuery accordion
Backend-Ansicht
und das Ergebnis im Frontend
Frontend-Ansicht

bessere Darstellung CSS

Zur besseren Darstellung sollte man die jquery-ui.css einbinden. Es hilft sehr in der Standard-Darstellung

page.headerData.3123 = TEXT
page.headerData.3123.value (
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
)

Anstatt der headerData-ID 3123 könnt Ihr natürlich eine für Euch passende Ziffernfolge wählen.

 

Man kann natürlich auch sein eigenes CSS kreiieren, so wie wir hier.
Ausschnitt aus unserer CSS zum jQuery-Accordion:

/* jQuery ACCORDION */
.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    outline:none;                   /* damit die gepunkteten Linien z.B. beim FF verschwinden */
    position: relative;
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
    padding-left: 2.2em !important;
}
.ui-accordion .ui-accordion-noicons {
    padding-left: .7em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto;
}

.ui-state-default .ui-icon {
    background-image: url(../images/ui-icons.png);
   width:16px;
   height:16px;
}
.ui-icon-triangle-1-e { background-position:0 -192px; }
.ui-icon-triangle-1-s { background-position:-16px -192px; }

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 8px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 8px;
}
.ui-accordion-header-active {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.ui-accordion-content-active {
    border: 1px solid #aaa;
}

 

 

Akkordeon in einem 2. Layout

Typoscript Code

Alle Gridelements wurden auf Fluid-Templates umgestellt. Demnach ist der Typoscript-Code:

//tt_content.gridelements_pi1.10 =< lib.stdheader
tt_content.gridelements_pi1.20.10.setup {
//  jQuery Akkordeon
   jqaccordion < lib.gridelements.defaultGridSetup
   jqaccordion {
      cObject = FLUIDTEMPLATE
      cObject {
            file = {$tmpPath}accordion.html
              templateRootPaths.10 = fileadmin/Templates/Templates/
             partialRootPaths.10 = fileadmin/Templates/Partials/
             layoutRootPaths.10 = fileadmin/Templates/Layouts/
         settings.defaultHeaderType = {$styles.content.defaultHeaderType}
         settings.accordion = 1
        }
   }
}

// MUSS ins SETUP geschrieben werden, ganz am Schluss, da sonst Teile gelöscht werden!!!
   tt_content.gridelements_view < tt_content.gridelements_pi1

 

Weiterhin steht im Fluidtemplate "accordion.html" beispielhaft:

<script type="text/javascript">
   $(function() {
      $( ".ge-accordion" ).accordion({
         header: '> .fsc > .ce-header',
         collapsible: true,
         autoHeight: false,
         heightStyle: 'content',
         active: 0
      });
   });
</script>

<div  id="c{data.uid}" class="ge-accordion l2t{data.flexform_acc-link2top}  fsc ceLayout {data.CType}{data.layout}"
      data-role="collapsible-set"
>
   <f:render partial="Header" arguments="{_all}" />
   <f:format.raw>{data.tx_gridelements_view_column_10}</f:format.raw>
</div>

Screenshots dazu

backend-Ansicht zum Arbeiten mit dem Gridelement fürs jQuery accordion
Backend-Ansicht
und das Ergebnis im Frontend
Frontend-Ansicht

bessere Darstellung CSS

Zur besseren Darstellung sollte man die jquery-ui.css einbinden. Es hilft sehr in der Standard-Darstellung

page.headerData.3123 = TEXT
page.headerData.3123.value (
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
)

Anstatt der headerData-ID 3123 könnt Ihr natürlich eine für Euch passende Ziffernfolge wählen.

 

Man kann natürlich auch sein eigenes CSS kreiieren, so wie wir hier.
Ausschnitt aus unserer CSS zum jQuery-Accordion:

/* jQuery ACCORDION */
.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    outline:none;                   /* damit die gepunkteten Linien z.B. beim FF verschwinden */
    position: relative;
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
    padding-left: 2.2em !important;
}
.ui-accordion .ui-accordion-noicons {
    padding-left: .7em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto;
}

.ui-state-default .ui-icon {
    background-image: url(../images/ui-icons.png);
   width:16px;
   height:16px;
}
.ui-icon-triangle-1-e { background-position:0 -192px; }
.ui-icon-triangle-1-s { background-position:-16px -192px; }

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 8px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 8px;
}
.ui-accordion-header-active {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.ui-accordion-content-active {
    border: 1px solid #aaa;
}

 

 

Sondermenü
  • Impressum
  • Datenschutz
  • AGB
  • Seitenübersicht
  • Kontakt
  • Support
Kontakt

kupix webdesign
Sternschanze 16, 52428 Jülich

 +49 2461 910 111

 +49 2461 910 112

  +49 173 252 0001

 02461.xxx@keinSpam.910111.de

 Kontaktformular

 

Geschäftszeiten

Sie erreichen uns

am Mo., Di., Mi. und Fr.
 von 10:00 bis 18:00 Uhr

und am Do.
 von 09:00 bis 12:30 Uhr

Zuletzt abgeschlossenes Projekt
Screenshot der Seiten "Mitgliedschaft"

12.04.2023

KG Strohmänner 1966 e.V. — Selgersdorf

Der Webmaster Karl-Heinz Stier kam auf uns zu und bat um einen neuen Internetauftritt.

⇒ mehr

Copyright © 2007 - 2023, kupix webdesign, 52428 Jülich
kupix webdesign — cookies

Allgemein Cookies

Mehr über die genutzten Cookies erfahren