Treegrid ja muut edistyneet rakenteet
Ottakaa vaativimmat yhdistelmäwidgetit hallintaan luottavaisin mielin.
Treegrid ja muut edistyneet rakenteet on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Vaikea tila alkaa
Jotkin komponentit ovat todella monimutkaisia: treegridit, ruudukot ja puut yhdistävät rivit, sarakkeet ja laajennettavat solmut samanaikaisesti. 🌳
Mikä treegrid on
Treegrid on ruudukko, jonka rivit voivat laajentua ja supistua puun tavoin. Se sopii erinomaisesti tiedostoselaimeen, jossa on sisäkkäisiä kansioita ja yksityiskohtaisia sarakkeita.
Keskeiset roolit
Käytä säilössä roolia role="treegrid", jokaisella rivillä roolia role="row" ja soluissa roolia role="gridcell". Rakenne vastaa oikeaa ruudukkoa.
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>Laajennettavat rivit
Avattavalla rivillä on aria-expanded: sen arvo on true, kun alirivit näkyvät, ja false, kun rivi on supistettu. Lehdirivit jättävät tämän määritteen kokonaan pois.
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>Syvyys aria-level-määritteellä
Kerro aria-level-määritteellä, kuinka syvällä rivi on puussa. Taso 1 on ylin taso, ja jokainen sisäkkäinen rivi kasvattaa tasoa yhdellä.
Liikkuminen kahdella akselilla
Treegridissä nuolinäppäimet liikkuvat molemmilla akseleilla: ylä- ja alanuoli vaihtavat riviä, kun taas vasen- ja oikea nuoli siirtyvät solujen välillä tai supistavat ja laajentavat rakenteen.
Laajennus- ja supistusnäppäimet
Ylärivillä Right Arrow laajentaa rivin ja Left Arrow supistaa sen. Tämä vastaa sitä, miten työpöydän tiedostopuut ovat aina toimineet.
Yksi sarkainkohde
Koko treegrid on yksi sarkainkohde. Roving tabindex siirtää varsinaisen kohdistuksen solujen välillä, joten komponentti tuntuu yhdeltä yhdistetyltä ohjausobjektilta.
Koon ja sijainnin määrittäminen
Dynaamisissa tai virtualisoiduissa riveissä käytä määritteitä aria-setsize ja aria-posinset, jotta käyttäjät kuulevat sijainti- ja kokonaismäärät, vaikka kaikkia rivejä ei olisi luotu.
Home, End ja hypyt
Kehittyneissä ruudukoissa Home ja End siirtävät ensimmäiseen tai viimeiseen soluun. Ctrl yhdessä Homе- tai End-näppäimen kanssa siirtää aineiston aivan alkuun tai loppuun.
Tutustu APG:hen
Nämä toimintamallit eivät anna paljon anteeksi, joten noudata APG-esimerkkiä tarkasti ja testaa oikealla ruudunlukijalla. Pienetkin virheet voivat rikkoa koko komponentin.
Pikatarkistus
Rakennat tiedostoselainta, jossa rivit avautuvat ja paljastavat ruudukon sisällä olevia sisäkkäisiä rivejä. Mikä rooli sopii tilanteeseen?
Kertaus
Treegrid yhdistää ruudukon ja puun: riveillä on aria-expanded ja aria-level, nuolinäppäimet toimivat kahdella akselilla ja roving tabindex tarjoaa yhden sarkainkohteen. Hyödynnä APG:tä ja testaa perusteellisesti. ✅
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Treegrid ja muut edistyneet rakenteet” ilmainen?
Kyllä – oppitunnin ”Treegrid ja muut edistyneet rakenteet” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Treegrid ja muut edistyneet rakenteet”?
Ottakaa vaativimmat yhdistelmäwidgetit hallintaan luottavaisin mielin. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Treegrid ja muut edistyneet rakenteet”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- APG:n lukeminen: rakenteet, näppäimet ja esimerkit
- Combobox ja automaattinen täydennys oikein tehtynä
- Menu, menubar ja menupainike
- Treegrid ja muut edistyneet rakenteet