Auf einer Seite befand sich zu viel Content, um eine Aufteilung auf mehrere Seite und Scrolling zu vermeiden, entstand die Idee den Content in eine Art Tabs anzuzeigen. Der Content sollte weiterhin in Typo3 gepflegt werden können und einige der Elemente sollten weiterhin dem Flow der Seite folgen.
Die Elemente, die in einen Mini-Tab-Browser gepackt werden sollte, werden in Typo3 mit einem Rahmen “Indent”/”Einzug” versehen. Die normalen Content Elemente werden nicht in den Browser gepackt.
Das Skript wird in den Header eingebunten, und am Ende der Seite wird die Funktion aufgerufen. Die Funktion sucht das Element mit der id “content” und überprüft alle darin befindlichen Elemente, ob sie den Klassennamen “csc-frame-indent” haben. Ich musste vorher im Template einstellen, dass nur csc-frame-indent verwendet wird. Dann werden die Elemente, die diese Voraussetzungen erfüllen, mit einer Id versehen, der Titel des Elementes wird extrahiert und auch in ein Array gepackt. Das Array wird dann abgearbeitet, es wird eine Navigation erstellt und an den Anfang des Content-Elementes gepackt. Bei Rollover wird das vorherige Element ausgeblendet und das neue eingeblendet.
Zu beachten: im HTML-Template muss der Content in <div id=”content”> eingefügt werden. Jedes Content-Element muss in einem Div mit dem Klassennamen “content-element” gewrappt werden. Und der Wrap für den Content-Rahmen muss auch geändert werden. Wie das geht, steht weiter unten im TypoScript Abschnitt.
Der Quelltext sollte nach den Änderungen etwas so strukturiert sein:
- <div id="content">
- <div class="content-element">
- <div class="csc-frame-indent">Irgenein Content</div>
- </div>
- [... weitere divs]
- </div>
Hier der Link zum Anschauen und darunter der Quelltext, zunächst das TypoScript Template und dann der JavaScript Teil.
- page.headerData.20 = TEXT
- page.headerData.20.value = <script type="text/javascript" src="fileadmin/scripts/tabbed_content.js"></script>
- page.99 = HTML
- page.99.value = <script type="text/javascript">displayTabbedContent();</script>
- # damit jedes Content Element in ein div gewrappt wird
- tt_content.stdWrap.dataWrap = <a id="c{field:uid}"></a><div class="content-element">|</div>
- # jedes Content Element mit Rahmen "Indent" oder "Einzug" wird so gewrappt
- tt_content.stdWrap.innerWrap.cObject.10.value = <div class="csc-frame-indent">|</div>
- var currentlyShowing = -1;
- // array with titles, that should be linked
- var titleArray = Array();
- // array with indices of the elements, that should be display tabbed
- var indexArray = Array();
- function displayTabbedContent() {
- var contentElement = document.getElementById("content");
- contentElement.style.position = "relative";
- var contentChildren = contentElement.childNodes;
- var counter = 0;
- for(var i=0;i<contentChildren.length;i++) {
- if(contentChildren[i].className == "content-element") {
- if(contentChildren[i].firstChild.className == "csc-frame-indent") {
- //alert(contentChildren[i].firstChild.className);
- contentChildren[i].style.position = "absolute";
- contentChildren[i].style.top = "0";
- contentChildren[i].style.left = "0";
- contentChildren[i].id = "tabbedContent_"+counter;
- counter++;
- //contentChildren[i].style.visibility = "hidden";
- contentChildren[i].style.display = "none";
- var titleElement = contentChildren[i].getElementsByTagName("h1")[0];
- //alert("i="+i+" "+contentChildren[i]);
- titleArray.push(titleElement.firstChild.nodeValue);
- indexArray.push(i);
- }
- }
- }
- var spacerHTML = '<div style="width: 500px; height: 400px;"> </div>';
- var naviHTML = '<div style="position: absolute; top: 0; left: -320px; width: 310px;">';
- var aTagStyle = 'display: block; padding: 8px 0 1px 0;';
- var divTagStyle = 'border-bottom: 1px solid transparent;';
- for(var i=0;i<titleArray.length;i++) {
- naviHTML+= '<div id="tabbedContentLink_'+i+'" class="tabbed_content_links" style="'+divTagStyle+'">';
- naviHTML+= '<a href="#nogo" onMouseOver="showTabContent('+i+')" style="'+aTagStyle+'">'+titleArray[i]+'</a></div>';
- }
- naviHTML+= '</div>';
- contentElement.innerHTML = spacerHTML+naviHTML+contentElement.innerHTML;
- showTabContent(0);
- }
- function showTabContent(index) {
- //alert("hide: "+currentlyShowing+" show: "+index);
- if(currentlyShowing >= 0) {
- // hide current and unset current in menu
- if(document.getElementById("tabbedContent_"+currentlyShowing)) {
- document.getElementById("tabbedContent_"+currentlyShowing).style.display = "none";
- document.getElementById("tabbedContentLink_"+currentlyShowing).style.borderBottom = '1px solid transparent';
- }
- }
- // set new index as current
- currentlyShowing = index;
- // display the content and mark current in menu
- var elem = document.getElementById("tabbedContent_"+index);
- if(document.getElementById("tabbedContent_"+index)) {
- document.getElementById("tabbedContent_"+index).style.display = "block";
- document.getElementById("tabbedContentLink_"+currentlyShowing).style.borderBottom = '1px solid #5084bc';
- }
- }
21. September 2007 um 21:36
[...] Natalia berichtet auf ihrem Blog von der Umsetzung von Tabs für einzelne Seiten mit viel Content, so dass der Inhalt bequem per Wechsel des aktiven Tabs erreicht werden kann. Das funktioniert mit ein bisschen TypoScript kombiniert mit einem JavaScript, das einfach in den Header der Seite eingebunden wird. Eine interessante Idee und vielleicht ganz nützlich für den ein oder anderen. Hier könnt ihr euch die Lösung für Tabbed Content ansehen. [...]
05. Oktober 2007 um 10:14
[...] ich wollte diese tabbed Content in Seite meines Arbeitgebers integrieren ( hier ist Tutorial: