tabtjs - Wedstrijdoverzicht

Installatie in 1, 2, 3 ...

1. Bepaal het team waarvoor je een wedstrijdoverzicht wilt maken

Deze gegevens zullen in puntje 3 gebruikt worden om de modulecode te genereren.

Vereniging:
Seizoen:
OnChange="initializeClubs()"
Klub:
OnChange="initializeTeams('team')"
Ploeg:
OnChange="initializeMatches()"

2. Voeg tabtjs toe aan je webpagina

Open je webpagina in je favoriete editor. Als je met FrontPage of Dreamweaver ofzo werkt, klik dan op 'HTML' om de HTML code van je webpagina te zien. Ga nu op zoek naar de head sectie van je webpagina. Deze sectie wordt omsloten door de tags <head> en </head>. Binnen deze sectie (bvb meteen achter de openingstag <head>) plaats je de volgende regel:

<script type="text/javascript" src="http://tabt.mentalis.org/0.5/tabtjs.js"></script>

Let op: als je meerdere modules op dezelfde pagina zet, mag je deze lijn slechts één keer toevoegen!

3. Voeg je module toe aan je website

Ga in je HTML pagina op zoek naar de plaats waar je de module wilt bijvoegen. Plak op deze plaats de volgende regel*: 

Selecteer eerst een seizoen...

(* Deze code werd gegenereerd op basis van de ploeg die je in puntje 1 hebt geselecteerd.)

Klaar!

Meer is het niet. Publiceer je webpagina nu gewoon op je server en de rangschikking zal verschijnen!

Voorbeeldweergave en extra parameters

Vervolledig eerst de selectie in bovenstaand formulier.
Tabelhoofding weergeven
Taal
Tooltips weergeven
Team highlight (widcards * toegestaan)
Links naar Frenoy
Thema
Opties voor het thema 'Modern' (heeft geen invloed op thema 'Klassiek')
Afgeronde hoeken
Volledige beschikbare breedte
Header BG Header FG
Tabel BG Tabel FG
Footer BG Footer FG
Geselecteerd BG Geselecteerd FG

Verdere configuratie Optioneel

Tabtjs modules zijn parametriseerbaar. Het parameter mechanisme is vrij eenvoudig. Parameters voeg je gewoon toe binnen je <div>. Parameters worden gescheiden door een comma.

Voorbeeld:

<div id="mymatches1" class="tabtjs matches">
    Club=OVL001,
    DivisionCategory=1,
    Team=A,
    Language=nl
</div>

De parameterwaarde mag eventueel tussen enkele of dubbele aanhalingstekens worden gezet.

De volgende parameters worden door de rankschikkingmodule ondersteund:

Parameter Beschrijving Mogelijke waarden Standaardwaarde
Association Geeft aan over welke vereniging het gaat. kbttb | sporcrea kbttb
Club De offici‘le code van uw klub. ... -
Team Geef hier de letter van het team dat je wenst te selecteren. ... -
Season Geeft het nummer van het seizoen weer. Voor KTTB heeft seizoen 2010-11 het nummer 11. Vroegere of latere seizoenen hebben een evenredig hoger of lager nummer. ... Huidige seizoen
Highlight Specifieer hier (een deel van) de klubnaam zodat deze in het vet komen. string (gebruik van wildcards '*' is toegestaan) -
ShowHeader Geeft aan of de tabelhoofding moet worden weergegeven. true | false true
AddFrenoyLinks Geeft aan of je in de tabel rechtstreekse links wenst naar de wedstrijdpagina's op de website van Frenoy. Er is enkel een link beschikbaar voor reeds gespeelde wedstrijden. true | false false
Language Geeft aan in welke taal de rangschikking getoond moet worden. nl | fr | en en
Tooltips Geeft aan of de hoofding tooltips moet hebben. true | false true
OverrideStyle Geeft aan of de layout (css) van overschreven moet worden (zie volgend puntje). true | false false

Verdere opmaak Optioneel

Als je zelf CSS kent en je wil de opmaak van de wedstrijdentabel volledig zelf doen, dan bestaat er de mogelijkheid om de stijl te "Overriden". Om dit te doen, moet je de parameter "OverrideStyle" op 'true' zetten (zie hierboven) waarna je de stylesheet volledig zelf kan definieren.

Wanneer de parameter OverrideStyle=true gedefinieerd is, kan je het volgende CSS schema gebruiken: 
/* Table */
table.matches { }

/* Heading cellen */
table.matches thead tr th.week { }

table.matches thead tr th.date { }

table.matches thead tr th.time { }

table.matches thead tr th.homeTeam { }

table.matches thead tr th.awayTeam { }

table.matches thead tr th.score { }

/* Body cellen */
table.matches tbody tr td.week { }

table.matches tbody tr td.date { }

table.matches tbody tr td.time { }

table.matches tbody tr td.homeTeam { }

table.matches tbody tr td.awayTeam { }

table.matches tbody tr td.score { }

/* Highlighed row(s) */
table.matches tbody tr.highlight { }

/* Footer cel */
table.matches tbody tr td.poweredBy { }