Zum Inhalt springen

T3Sports (cfcleague) mit rgtabs (2)

Erstellt am 31. August 2008 · 8 Antworten · letzte Antwort am 10. Mai 2009

Tags: Frage

bastians ·

Zur Info: digedag und ich erarbeiten eine Lösung, sodass der Inhalt von T3Sports via AJAX geladen wird. Sobald alles läuft, folgt eine Anleitung.
Der Thread ist die Fortsetzung von #8077145 (wurde geschlossen)

Das mit dem CSS funktioniert nun, habe das Template im Page-Type konfiguriert.

Jetzt müssen wir nur noch die Profiles zum laufen bekommen, meine TS-Konfiguration sieht derzeit so aus:

teamprofil = PAGE
teamprofil {
  typeNum=501
  config.disableAllHeaderCode = 1
  config.metaCharset = utf-8
  config.additionalHeaders = Content-Type:text/html;charset=utf-8
  config.xhtml_cleaning = 0
  config.admPanel = 0
  config.sendNoCacheHeaders = 1
  config.no_cache = 1
  10 < plugin.tx_cfcleaguefe_report
  10.action = tx_cfcleaguefe_actions_TeamView
  10.clubSelection = 3
  10.groupSelection = 33
  10.saisonSelectionInput = 1
  10.teamviewTemplate = fileadmin/templates/t3sports/mannschaftsprofil.html
}

Habe im Plugin selbst die Altersgruppe und den Verein ausgewählt, sowie den Pfad zum Template. Im TS des Plugins habe ich den den Pfad zum Scope wiefolgt angegeben:

scopeTemplate = fileadmin/templates/t3sports/scope_profiles.html

Und das Scope-Template habe ich mit dem Page-Type 501 ausgestattet habe:

<select name="action" onchange="searchUrl(this.options[this.selectedIndex].value, 'ajax_profiles');"> 
###SAISON_SELECTION_2###
      <option ###SAISON_ISCURRENT### value="/typo3/###SAISON_LINK_URL###&type=501">###SAISON_NAME###</option> 
###SAISON_SELECTION_2###
  </select>

Beim Aufruf der Seite erfolgt zuerst eine Ausgabe, beim Wechsel kommt dann aber "Error: No club defined."[/u]

digedag ·
bastians schrieb

Beim Aufruf der Seite erfolgt zuerst eine Ausgabe, beim Wechsel kommt dann aber "Error: No club defined."[/u]

Also der Teamview gehört zum Report-Plugin. Dort gibt es den Scope nur für die Saison und die Altersklasse. Den Verein muss man daher mit einem anderen Wert im Typoscript setzen:

teamprofil {
  10.teamviewClub = 3
}
bastians ·

Läuft, super, dankeschön :-)

Nun versuche ich mich daran, eine Saison-Selektion sowie eine Spieltags-Selektion auf einer Seite zu integrieren. Werde mich melden, wenn es zu Problemen kommt.

sefer ·

Hi Bastian,

das mit rgtabs habe ich schonmal versucht und beobachte diesen thread ganz gespannt. Was glaubst du, wann die Anleitung fertig sein wird?

Ciao'
Sefer

bastians ·
sefer schrieb

Hi Bastian,

das mit rgtabs habe ich schonmal versucht und beobachte diesen thread ganz gespannt. Was glaubst du, wann die Anleitung fertig sein wird?

Ciao'
Sefer

Hi, sorry, ich war im Urlaub deshalb erst jetzt meine Antwort.
Ich werde versuchen, in den nächsten Tagen eine Anleitung im Wiki der Extension einzustellen. Bisher funktioniert es aber nur mit einer Scopeselection, wenn zwei auf einer Seite sind - z.B. Saison-Selektion und Spieltags-Selektion - geht es noch nicht aber das bekommen wir auch noch hin. Ich poste den Link dann hier.

florian.​bobelka ·

Hi Leute!

Da hier schon länger nichts weiter gegangen ist, und ich selbst tabs haben wollte, hab ich auf die Schnelle meine eigene Lösung zusammengebastelt.

Ziel des Unterfangens war es, einen Matchreport (Live-Ticker) zusammen zu bekommen, der sich automatisch aktualisiert und gewisse Inhalte in mehreren Tabs anzeigt, allerdings in unterschiedlichen Formatierungen. Des Weiteren soll die Konfiguration der Tabs dynamisch erfolgen können.

Ein Beispiel findet ihr hier: http://www.gak.at/index.php?id=172&cfc_league_fe[matchId]=582&cHash=cb04f675de

Wenn Interesse besteht wie ich das gemacht habe, werde ich meine Lösung hier posten.

LG, Flo.

florian.​bobelka ·

hi!
Dropdowns habe ich keine drinnen, allerdings wüsste ich nicht, warum Dropdowns Probleme machen sollten!

Viel wahrscheinlicher ist es, dass im JavaScript (onload()) was faul ist.

Zur Zeit habe ich leider keinen Zugriff auf meine Seite, weil der Provider auf einen anderen Server siedelt. Somit muss ich die Details zu meiner Lösung leider noch ein Weilchen schuldig bleiben.

Aber ein, zwei Tage sollten jetzt auch schon egal sein 😉

LG, Flo.

florian.​bobelka ·

So Leute, hab jetzt endlich genügend Zeit um meine Lösung zu veröffentlichen!

Da man hier leider keine Dateien anhängen kann wird das jetzt ein Monsterpost 😉

Zuerst mal das Template meines Livetickers:

config {
  doctype = xhtml_strict
  xhtml_cleaning = all
  htmlTag_langKey = de
  doctypeSwitch = {$doctypesw_cond}
}

# Default PAGE object:
seite = PAGE
# Kompatibilität mit IE8
seite.headTag ( 
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
)

seite.includeJS {
  file1 = fileadmin/Templates/Liveticker/liveticker.js
  file1.type = text/javascript  
}

seite.stylesheet = fileadmin/Templates/Liveticker/liveticker.css

temp.header = COA
temp.header.10 = HTML
temp.header.10.value = {$headerImageHtmlCode}

