Tab Control: osnove

1. Pregled in namen

Stanje: navigacijska oblika [Live] (widgets::tabs()); preklapljanje panela z vsebino na strani odjemalca brez ponovnega nalaganja je [Live] (odsek 7).

tabs() danes izriše navigacijski trak zavihkov: vsak zavihek je polna povezava na drugo stran. Ciljna publika: obrazci/pogledi, razdeljeni na več zavihkov, od katerih vsak hrani lastno strežniško stanje (npr. zavihki Table Designerja „Stolpci„/„Indeksi“/„Omejitve„).

2. Predpogoji

DokuWiki z omogočenim vtičnikom wkfluentui.
helper_plugin_wkfluentui_widgets naložen prek plugin_load('helper', 'wkfluentui_widgets').
Vsak zavihek potrebuje svoj, prek URL-ja dosegljiv ciljni pogled (brez preklapljanja panela na strani odjemalca v trenutni razvojni fazi).

3. Pojmi

Navigacija, ne preklapljanje panela: vsak klik znova naloži ciljno stran — to je namerno, ne manjkajoča funkcija. Prvi porabnik (zavihki Table Designerja) hrani lastno strežniško stanje na zavihek (različni obrazci na zavihek), tam je ponovno nalaganje pravilno. Pravo, odjemalsko preklapljanje panela je specificirano kot lastna pogodba (odsek 7), ni del žive osnovne oblike.

4. Prvi koraki

/** @var helper_plugin_wkfluentui_widgets $widgets */
$widgets = plugin_load('helper', 'wkfluentui_widgets');
 
echo $widgets->tabs([
    ['key' => 'stolpci',  'label' => 'Stolpci',  'href' => wl($ID, ['tab' => 'stolpci'])],
    ['key' => 'indeksi',  'label' => 'Indeksi',  'href' => wl($ID, ['tab' => 'indeksi'])],
    ['key' => 'omejitve', 'label' => 'Omejitve', 'href' => wl($ID, ['tab' => 'omejitve'])],
], 'stolpci');

Napačno: kot drugi parameter posredovati vrednost key, ki se ne ujema z nobenim zavihkom, v pričakovanju, da bo „prvi zavihek“ označen kot aktiven kot rezerva. Tedaj noben zavihek ni označen kot aktiven — brez napake, a tudi brez samodejne izbire.

5. Uporaba

Primer uporabe	Vzorec
Zavihki obrazca z lastnim strežniškim stanjem na zavihek	`tabs()` neposredno, `$active` izpeljan iz trenutnega parametra zahteve
Najpogostejši porabnik	Vertical Grid kot vsebina panela na zavihek (vzorec Table Designerja)

6. API referenca

Metapodatek	Vrednost
Jezik	PHP
Imenski prostor	`helper_plugin_wkfluentui_widgets`
Datoteka	`lib/plugins/wkfluentui/helper/widgets.php`
Vidnost	public
Stabilnost	stabilno (raven 1), nastalo za SQLite Table Designer

public function tabs(array $tabs, $active): string

Povzetek: izriše navigacijski trak zavihkov iz definicij zavihkov; trenutno aktivni zavihek se označi s primerjavo ključa.

Vrnjena vrednost: string — <ul class="wk-tabs">…</ul>. Prazen niz pri praznem $tabs.

7. Parametri, možnosti in stanja

$tabs (na vnos)

Ključ	Tip	Obvezno	Pomen
`key`	string	Da	enolični identifikator, primerjan z `$active`
`label`	string	Da	besedilo zavihka (ubežano prek `hsc()`)
`href`	string	Da	ciljni URL

$active (drugi parameter metode, string): key trenutno aktivnega zavihka. Primerjava nizov; brez ujemanja noben zavihek ni označen kot aktiven.

Generiran izris

<ul class="wk-tabs"> → na zavihek <li class="wk-tabs__item"><a class="wk-tabs__link[ wk-tabs__link--active]">…</a></li>.

Vedenje ob napaki

Pogoj	Vedenje
`$tabs` prazen	vrne prazen niz, brez napake
`$active` se ne ujema z nobenim `key`	noben zavihek ni označen kot aktiven, brez napake
podvojene vrednosti `key`	brez preverjanja — oba zavihka bi bila hkrati označena kot aktivna pri ujemajočem `$active`; klicatelj je odgovoren za enolične ključe

8. Preklapljanje panela z vsebino brez ponovnega nalaganja [Live]

Pravi „Tab Control„ v smislu DevExpress (ASPxPageControl): več vnaprej izrisanih panelov z vsebino leži v DOM, klik na naslov zavihka prikaže le ustrezni panel (atribut hidden na ostalih, scripts/tabs.js) — brez strežniškega povratnega potovanja.

tabs($tabs, $active, ['mode' => 'nav'|'panels']) (privzeto nav = nespremenjeno navigacijsko vedenje, bajtno identično prejšnji različici).
Pri panels: vnosi $tabs dodatno nosijo 'panelHtml' => string (zaupanja vreden HTML, kot controlHtml pri propertyGrid()); vsak naslov zavihka se izriše kot <button type="button" role="tab"> namesto <a> — brez href, ker se nič ne navigira. Vsebnik (.wk-tabcontrol) nosi povezavo role="tablist"/role="tabpanel" z determinističnimi pari ID-jev; $opts['id'] poimenuje kontrolnik (privzeto: izpeljano iz ključev zavihkov, brez trkov pri več kontrolnikih na stran).
Rezervni način brez JS pri panels: vsi paneli so hkrati vidni, drug pod drugim, z ustreznim naslovom zavihka kot <h4> pred njim — šele plast JS (razred js-enabled) skrije neaktivne panele in podvojene naslove; brez JavaScripta nobena vsebina ni nedosegljiva.

echo $widgets->tabs([
    ['key' => 'stolpci', 'label' => 'Stolpci', 'panelHtml' => $stolpciHtml],
    ['key' => 'indeksi', 'label' => 'Indeksi', 'panelHtml' => $indeksiHtml],
], 'stolpci', ['mode' => 'panels']);

9. Omejitve in robni primeri

Prelivanje zavihkov (meni „Več…“ pri ozkem vsebniku) — podrobnosti: Adaptivity.
panelHtml se v načinu nav prezre; enako href v načinu panels.

10. Dostopnost in združljivost

Celoten pregled: Accessibility (konsolidirano, tu ni podvojeno).
Kot čista navigacija s povezavami trak zavihkov namerno nosi brez role=„tablist“ — ta vloga za čisto navigacijo ne bi bila pravilna in bi bralnikom zaslona napačno signalizirala pripomoček za preklapljanje panelov.
Povsem uporabno brez JavaScripta (nativna semantika povezav).

11. Odpravljanje težav

Simptom: noben zavihek se ne prikaže kot označen aktiven.

Vzrok: posredovana vrednost $active se ne ujema z nobenim key v $tabs (tipkarska napaka ali napačno ime parametra zahteve).

Rešitev: preveriti $active glede na dejanske vrednosti key v $tabs.

12. Sorodne teme

predstavitveni pregled — vsaka kategorija
FluentUI: javni API pomočnika — popolna pogodba metod
FluentUI: Vertical Grid (Property Grid) — predstavitveni pregled — najpogostejši porabnik