tabtjs - Rangschikking

Installatie in 1, 2, 3 ...

1. Bepaal de divisie waarvoor je een rangschikking wilt maken

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

Vereniging:
Seizoen:
OnChange="initializeClubs()"
Klub:
OnChange="initializeTeams('division')"
Ploeg:
OnChange="initializeRanking()"

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)
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="myranking1" class="tabtjs ranking">
    DivisionId=681,
    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
DivisionId Uniek ID dat verwijst naar de divisie op frenoy. ... -
Association Geeft aan over welke vereniging het gaat. kbttb | sporcrea kbttb
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
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 ranking tabel 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.ranking { }

/* Heading cellen */
table.ranking thead tr th.position { }

table.ranking thead tr th.team { }

table.ranking thead tr th.gamesPlayed { }

table.ranking thead tr th.gamesWon { }

table.ranking thead tr th.gamesLost { }

table.ranking thead tr th.gamesDraw { }

table.ranking thead tr th.points { }

/* Body cellen */
table.ranking tbody tr td.position { }

table.ranking tbody tr td.team { }

table.ranking tbody tr td.gamesPlayed { }

table.ranking tbody tr td.gamesWon { }

table.ranking tbody tr td.gamesLost { }

table.ranking tbody tr td.gamesDraw { }

table.ranking tbody tr td.points { }

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

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