seite.10 = TEMPLATE
seite.10{
  template = FILE
  template.file = fileadmin/Templates/Liveticker/liveticker.tmpl
  workOnSubparts = document

  marks.header < temp.header
  marks.inhalt < styles.content.get
# durch nachfolgende Zeile wird dem JS ermöglicht die ContentElemente EINZELN anzufinden
  marks.inhalt.renderObj.stdWrap.dataWrap = <div id="content_{field:uid}">|</div>
}
plugin.tx_cfcleaguefe_report.matchreport.lineuphome.seperator = |<br/>|
plugin.tx_cfcleaguefe_report.matchreport.match.dynaMarkers.tickerlist.cron = 0

Dann das Seitentemplate:

<!--###DOCUMENT_HEADER###-->
<!--###DOCUMENT_HEADER###-->

<!--###document###-->
<table id="MainTable">
  <tr>
  <td class="shadowleft">&nbsp;</td>
  <td class="MainCell" >
    <div id="Main">
      <div id="header">###header###</div>
      <div id="Content">
        <div id="static">
          <div id="static_roundCompetition"></div> <!-- statischer Bereich (nicht-Tab) -->
          <div id="static_tickerHeader"></div>
        </div>
        <div id="tabsHeader">  <!-- hier werden die Tabs-Titel angezeigt - siehe "var tabsHeaderDiv" -->        
        </div>
        <div id="tabsContent"> <!-- und hier der Inhalt - siehe "var tabsContentDiv" -->
        </div>
      </div>
      <div id="message">
      </div>
      <div id="static_content_137">
      </div>
    </div>  
  </td>
  <td class="shadowright">&nbsp;</td>
  </tr>
</table>
<div id="config"><!-- es folgt die initiale Konfiguration des JS - hier NUR JS rein!!! ->
<!--ConfigStart-->
  <script>
    // statische Bereiche definieren
    var static = new Array(
      'roundCompetition', 'tickerHeader', 'content_137' // Typo3-Inhaltselement mit der UID 137
    );
    // Tabs definieren
    var tabs = new Array(
      {title: 'Übersicht', body: new Array('ticker', 'info', 'setup')},
      {title: 'Tickermeldungen', body: new Array('ticker')},
      {title: 'Aufstellung', body: new Array('info', 'setup')},
      {title: 'Multimedia', body: new Array('pictures')}
      // {title: 'Spiele dieser Runde', body: new Array('roundGames', 'liveTable')}
    );
    var firstActiveTab = 0; // welcher Tab soll beim ersten Laden der Seite angezeigt werden?
    var refreshRate = 30; // automatisches Aktualisierungsintervall in Sekunden
    var tickerAutoScroll = true; // noch nicht implementiert!!
    var staticDiv = 'static'; // die ID die den DIVs für static-Bereiche vorangestellt wird
    var tabsHeaderDiv = 'tabsHeader'; // das DIV welches die TabHeader (Titel) beinhalten soll
    var tabsContentDiv = 'tabsContent'; // selbiges für TabContent
    var messageDiv = 'message'; // und für Status-Ausgabe
  </script>
<!--ConfigEnd-->
</div>
<div id="data"> <!-- hier hinein erfolg die Ausgabe der gerenderten ContentElemente - bei Klick auf einen Tab wir der Inhalt dafür aus diesem DIV geholt -->
<!--DataStart-->
  ###inhalt###
<!--DataEnd-->
</div>
<!--###document###-->

Die JavaScript-Datei:

// Initialize event depending on browser
function initReady(fn) {
//W3C-compliant browser
  if(document.addEventListener) {
    document.addEventListener("DOMContentLoaded", fn, false);
  } //IE
  else {
    document.onreadystatechange = function(){readyState(fn)}
  }
}
      
//IE execute function
function readyState(func) {
// DOM is ready
  if(document.readyState == "interactive" || document.readyState == "complete") {
    func();
  }
}

//do when DOM is ready
function onReady() {
  configString = document.getElementById('config').innerHTML;
  b = configString.indexOf('<!--ConfigStart-->');
  c = configString.indexOf('<!--ConfigEnd-->');
  configString = configString.slice(b+18,c);
  b = configString.indexOf('<script type="text/javascript">');
  c = configString.indexOf('</script>');
  if (c == -1) c = configString.indexOf('</SCRIPT>');
  configString = configString.slice(b+32,c);
  eval(configString);
  actualTime = refreshRate;
  staticBox = document.getElementById(staticDiv);
  tabsHeaderBox = document.getElementById(tabsHeaderDiv);
  tabsContentBox = document.getElementById(tabsContentDiv);
  dataBox = document.getElementById('data');
  buildTabs();
  copyContent();
  countdown();
}

function buildTabs() {
  var tabsHeaderInnerThing = "";
  var alreadyIn;
  for (i in tabs) {
    tabsHeaderInnerThing += '<div id="tabHeader_' + tabs[i].title + '"><a href="javascript:switchTab(' + i + ')" ><span>' + tabs[i].title + '</span></a></div>';
    for (j in tabs[i].body) {
      alreadyIn = false;
      for (k in tabBodyDivs) {
        if (tabBodyDivs[k] == tabs[i].body[j]) alreadyIn = true;
      }
      if (!alreadyIn) tabBodyDivs[tabBodyDivs.length] = tabs[i].body[j];
    }
  }
  tabsHeaderBox.innerHTML = tabsHeaderInnerThing;
  
  var tabsBodyInnerThing = "";
  for (var i = 0; i < tabBodyDivs.length; i++) {
    tabsBodyInnerThing += '<div id="tabBody_' + tabBodyDivs[i] + '"></div>';
  }
  tabsContentBox.innerHTML = tabsBodyInnerThing;
  switchTab(firstActiveTab);
}

