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 {
                   jquery-tabs >
                   jquery-tabs < lib.gridelements.defaultGridSetup
                   jquery-tabs  {
                      cObject = FLUIDTEMPLATE
                      cObject {
                         file = fileadmin/Templates/JQueryTabs.html
                         templateRootPaths.10 = fileadmin/Templates/Templates/
                         partialRootPaths.10 = fileadmin/Templates/Partials/
                         layoutRootPaths.10 = fileadmin/Templates/Layouts/
                        
                         settings {
                            defaultHeaderType = {$styles.content.defaultHeaderType}
                         }
                      }
                   }
                }
            }
        }
    }
}

tt_content.gridelements_view < tt_content.gridelements_pi1

 

Weiterhin steht im Fluidtemplate "jqueryTabs.html" beispielhaft:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Layout_jQueryTabs" />

<f:section name="section_jQueryTabs">
    <script src="fileadmin/JScripts/jquery.easytabs.min.js"></script>

    <div
       id="c{data.uid}"
       class="
          <f:render partial='PartCeClasses' arguments='{_all}' />
       "
    >
      <f:render partial="Header/All" arguments="{_all}" />
        <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>
             $( "#jQueryTabs_{data.uid}" ).easytabs();
          </script>
       </div>

    </div>

</f:section>

 

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.