Bootstrap3 Tabs mit Grid Elements für TYPO3. http://www.merec.org/typo3/bootstrap3-tabs-mit-grid-elements-fuer-typo3
<?xml version="1.0" encoding="utf-8" standalone="yes" ?> | |
<T3DataStructure> | |
<meta type="array"> | |
<langDisable>1</langDisable> | |
</meta> | |
<sheets> | |
<general> | |
<ROOT type="array"> | |
<TCEforms> | |
<sheetTitle>Einstellungen</sheetTitle> | |
</TCEforms> | |
<el type="array"> | |
<display_type type="array"> | |
<TCEforms type="array"> | |
<label>Aussehen</label> | |
<config type="array"> | |
<type>select</type> | |
<items type="array"> | |
<numIndex index="0" type="array"><numIndex index="0">Tabs</numIndex><numIndex index="1">nav-tabs</numIndex></numIndex> | |
<numIndex index="1" type="array"><numIndex index="0">Pills</numIndex><numIndex index="1">nav-pills</numIndex></numIndex> | |
</items> | |
<default>nav-tabs</default> | |
</config> | |
</TCEforms> | |
</display_type> | |
<switch_effect type="array"> | |
<TCEforms type="array"> | |
<label>Switch effekt</label> | |
<config type="array"> | |
<type>select</type> | |
<items type="array"> | |
<numIndex index="0" type="array"><numIndex index="0">Ohne</numIndex><numIndex index="1"></numIndex></numIndex> | |
<numIndex index="1" type="array"><numIndex index="0">Einblenden</numIndex><numIndex index="1">fade</numIndex></numIndex> | |
</items> | |
<default></default> | |
</config> | |
</TCEforms> | |
</switch_effect> | |
</el> | |
</ROOT> | |
</general> | |
</sheets> | |
</T3DataStructure> |
<ul class="nav {data.flexform_display_type}"> | |
<f:for each="{data.tx_gridelements_view_children}" as="tab" iteration="tab_iteration"> | |
<li{f:if(condition:'{tab_iteration.isFirst}',then:' class="active"')}><a href="#tab-content-{tab.uid}" data-toggle="tab">{tab.header}</a></li> | |
</f:for> | |
</ul> | |
<div class="tab-content"> | |
<f:format.raw>{data.tx_gridelements_view_columns.0}</f:format.raw> | |
</div> |
# Tabs Container | |
tx_gridelements.setup.uebb_bootstrap_tabs_container { | |
title = Tabs Container | |
description = Ein Element das mehrere Tabs enthält | |
flexformDS = FILE:fileadmin/templates/gridelements/bootstrap3_tabs/bootstrap3_tabs_container.xml | |
config { | |
colCount = 1 | |
rowCount = 1 | |
rows { | |
1 { | |
columns { | |
1 { | |
name = Tab Container Element | |
colPos = 0 | |
allowed = gridelements_pi1 | |
} | |
} | |
} | |
} | |
} | |
} | |
# Tab Element | |
tx_gridelements.setup.uebb_bootstrap_tabs_tab { | |
title = Tab | |
description = Ein Tab für einen Tab-Container | |
config { | |
colCount = 1 | |
rowCount = 1 | |
rows { | |
1 { | |
columns { | |
1 { | |
name = Tab Element | |
colPos = 0 | |
} | |
} | |
} | |
} | |
} | |
} |
# First define the tab cObject, we want this in the container | |
tt_content.gridelements_pi1.20.10.setup.uebb_bootstrap_tabs_tab { | |
# Add the ID and the Class to the tab container | |
preCObject = LOAD_REGISTER | |
preCObject { | |
containerId.cObject = COA | |
containerId.cObject { | |
wrap = id="|" | |
10 = TEXT | |
10.wrap = tab-content-| | |
10.field = uid | |
} | |
containerClasses.cObject = COA | |
containerClasses.cObject { | |
wrap = class="tab-pane |" | |
# fade or empty | |
10 = TEXT | |
10.field = parentgrid_flexform_switch_effect | |
10.noTrimWrap = | | | | |
# We want the active flag on the first child | |
20 = TEXT | |
20.value = active in | |
20.noTrimWrap = | | | | |
20.if { | |
value = 1 | |
equals.data = cObj:parentRecordNumber | |
equals.prioriCalc = 1 | |
} | |
} | |
} | |
outerWrap = <div {register: containerId} {register: containerClasses}>|</div> | |
outerWrap.insertData = 1 | |
# Render the children the default way | |
columns.0 { | |
renderObj = < tt_content | |
} | |
} | |
# Define the Tab Container | |
tt_content.gridelements_pi1.20.10.setup.uebb_bootstrap_tabs_container { | |
# Render navigation using fluid | |
cObject = FLUIDTEMPLATE | |
cObject { | |
file = fileadmin/templates/gridelements/bootstrap3_tabs/bootstrap3_tabs_template.html | |
} | |
# Add the renderObj of the tab directly, this prevents the "csc-default"-wrap | |
columns.0 { | |
renderObj = < tt_content.gridelements_pi1 | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment