Tab-Menü im eigenen Modul verwenden

Geschrieben von in TYPO3 am

TYPO3 nutzt im BackEnd in in der letzten Version Tabs. Ich wollte diese Tabs in einem mit Extbase geschriebenen Modul nutzen. Das ist eigentlich nicht so schwer und funktioniert wunderbar.
Zunächst braucht man das tabmenu-Script, man kann es mit einem Hook ins Template einfügen. Den Extensionnamen habe ich immer durch xxx ersetzt.
ext_localconf.php

/*
 * Hook um eigenes JavaScript im BE hinzuzufügen
 */
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['typo3/template.php']['preHeaderRenderHook'][] = 
	t3lib_extMgm::extPath('xxx').'Resources/Private/Backend/Scripts/class.tx_xxx_templatehook.php:tx_xxx_templatehook->addBackendJavaScript';

Dann eine Klasse im Verzeichnis oben anlegen und Script mit einem Hook hinzufügen

class tx_xxx_templatehook {
 
	public function addBackendJavaScript(&$aParams, $oTemplate) {
		// ajax calls
		$oTemplate->getPageRenderer()->addJsFile('js/tabmenu.js');
	}
 
}

Im Template braucht man nur die entsprechenden Container anzulegen:

<div class="typo3-dyntabmenu-tabs">
	<table class="typo3-dyntabmenu" cellspacing="0" cellpadding="0" border="0">
		<tr>
			<td class="tab" id="DTM-xxx-1-MENU" nowrap="nowrap" onmouseover="DTM_mouseOver(this);" 
				onmouseout="DTM_mouseOut(this);">
				<a href="#" onclick="this.blur(); DTM_activate(&quot;DTM-xxx&quot;,&quot;1&quot;, 0); return false;">Tab Name</a>
			</td>
			<td class="tab" id="DTM-xxx-2-MENU" nowrap="nowrap" onmouseover="DTM_mouseOver(this);" 
				onmouseout="DTM_mouseOut(this);">
				<a href="#" onclick="this.blur(); DTM_activate(&quot;DTM-xxx&quot;,&quot;2&quot;, 0); return false;">Tab Name</a>
			</td>
		</tr>
	</table>
</div>
<div class="typo3-dyntabmenu-divs">
	<div style="display: none; padding: 10px;" id="DTM-xxx-1-DIV" class="c-tablayer">
		Tab Inhalt
	</div>
	<div style="display: none; padding: 10px;" id="DTM-xxx-2-DIV" class="c-tablayer">
		Tab Inhalt
	</div>
</div>
 
<!-- Initialization JavaScript for the menu -->
<script type="text/javascript">
	DTM_array["DTM-xxx"] = new Array();
	DTM_array["DTM-xxx"][0] = "DTM-xxx-1";
	DTM_array["DTM-xxx"][1] = "DTM-xxx-2";
	DTM_activate("DTM-xxx", top.DTM_currentTabs["DTM-xxx"]?top.DTM_currentTabs["DTM-xxx"]:1, 0);
</script>

1 Kommentar