Hozzon létre egy adaptív pivottáblát
Első lépések a jelöléssel
A táblázat elrendezése hasonlít az OpenType példájában szereplő táblázathoz, csak itt adtuk hozzá az azonosítót és az osztályt (az opcionális záró címkéket eltávolítottuk a kód egyszerűsítése érdekében).
A CSS is nagyon hasonló. Ezt a példát írtam a Sass-ra:
Forgó sorok és oszlopok
A jelenlegi táblázat struktúrája JS-ben van írva a fulltable változóba. A JS nélkül a táblázat megjelenik, de nem forog.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
Minden változó a táblázat részét képezi.
A pivotTable függvény helyeken változtatja a sorokat és oszlopokat. A baloldali fejlécek felfelé mozogtak. Tiszta szemantikailag (perspektívában) semmi sem változik, csak a faj változik.
A puccs után az osztály nagyból kicsire változik. Az asztalszerkezet fordított változata a slimTable változóba van írva, így a táblázat nem tér vissza, ha a nézetablak méretét megváltoztatja.
A pivotTable funkció elindul az oldal betöltése után:
Nem kell tesztelni a pivotTable függvényhívást minden egyes alkalommal, amikor a nézetablak méretét megváltoztatjuk (ez súlyosan befolyásolja a teljesítményt), ezért erőteljesen csökkentettem az újraindítási időt 200 milliszekundumra, amikor a resize-esemény bekövetkezett:
A lassítás a funkción keresztül történik:
következtetés
A technika nem alkalmas minden táblázatra (ahol túl sok oszlop és sor van), de hasznos lehet a táblázatokhoz, mint a mi példánkban.
Kiadás: A webformyself parancs.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
A legfrissebb hírek az informatikai és webfejlesztésről a Telegram csatornán
Bootstrap keret: az adaptív elrendezés gyakorlata az A-tól Z-ig
Tanulja meg, hogy a webhelyek a Bootstrap keretrendszer összes funkcióját használják.