Erstellung eines CE-Elements "Tabs" mit der TYPO3-Extension »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.