T3 jQuery-Tabs mit Gridelements

T3 jQuery-Tabs mit Gridelements

Und Ihr seht die jQuery-Tabs hier sofort im Einsatz:

Typoscript Code

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

tt_content.gridelements_pi1.20.10.setup {
   # ID of gridelement
   jquery-tabs >
   jquery-tabs < lib.gridelements.defaultGridSetup
   jquery-tabs  {
      cObject = FLUIDTEMPLATE
      cObject {
         file = {$tmpPath}jqueryTabs.html
         settings {
            defaultHeaderType = {$styles.content.defaultHeaderType}
         }
      }
   }
}

 

Weiterhin steht im Fluidtemplate "jqueryTabs.html" beispielhaft:

<script src="fileadmin/JScripts/jquery.easytabs.min.js" type="text/javascript"></script>

<f:render partial="Header" arguments="{_all}" />

<div id="c{data.uid}">

   <f:if condition="{data.flexform_width_col_1} > 0">
      <f:then>
         <div id="jQueryTabs_{data.uid}"
            class="tab-container tab-border{data.flexform_tabs_border_class}"
            style="width:{data.flexform_width_col_1}{data.flexform_dim_col_1};">
      </f:then>
      <f:else>
         <div id="jQueryTabs_{data.uid}"
            class="tab-container tab-border{data.flexform_tabs_border_class}">
      </f:else>
   </f:if>

      <ul class='etabs'>
         <f:for each="{data.tx_gridelements_view_children}" as="child">
            <li class='tab'><a href="#c{child.uid}">{child.header}</a></li>
         </f:for>
      </ul>

      <div class="panel-container">
         <f:format.raw>{data.tx_gridelements_view_column_10}</f:format.raw>
      </div>

      <script type="text/javascript">
         $( "#jQueryTabs_{data.uid}" ).easytabs();
      </script>

   </div>
</div>

Hier sehen Sie nur ein Bild, welches natürlich nicht bedienbar ist (Die Tabs sind nicht klickbar!)

Die Tabs lassen sich nun mehrfach schachteln. Wer mag, der schaue sich das Ganze live auf der Seite »Tabs geschachtelt« an.

bessere Darstellung CSS

Zur besseren Darstellung kann man die tabs.css von os.alfajango.com einbinden. Es hilft in der Standard-Darstellung und natürlich das JScript von alfajango EasyTabs

page.headerData.3123 = TEXT
page.headerData.3123.value (
   <link rel="stylesheet" href="http://os.alfajango.com/css/tabs.css">
   <script src="fileadmin/jscripts/jquery.easytabs.min.js" type="text/javascript"></script>
)

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