function switchTab(tabIndex) {
  var isIn;
  for (i in tabs) {
    tempElement = document.getElementById('tabHeader_' + tabs[i].title);
    tempAttribute = document.createAttribute('class');
    if (i == tabIndex) {
      tempAttribute.value = 'active';
    } else {
      tempAttribute.value = 'inactive';
    }
    tempElement.attributes.setNamedItem(tempAttribute);
  }
  for (i in tabBodyDivs) {
    isIn = false;
    for (j in tabs[tabIndex].body) {
      if (tabBodyDivs[i] == tabs[tabIndex].body[j]) isIn = true;
    }
    tempElement = document.getElementById('tabBody_' + tabBodyDivs[i]);
    tempAttribute = document.createAttribute('class');
    if (!isIn) {
      tempAttribute.value = 'disabled';
    } else {
      tempAttribute.value = 'tabBody_' + tabs[tabIndex].title + '_' + tabBodyDivs[i];
    }
    tempElement.attributes.setNamedItem(tempAttribute);
  }
}

function copyContent() {
  for (i in static) {
    var source = document.getElementById(static[i]);
    var target = document.getElementById('static_' + static[i]);
    validateAndCopy(source, target);
  }
  for (i in tabBodyDivs) {
    var source = document.getElementById(tabBodyDivs[i]);
    var target = document.getElementById('tabBody_' + tabBodyDivs[i]);
    validateAndCopy(source, target);   
  }
}

function validateAndCopy (source, target) {
  if (source && target && !(source.innerHTML == target.innerHTML)) {
    target.innerHTML = source.innerHTML;
  }
}

// Countdown time left to refresh, display it and finally fire the refresh
function countdown() {
  if (actualTime == 0) {
    document.getElementById(messageDiv).innerHTML = "Aktualisieren...<br/>&nbsp;";
    request(location, 'data');
  } else {
    document.getElementById(messageDiv).innerHTML = Msg + "Automatische Aktualisierung in " + actualTime + " Sekunden.";
    actualTime--;
    setTimeout('countdown()', 1000);
  }
}

// Request the site
function request(url, target) {
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {requestDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

// Handle the request
function requestDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    responseString = req.responseText;
    b = responseString.indexOf('<!--ConfigStart-->');
    c = responseString.indexOf('<!--ConfigEnd-->');
    configString = responseString.slice(b+18,c);
    b = configString.indexOf('<script type="text/javascript">');
    c = configString.indexOf('</script>');
    if (c == -1) c = configString.indexOf('</SCRIPT>');
    configString = configString.slice(b+32,c);
    eval(configString);
    b = responseString.indexOf('<!--DataStart-->');
    c = responseString.indexOf('<!--DataEnd-->');
    dataString = responseString.slice(b+16,c);
    if (dataString != '') {
      document.getElementById(target).innerHTML = dataString;
      copyContent();
      Msg = goodMsg;
    } else {
      Msg = errorMsg;
    } 
    actualTime = refreshRate;
    countdown();
  }
}

var errorMsg = "Aktualisierung fehlgeschlagen. Neuer Versuch...<br/>";
var goodMsg = "Live-Ticker wurde erfolgreich aktualisiert!<br/>";
var Msg = goodMsg;
var dataDocument;
var staticBox;
var tabsHeaderBox;
var tabsContentBox;
var tabBodyDivs = [];
var tempElement;
var tempAttribute;
var actualTime;
window.onDomReady = initReady;
window.onDomReady(onReady);

Das CSS:

@import url(./../typo3-RTE.css);

