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>