Erstellung eines CE-Elements "Tabs" mit der TYPO3-Extension »Mask«

Eine kurze Beschreibung, wie man mit der Ext. MASK Tabs oder Registerkarten erstellen kann. Voraussetzung ist natürlich, dass die Extension »Mask« geladen und als statisches Objekt im Template geladen wird. jQuery ist natürlich ein Muss.

Zusätzlich gehört das passende Javascript dazu. Das könnt Ihr Euch von der Seite des Programmierers von EasyTabs herunterladen und in Eure Anwendung einbeziehen.

Es folgen zuerst drei Screenshots bzgl. Mask und der Seite mit den Tabs. Ich habe hier die Bilder kleiner dargestellt. Wenn Ihr sie im Grpßformat sehen wollt, dann klickt einfach drauf:

Die Fluidvorlage von Mask

Mask erstellt ja nur eine einfache Fluidvorlage, die natürlich angepasst werden muss.

So sieht der Rohling für Tabs aus Mask aus:

{f:if(condition: data.tx_mask_buttons_instead, then: 'On', else: 'Off')}

<f:if condition="{data.tx_mask_tabs}">
   <ul>
       <f:for each="{data.tx_mask_tabs}" as="data_item">
          <li>
               <f:if condition="{data_item.tx_mask_tab_title}">
                  {data_item.tx_mask_tab_title}<br />
               </f:if>
               <f:if condition="{data_item.tx_mask_ce_element}">
                   <f:for each="{data_item.tx_mask_ce_element}" as="data_item_item">
                       <f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item_item.uid}</f:cObject><br />
                   </f:for>
               </f:if>
          </li>
      </f:for>
   </ul>
</f:if>

 

und hier nun die modifizierte und fertige Fluid-Vorlage für das Tabs-CE:

<f:if condition="{data.tx_mask_tabs}">

<script type="text/javascript">
// animationSpeeds is one variable out of "easytabs"
   if ("undefined" === typeof animationSpeeds) {
      $.getScript('fileadmin/JScripts/jquery.easytabs.min.js',
         function(){
            $(".tab-container").easytabs();
         }
      );
   };
</script>

<div id="jQueryTabs_{data.uid}" class="tab-container tab-border{f:if(condition: data.tx_mask_buttons_instead, then: '0', else: '1')}">
   <ul class="etabs">
      <f:for each="{data.tx_mask_tabs}" as="data_item">
         <li class="tab"><f:if condition="{data_item.tx_mask_tab_title}">
            <a href="#panel{data_item.uid}">{data_item.tx_mask_tab_title}</a>
         </f:if>
      </f:for>
   </ul>

   <div class="panel-container">
      <f:for each="{data.tx_mask_tabs}" as="data_item">
         <div id="panel{data_item.uid}">
            <f:if condition="{data_item.tx_mask_ce_element}">
               <f:for each="{data_item.tx_mask_ce_element}" as="data_item_item">
                  <f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item_item.uid}</f:cObject>
               </f:for>
            </f:if>
         </div>
      </f:for>
   </div>

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

</div>
</f:if>

 

Ich hoffe, dass Euch diese Doku. ein wenig weiter hilft? Kommentar dazu entweder auf Facebook oder per Mail.