body { color: #222; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
div { color: #222; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;}
table { border-collapse:collapse; margin: 0px; padding: 0px;}
td { padding:0px; }

html, body, #MainTable { margin: 0; padding: 0; height: 100%; border: none; }

#MainTable { width: 100%; }
.shadowleft { background-image: url(./../img/background_left.png); background-position: right 0; }
.shadowright { background-image: url(./../img/background_right.png); background-position: left 0; }
.MainCell { width: 960px; vertical-align: top; background-color: #444; }
#Main { width:960px; }
#header { width:960px; height: 160px; }
#Content { width: 940px; margin:0px; padding: 10px; background-color: #fff; float: left; position: relative; }
#Content * { padding: 0px; }
* html #Content {width: 960px; margin: 0px; padding: 10px; }

A { color: #c5000a; }
A:hover { color: #c5000a;}

.disabled { display: none; visibility: hidden; }
.active { font-weight: bold; border-bottom: 1px solid #ffffff !important; background-color: #ffffff; }
#data { display: none; visibility: hidden; }

#message { float: left; width: 960px; align: center; text-align: center; margin: 5px 0px 10px 0px; color: #bbbbbb; }

#static { } 
#static_roundCompetition { font-size: 12px; 
           align: center;
           text-align: center; 
           font-weight:bold;
           color: #ffffff; 
           height: 21px;
           line-height: 21px;
           background: #fc0505;
           background-image: url(./../img/tab_hover.gif);
           float: none; 
           clear: left;
           border-width:0px 0px 0px 0px;
           margin: 0px 0px 10px 0px; 
         }
#static_tickerHeader { font-size: 24px; align: center; text-align: center; font-weight: bold; color: #c5000a; float: none; clear: left; }
#static_tickerHeader table { width: 100%; }
#static_tickerHeader td.tickerHeader_logoCol { width: 200px; }

#static_content_137 { align: center; text-align: center; float: none; clear: left; background-color: #444; }

#tabsHeader { float: left; width: 920px; align: center; text-align: center; padding: 0px 30px; z-index: 100; }
#tabsHeader div { float: left; border: 1px solid #c5000a; margin: 0px 4px 0px 0px; background-color: #eeeeee; z-index: 100; position: relative; }
#tabsHeader div:hover { background-color: #ddd; }
#tabsHeader div.active { background-color: #ffffff; border: 2px solid #c5000a; }
#tabsHeader div.active:hover { background-color: #ffffff; }
#tabsHeader a { text-decoration: none; font-size: 14px; color: #222; line-height: 30px; padding: 0px 10px; float: left; }
#tabsHeader .active a { color: #c5000a; }
#tabsContent { float: left; width: 936px; height: 400px; border: 2px solid #c5000a; position: relative; top: -2px; background-color: #ffffff; }

.tabBody_Übersicht_ticker { height: 378px; width: 300px; float: left; position: absolute; top: 10px; left: 10px; }
.tabBody_Übersicht_ticker #cfcleague-report-ticker { max-height: 357px; overflow: auto; border: 1px solid #c5000a; border-top: 0px; }
.tabBody_Übersicht_ticker h3 {font-size: 12px; align: center; text-align: center; font-weight:bold; color: #ffffff; height: 21px; line-height: 21px; background: #fc0505; background-image: url(./../img/tab_hover.gif); float: none; clear: left; border-width:0px 0px 0px 0px; margin: 0px 0px 0px 0px; }

.tabBody_Übersicht_info { height: 70px; width: 604px; float: left; position: absolute; top: 10px; left: 320px; border: 1px solid #c5000a; background-color: #eee; }
.tabBody_Übersicht_info table { width: 604px; text-align: center; v-align: middle; }
.tabBody_Übersicht_info td.cfcleague-report-logo { width: 0px; visibility: hidden; }

.tabBody_Übersicht_setup { height: 298px; width: 604px; float: left; position: absolute; top: 90px; left: 320px; border: 1px solid #c5000a; border-top: 0px; }
.tabBody_Übersicht_setup table { width: 604px; text-align: center; v-align: middle; }
.tabBody_Übersicht_setup th { background-image: url(./../img/tab_hover.gif); line-height: 21px; color: #ffffff; }

.cfcleague-report-ticker-head { font-weight: bold; background-color: #eeeeee; }
.cfcleague-ticker-score { margin: 0px 0px 0px 10px; }
.cfcleague-report-ticker-msg { margin: 0px 5px 0px 10px; }
.cfcleague-report-scorer { font-weight: bold; }

.tabBody_Tickermeldungen_ticker { height: 378px; width: 916px; float: left; position: absolute; top: 10px; left: 10px; }
.tabBody_Tickermeldungen_ticker #cfcleague-report-ticker { max-height: 357px; overflow: auto; border: 1px solid #c5000a; border-top: 0px; }
.tabBody_Tickermeldungen_ticker h3 {font-size: 12px; align: center; text-align: center; font-weight:bold; color: #ffffff; height: 21px; line-height: 21px; background: #fc0505; background-image: url(./../img/tab_hover.gif); float: none; clear: left; border-width:0px 0px 0px 0px; margin: 0px 0px 0px 0px; }

.tabBody_Aufstellung_info { height: 70px; width: 914px; float: left; position: absolute; top: 10px; left: 10px; border: 1px solid #c5000a; background-color: #eee; }
.tabBody_Aufstellung_info table { width: 914px; text-align: center; v-align: middle; }
.tabBody_Aufstellung_info td.cfcleague-report-logo { width: 300px; visibility: visible; }

.tabBody_Aufstellung_setup { height: 298px; width: 914px; float: left; position: absolute; top: 90px; left: 10px; border: 1px solid #c5000a; border-top: 0px; }
.tabBody_Aufstellung_setup table { width: 914px; text-align: center; v-align: middle; }
.tabBody_Aufstellung_setup th { background-image: url(./../img/tab_hover.gif); line-height: 21px; color: #ffffff; }

.tabBody_Multimedia_pictures { height: 378px; width: 914px; float: left; position: absolute; top: 10px; left: 10px; border: 1px solid #c5000a; border-top: 0px; }
.tabBody_Multimedia_pictures #cfcleague-report-images { margin: 10px; }
.tabBody_Multimedia_pictures h3 {font-size: 12px; align: center; text-align: center; font-weight:bold; color: #ffffff; height: 21px; line-height: 21px; background: #fc0505; background-image: url(./../img/tab_hover.gif); float: none; clear: left; border-width:0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.tabBody_Multimedia_pictures #cfcleague-report-images img { border: 0px solid transparent; }

Template für Matchtable:

<html>
<head>
<title>Template für Spielplan</title>
</head>
<body>

<h1>Template für Spielplan</h1>
<h2>Einige vorhandene Marker als Beispiel:</h2>
<pre>
###MATCH### Subpart für ein Spiel
###MATCH_ROLL### Marker für den Typ einer Zeile. Dies ist eine laufende Nummer bei 0 beginnend und leaguetable.table.rowroll endend.
###MATCH_HOME_UID### Marker für UID des Heimteams
###MATCH_HOME_NAME### Marker für Name des Heimteams
###MATCH_HOME_SHORT_NAME### Marker für Kurzname des Heimteams
###MATCH_HOME_SHOWTEAMLINK### Subpart für Link auf das Heimteam
###MATCH_HOME_LOGO### Marker für das Logo des Heimteams
###MATCHCOUNT### Marker für Anzahl der Spiele
###MATCH_COMPETITION_NAME### Marker für Name des Wettbewerbs
###MATCH_COMPETITION_GROUP_NAME### Marker für Name der Altersgruppe
###MATCH_DATE### Marker für Datum des Spiels
###MATCH_GOALS_HOME### Marker für Tore des Heimteams nach Spielende
###MATCH_GOALS_GUEST### Marker für Tore des Gastteams nach Spielende
###MATCH_REPORTLINK### Marker für Link zum Spielbericht
###MATCH_TICKERLINK### Marker für Link zum Liveticker
###MATCH_GUEST_SHOWTEAMLINK### Link auf die Gastmannschaft

</pre>
<p>Weitere Marker ergeben sich aus den obigen Beispielen. Statt HOME verwendet man z.B. GUEST
für die Gastmannschaft.
</p>

<!-- ###MATCHTABLE### start -->
<div id="roundGames"> <!-- z.B. auf dieses DIV wird in JS "config" referenziert -->
  ###MATCHS###
  <table cellspacing="0" cellpadding="0" class="cfcleague-matchtable">
    ###MATCH###
    <tr class="cfcleague-matchtable-row###MATCH_ROLL### cfcleague-matchtable-rowinfo">
	  <td colspan="10">###MATCH_ROUND_NAME###<br/>###MATCH_DATE###</td>
	</tr>
	<tr class="cfcleague-matchtable-row###MATCH_ROLL### cfcleague-matchtable-rowmatch">
	  <td align="center">###MATCH_HOME_LOGO###</td>
	  <td class="cfcleague-matchtable-result">
		<!-- ###RESULT_STATUS_0### Ergebnis vor dem Spiel -->
		-&nbsp;:&nbsp;-
		<!-- ###RESULT_STATUS_0### Ergebnis vor dem Spiel -->

		<!-- ###RESULT_STATUS_-10### Ergebnis bei Spielverlegung -->
		abgesagt
		<!-- ###RESULT_STATUS_-10### Ergebnis bei Spielverlegung -->

		<!-- ###RESULT_STATUS_1### Ergebnis während des Spiels -->
		###MATCH_TICKERLINK######MATCH_GOALS_HOME###&nbsp;:&nbsp;###MATCH_GOALS_GUEST######MATCH_TICKERLINK###
		<!-- ###RESULT_STATUS_1### Ergebnis während des Spiels -->

		<!-- ###RESULT_STATUS_2### Ergebnis nach Spielende -->
		###MATCH_TICKERLINK######MATCH_GOALS_HOME###&nbsp;:&nbsp;###MATCH_GOALS_GUEST######MATCH_TICKERLINK###
		<!-- ###RESULT_STATUS_2### Ergebnis nach Spielende -->
		<br />###MATCH_ADDINFO###
	  </td>
	  <td align="center">###MATCH_GUEST_LOGO###</td>
	</tr>
	<tr class="cfcleague-matchtable-row###MATCH_ROLL### cfcleague-matchtable-rowmatch">
	  <td align="center">###MATCH_HOME_SHOWTEAMLINK######MATCH_HOME_NAME######MATCH_HOME_SHOWTEAMLINK###</td>
	  <td class="cfcleague-matchtable-result"></td>
	  <td align="center">###MATCH_GUEST_SHOWTEAMLINK######MATCH_GUEST_NAME######MATCH_GUEST_SHOWTEAMLINK###</td>
	</tr>

	<!-- ###MATCH_FREE### Team hat spielfrei -->
	<tr class="cfcleague-matchtable-row###MATCH_ROLL### cfcleague-matchtable-rowinfo">
	  <td colspan="10">###MATCH_DATE### Spielfrei (###MATCH_COMPETITION_NAME###)</td>
	</tr>
	<tr class="cfcleague-matchtable-row###MATCH_ROLL### cfcleague-matchtable-rowmatch">
	  <td>###MATCH_ROUND_NAME###</td>
	  <td>
		###MATCH_HOME_LOGO### ###MATCH_HOME_SHOWTEAMLINK######MATCH_HOME_NAME######MATCH_HOME_SHOWTEAMLINK###
		###MATCH_GUEST_SHOWTEAMLINK######MATCH_GUEST_NAME######MATCH_GUEST_SHOWTEAMLINK### ###MATCH_GUEST_LOGO###</td>
	  <td>-</td>
	  <td>spielfrei</td>
	  <td class="cfcleague-matchtable-result">&nbsp;</td>
	</tr>
	<!-- ###MATCH_FREE### Team hat spielfrei -->
	###MATCH###
  </table>

  <!-- ###PAGEBROWSER### START -->
  <div class="t3sports-pagebrowser">
	###PAGEBROWSER_CURRENT_PAGE### Seite ###PAGEBROWSER_CURRENT_PAGE_NUMBER### ###PAGEBROWSER_CURRENT_PAGE###

	###PAGEBROWSER_NORMAL_PAGE###
	###PAGEBROWSER_NORMAL_PAGE_LINK###Seite ###PAGEBROWSER_NORMAL_PAGE_NUMBER### ###PAGEBROWSER_NORMAL_PAGE_LINK###
	###PAGEBROWSER_NORMAL_PAGE###

	###PAGEBROWSER_PREV_PAGE###&nbsp;###PAGEBROWSER_PREV_PAGE_LINK###<###PAGEBROWSER_PREV_PAGE_LINK###&nbsp;###PAGEBROWSER_PREV_PAGE###

	###PAGEBROWSER_NEXT_PAGE###&nbsp;###PAGEBROWSER_NEXT_PAGE_LINK###>###PAGEBROWSER_NEXT_PAGE_LINK###&nbsp;###PAGEBROWSER_NEXT_PAGE###

	###PAGEBROWSER_FIRST_PAGE### ###PAGEBROWSER_FIRST_PAGE_LINK### |< ###PAGEBROWSER_FIRST_PAGE_LINK### ###PAGEBROWSER_FIRST_PAGE###

	###PAGEBROWSER_LAST_PAGE### ###PAGEBROWSER_LAST_PAGE_LINK### >| ###PAGEBROWSER_LAST_PAGE_LINK### ###PAGEBROWSER_LAST_PAGE###
  </div>
  <!-- ###PAGEBROWSER### END -->

  ###MATCHCOUNT### Spiele gefunden.
  ###MATCHS###
</div>

<!-- ###MATCHTABLE### end -->
</body>
</html>

Template für Matchreport:

<html>
<head>
<title>HTML-Template for match report</title>
</head>
<body>
###MATCHREPORT###
<div id="roundCompetition">
	###MATCH_ROUND_NAME### ###MATCH_COMPETITION_NAME###
</div>
<div id="tickerHeader">
  <table>
    <tr>
      <td class="tickerHeader_logoCol">###MATCH_HOME_LOGO###</td>
      <td>
        ###MATCH_HOME_NAME### - ###MATCH_GUEST_NAME###<br />
        ###MATCH_GOALS_HOME### : ###MATCH_GOALS_GUEST###
      </td>
      <td class="tickerHeader_logoCol">###MATCH_GUEST_LOGO###</td>
    </tr>
  </table>
</div>
<div id="ticker">
  <h3>Live-Ticker</h3>
  <div id="cfcleague-report-ticker">
    <div id="cfcleague-report-ticker-author">###MATCH_LIVETICKER_AUTHOR###</div>
    ###MATCH_TICKERLIST###
  </div>
</div>
<div id="setup">
  <table>
    <tr>
      <th><b>###MATCH_HOME_NAME###</b></td>
      <th></td>
      <th><b>###MATCH_GUEST_NAME###</b></td>
    </tr>
    <tr>
      <td class="cfcleague-report-coach">###MATCH_COACHNAMES_HOME###</td>
      <td class="cfcleague-report-coach-head">Trainer</td>
      <td class="cfcleague-report-coach">###MATCH_COACHNAMES_GUEST###</td>
    </tr>
    <tr>
      <td class="cfcleague-report-team">###MATCH_LINEUP_HOME###</td>
      <td class="cfcleague-report-team-head">Aufstellung</td>
      <td class="cfcleague-report-team">###MATCH_LINEUP_GUEST###</td>
    </tr>
    <tr>
      <td class="cfcleague-report-subst">###MATCH_SUBSTNAMES_HOME###</td>
      <td class="cfcleague-report-subst-head">Reserve</td>
      <td class="cfcleague-report-subst">###MATCH_SUBSTNAMES_GUEST###</td>
    </tr>
    <tr>
      <td class="cfcleague-report-scorer">###MATCH_SCORERHOME###</td>
      <td class="cfcleague-report-scorer-head">Torsch&uuml;tzen</td>
      <td class="cfcleague-report-scorer">###MATCH_SCORERGUEST###</td>
    </tr>
  </table>
</div>
<div id="info">
  <table id="cfcleague-report-introtable">
    <tr>
      <td class="cfcleague-report-logo">###MATCH_HOME_LOGO###</td>
      <td class="cfcleague-report-intro">
        Stadion: <b>###MATCH_STADIUM###</b><br />
        Datum: <b>###MATCH_DATE###</b><br />
        Schiedsrichter: <b>###MATCH_REFEREENAMES###</b><br />
        SRA: <b>###MATCH_ASSISTSNAMES###</b><br />
        Zuschauer: <b>###MATCH_VISITORS###</b><br />
      </td>
      <td class="cfcleague-report-logo">###MATCH_GUEST_LOGO###</td>
    </tr>
  </table>
</div>
<div id="pictures">
  <h3>Bilder vom Spiel</h3>
  <!-- ###MATCH_PICTURES### begin -->
  <div id="cfcleague-report-images">
    ###MATCH_FIRST_PICTURE_IMGTAG###
  <!-- ###MATCH_PICTURE### begin -->
    ###MATCH_PICTURE_IMGTAG###
  <!-- ###MATCH_PICTURE### end -->
  </div>
  <!-- ###MATCH_PICTURES### end -->
</div>

###MATCHREPORT###
</body>
</html>


<div id "cfcleague-report-main">
<h3 class="cfcleague-report-head3">
    ###MATCH_ROUND_NAME### ###MATCH_COMPETITION_NAME###
</h3>

<h1 class="cfcleague-report-head1">
    ###MATCH_HOME_NAME### - ###MATCH_GUEST_NAME###<br/>
    ###MATCH_GOALS_HOME### : ###MATCH_GOALS_GUEST###
</h1>

<table id="cfcleague-report-introtable">
  <tr>
    <td class="cfcleague-report-logo">###MATCH_HOME_LOGO###</td>
    <td class="cfcleague-report-intro">
      Stadion: <b>###MATCH_STADIUM###</b><br />
      Datum: <b>###MATCH_DATE###</b><br />
      Schiedsrichter: <b>###MATCH_REFEREENAMES###</b><br />
      SRA: <b>###MATCH_ASSISTSNAMES###</b><br />
      Zuschauer: <b>###MATCH_VISITORS###</b><br />
    </td>
    <td class="cfcleague-report-logo">###MATCH_GUEST_LOGO###</td>
  </tr>
</table>

<div id="cfcleague-report-teams">
  <table id="cfcleague-report-statstable">
  <tr>
      <td><b>###MATCH_HOME_NAME###</b></td>
      <td></td>
      <td><b>###MATCH_GUEST_NAME###</b></td>
  </tr>
  <tr>
    <td class="cfcleague-report-coach">###MATCH_COACHNAMES_HOME###</td>
    <td class="cfcleague-report-coach-head">Trainer</td>
    <td class="cfcleague-report-coach">###MATCH_COACHNAMES_GUEST###</td>
  </tr>
  <tr>
    <td class="cfcleague-report-team">###MATCH_LINEUP_HOME###</td>
    <td class="cfcleague-report-team-head">Aufstellung</td>
    <td class="cfcleague-report-team">###MATCH_LINEUP_GUEST###</td>
  </tr>
  <tr>
    <td class="cfcleague-report-subst">###MATCH_SUBSTNAMES_HOME###</td>
    <td class="cfcleague-report-subst-head">Reserve</td>
    <td class="cfcleague-report-subst">###MATCH_SUBSTNAMES_GUEST###</td>
  </tr>

  <tr>
    <td class="cfcleague-report-scorer">###MATCH_SCORERHOME###</td>
    <td class="cfcleague-report-scorer-head">Torsch&uuml;tzen</td>
    <td class="cfcleague-report-scorer">###MATCH_SCORERGUEST###</td>
  </tr>

<!--  <tr>
    <td class="cfcleague-report-changes-head">Wechsel</td>
    <td class="cfcleague-report-changes"></td>
    <td class="cfcleague-report-changes"></td>
  </tr>
  <tr>
    <td class="cfcleague-report-penalties-head">Karten</td>
    <td class="cfcleague-report-penalties"></td>
    <td class="cfcleague-report-penalties"></td>
  </tr>
  -->
  </table>
</div>
</div>
<!-- ###MATCH_MEDIAS### begin -->
<div id="cfcleague-report-media">
  <h2>Trainerkommentare</h2>
  <!-- ###MATCH_MEDIA### begin -->
  ###MATCH_MEDIA_PLAYER###
  <!-- ###MATCH_MEDIA### end -->
</div>
<!-- ###MATCH_MEDIAS### end -->

<div id="cfcleague-report-summary-author">
  <p>###MATCH_GAME_REPORT_AUTHOR###</p>
</div>

<div id="cfcleague-report-summary-text">
  ###MATCH_GAME_REPORT###
</div>

<?php
/**** Der Liveticker **************************/
?>

<h3>Live-Ticker</h3>
<div id="cfcleague-report-ticker">
  <div id="cfcleague-report-ticker-author">###MATCH_LIVETICKER_AUTHOR###</div>
  ###MATCH_TICKERLIST###
</div>
<form name="Formular1" action="">
  <input type="checkbox" name="Options" value="autoScroll">Automatischer Bildlauf<br/>
</form>
<span id="messageBox"></span>
<!--
###MATCH_NOTES###
###MATCH_NOTE###
###MATCH_NOTE_MINUTE### - ###MATCH_NOTE_PLAYER### - ###MATCH_NOTE_TEXT###
###MATCH_NOTE###
###MATCH_NOTES###
-->


  <!-- ###MATCH_PICTURES### begin -->
  <div id="cfcleague-report-images">
  ###MATCH_FIRST_PICTURE_IMGTAG###
  <!-- ###MATCH_PICTURE### begin -->
  ###MATCH_PICTURE_IMGTAG###
  <!-- ###MATCH_PICTURE### end -->
  </div>
  <!-- ###MATCH_PICTURES### end -->

<!--
###MARKERMODULE__CHARTMATCH###

###MARKERMODULE__MATCHHISTORY###
-->






###HISTORIC_MATCHES###
###MATCHS###
<table cellspacing="0" cellpadding="0" class="cfcleague-matchtable">

###MATCH###
<tr class="cfcleague-matchtable-row###MATCH_ROLL### cfcleague-matchtable-rowinfo">
<td colspan="10">###MATCH_DATE### (###MATCH_COMPETITION_NAME###)</td>
</tr>
<tr class="cfcleague-matchtable-row###MATCH_ROLL### cfcleague-matchtable-rowmatch">
<td>###MATCH_ROUND_NAME###</td>
<td>###MATCH_HOME_SHOWTEAMLINK######MATCH_HOME_NAME######MATCH_HOME_SHOWTEAMLINK###</td>
<td>-</td>
<td>###MATCH_GUEST_SHOWTEAMLINK######MATCH_GUEST_NAME######MATCH_GUEST_SHOWTEAMLINK### </td>
<td class="cfcleague-matchtable-result">

<!-- ###RESULT_STATUS_0### Ergebnis vor dem Spiel -->
-&nbsp;:&nbsp;-
<!-- ###RESULT_STATUS_0### Ergebnis vor dem Spiel -->

<!-- ###RESULT_STATUS_-10### Ergebnis bei Spielverlegung -->
verlegt
<!-- ###RESULT_STATUS_-10### Ergebnis bei Spielverlegung -->

<!-- ###RESULT_STATUS_1### Ergebnis während des Spiels -->
###MATCH_GOALS_HOME###&nbsp;:&nbsp;###MATCH_GOALS_GUEST###
<!-- ###RESULT_STATUS_1### Ergebnis während des Spiels -->

<!-- ###RESULT_STATUS_2### Ergebnis nach Spielende -->
###MATCH_REPORTLINK######MATCH_GOALS_HOME###&nbsp;:&nbsp;###MATCH_GOALS_GUEST######MATCH_REPORTLINK###
<!-- ###RESULT_STATUS_2### Ergebnis nach Spielende -->
<br />###MATCH_ADDINFO###
</td>
</tr>
###MATCH###
</table>
###MATCHS###

###HISTORIC_MATCHES###

Template für Leaguetable:

<html>
<head>
<title>Template für Ligatabelle</title>
</head>
<body>

<h1>Template für Ligatabelle</h1>
<h2>Vorhandene Marker:</h2>
<pre>
###CONTROLS### Subpart für das Steuerungspanel der Tabelle
###CONTROL_TABLETYPE### Subpart für Auswahl des Tabellentyps (Normal, Heim oder Auswärts)
###CONTROL_TABLESCOPE### Subpart für Auswahl Tabellenscope (Normal, Hin- oder Rückrunde)
###CONTROL_POINTSYSTEM### Subpart für Auswahl Punktsystem (2- oder 3-Punktesystem)

###CONTROL_TABLETYPE_NORMAL_LINK### Subpart für Link auf Tabellentyp normal
###CONTROL_TABLETYPE_HOME_LINK### Subpart für Link auf Tabellentyp Heim
###CONTROL_TABLETYPE_AWAY_LINK### Subpart für Link auf Tabellentyp Auswärts

###CONTROL_TABLESCOPE_NORMAL_LINK### Subpart für Link auf Tabellenscope normal
###CONTROL_TABLESCOPE_FIRST_LINK### Subpart für Link auf Tabellenscope Hinrunde
###CONTROL_TABLESCOPE_SECOND_LINK### Subpart für Link auf Tabellenscope Rückrunde

###CONTROL_POINTSYSTEM_POINT3_LINK### Subpart für Link auf 3-Punkte-Tabelle
###CONTROL_POINTSYSTEM_POINT2_LINK### Subpart für Link auf 2-Punkte-Tabelle

Hinweis: Per TS können die Links und URLs zusätzlich gewrapped werden wobei aktive Links unterschieden werden!

###ROW### Subpart für eine Zeile der Tabelle
###ROW_ROLL### Marker für den Typ einer Zeile. Dies ist eine laufende Nummer bei 0 beginnend und leaguetable.table.rowroll endend.
###ROW_MARKCLUB### Marker zur Markierung von ausgewählten Teams. Dies sollte eine CSS-Klasse sein
###ROW_MARK### Marker zur Markierung von bestimmten Tabellenpositionen. Der Inhalt wird aus dem Wettbewerbsdatensatz geholt.
###ROW_POSITION### Marker für Tabellenplatz
###ROW_POSITIONCHANGE### Marker für Tabellenplatzänderung
###ROW_OLDPOSITION### Marker für Tabellenplatz des vorherigen Spieltags
###ROW_...### Marker für Werte aus dem Teamdatensatz
###ROW_SHOWTEAMLINK### Subpart für Link auf die Teamdarstellung
###ROW_SHOWMATCHTABLELINK### Subpart für Link auf Teamspielplan
###ROW_MATCHCOUNT### Marker für Anzahl der Spiele
</pre>

<!-- ###LEAGUE_TABLE### start -->
<div id="liveTable">
  <!-- ###CONTROLS### start -->
  <div class="cfcleague-scopeselection">
    ###CONTROL_TABLETYPE###
    <p>
      ###CONTROL_TABLETYPE_NORMAL_LINK### ###CONTROL_TABLETYPE_NORMAL### ###CONTROL_TABLETYPE_NORMAL_LINK###
      ###CONTROL_TABLETYPE_HOME_LINK### ###CONTROL_TABLETYPE_HOME### ###CONTROL_TABLETYPE_HOME_LINK###
      ###CONTROL_TABLETYPE_AWAY_LINK### ###CONTROL_TABLETYPE_AWAY### ###CONTROL_TABLETYPE_AWAY_LINK###
    </p>
    ###CONTROL_TABLETYPE###

    ###CONTROL_TABLESCOPE###
    <p>
      ###CONTROL_TABLESCOPE_NORMAL_LINK### ###CONTROL_TABLESCOPE_NORMAL### ###CONTROL_TABLESCOPE_NORMAL_LINK###
      ###CONTROL_TABLESCOPE_FIRST_LINK### ###CONTROL_TABLESCOPE_FIRST### ###CONTROL_TABLESCOPE_FIRST_LINK###
      ###CONTROL_TABLESCOPE_SECOND_LINK### ###CONTROL_TABLESCOPE_SECOND### ###CONTROL_TABLESCOPE_SECOND_LINK###
    </p>
    ###CONTROL_TABLESCOPE###

    ###CONTROL_POINTSYSTEM###
    <p>
      ###CONTROL_POINTSYSTEM_POINT3_LINK### ###CONTROL_POINTSYSTEM_POINT3### ###CONTROL_POINTSYSTEM_POINT3_LINK###
      ###CONTROL_POINTSYSTEM_POINT2_LINK### ###CONTROL_POINTSYSTEM_POINT2### ###CONTROL_POINTSYSTEM_POINT2_LINK###
    </p>
    ###CONTROL_POINTSYSTEM###
  </div>
  <!-- ###CONTROLS### end -->

  ###ROWS###
  <div class="cfcleague-leaguetable-teaser">
    <table cellspacing="0" cellpadding="0" class="cfcleague-leaguetable-teaser">
      <tr>
        <th class="cfcleague-leaguetable-teaser-heading cfcleague-leaguetable-teaser-position">Pl.</th>
        <th class="cfcleague-leaguetable-teaser-heading cfcleague-leaguetable-teaser-name">Verein</th>
        <th class="cfcleague-leaguetable-teaser-heading cfcleague-leaguetable-teaser-matchcount">Sp.</th>
        <th class="cfcleague-leaguetable-teaser-heading cfcleague-leaguetable-teaser-points">P.</th>
      </tr>

      ###ROW###
      <tr class="cfcleague-leaguetable-row###ROW_ROLL### ###ROW_MARKCLUB### cfcleague-leaguetable-row_###ROW_MARK###">
        <td class="cfcleague-leaguetable-teaser-position">###ROW_POSITION###.</td>
        <td class="cfcleague-leaguetable-teaser-name">###ROW_SHOWTEAMLINK######ROW_SHORT_NAME######ROW_PENALTIES######ROW_SHOWTEAMLINK###</td>
        <td class="cfcleague-leaguetable-teaser-matchcount">###ROW_MATCHCOUNT### / </td>
        <td class="cfcleague-leaguetable-teaser-points">###ROW_POINTS######ROW_POINTS2###</td>
      </tr>
      ###ROW###
    </table>
  </div>
  ###ROWS###

  <!-- ###PENALTIES### start -->
  <div class="cfcleague-leaguetable-comments">
    <h3>Hinweise</h3>
    <!-- ###PENALTY### start -->
    <p class="cfcleague-leaguetable-comment">* ###PENALTY_COMMENT###
    </p>
    <!-- ###PENALTY### end -->
  </div>
  <!-- ###PENALTIES### end -->
</div>
<!-- ###LEAGUE_TABLE### end -->

</body>
</html>

So, nun ist das Wichtigste schon mal gesagt.
Welche Tabs es gibt, wie sie heißen und was darin angezeigt werden soll, wird in der Liveticker-Template-Datei festgelegt, und zwar im div "config" unter <script>.

Bsp: var tabs = new Array(
{title: 'Übersicht', body: new Array('ticker', 'info', 'setup')},
{title: 'Tickermeldungen', body: new Array('ticker')}
);

Hier werden 2 Tabs erzeugt: "Übersicht" und "Tickermeldungen".
"Übersicht" beinhaltet 3 Inhaltselemente, welche jeweils in den DIVs "ticker", "info" und "setup" stecken.
Wie man am Beispiel sehen kann, wird das DIV "ticker" auch im 2. Tab angezeigt und kann hierfür eine andere Formatierung erhalten.
Das erreicht man mit folgendem CSS:

.tabBody_Übersicht_ticker {} // Style für "ticker" im Tab "Übersicht"
.tabBody_Tickermeldungen_ticker {} // Style für "ticker" im Tab "Tickermeldungen"

Wenn man also auf einen Tab klickt werden im DIV "tabBody" alle DIVs welche angezeigt werden sollen mit class=("tabBody_" + TabName + "_" + divName) versehen.
Inaktive tabBody-DIVs erhalten class="disabled".
Aktive tabHeader erhalten class="active" und inaktive class="inactive".

Inhaltselemente welche nicht in Tabs sonders sonst wo in der Seite angezeigt werden sollen werden mittels

var static = new Array(
'roundCompetition', 'tickerHeader', 'content_137'
);

eingebunden. Diese brauchen einen festen (static) Platz. Diesen legt man fest, indem man z.B. <div id="static_tickerHeader"> im Template einbaut.

Für weitere Infos bitte die Kommentare in den jeweiligen Dateien beachten.

Falls noch Fragen offen sind, einfach posten!