Duomenų lentelės nelabai gerai tvarko reaguojantį dizainą. Deja, šis momentas egzistuoja. Interaktyvus dizainas yra skirtas pritaikyti dizainą, kad jis atitiktų skirtingus ekrano dydžius. Taigi, kas atsitiks, kai ekranas yra siauresnis nei minimalus duomenų lentelės plotis? Galite sumažinti mastelį ir matyti visą lentelę, bet teksto dydis bus per mažas, kad galėtumėte skaityti. Arba galite priartinti skaitymo tašką, bet turėsite slinkti vertikaliai horizontaliai ir (deja) peržiūrėti lentelę. Duomenų lentelės gali būti gana plačios ir tikrai tokios yra. Lentelės gali būti lanksčios pločio (svoris=100%), tačiau langelių turinys gali susiaurėti tiek, kad jo tiesiog nesimatyti.

Siekiant išvengti šio nemalonaus momento, naudojamos adaptyvios lentelės. Tokioje lentelėje bus rodoma horizontali slinkties juosta, jei ekranas per mažas, kad būtų rodomas visas turinys.

Norėdami sukurti interaktyvią lentelę, pridėkite sudėtinio rodinio elementą perpildymas-x:auto aplinkui

Pastaba. „OS X Lion“ („Mac“ sistemoje) slinkties juostos yra paslėptos pagal numatytuosius nustatymus ir rodomos tik tada, kai jos naudojamos (net jei nustatyta „perpildymas: slinkimas“ arba automatinis).

Prisitaikančios svetainės jau seniai nebėra įdomybės ir jos tampa vis labiau paplitusios. Atsižvelgiant į paskutines naujienas apie paieškos sistemų reitingus (jei kas nežino, pirmenybė teikiama reaguojančioms svetainėms paieškoje iš mobiliojo įrenginio), tokių svetainių skaičius ir toliau augs. Galite būti prieš pritaikymą mobiliesiems įrenginiams arba už, tačiau faktas išlieka: klientai vis dažniau reikalauja, kad jų svetainė būtų pritaikyta, o žiniatinklio valdytojai turi tai padaryti.

Viena iš pagrindinių problemų pritaikant svetainę skirtingoms raiškoms yra lentelės. Ypač jei juose yra daug duomenų. Pažvelkime į du būdus, kaip išdėstyti reaguojančią lentelę.

Pirmiausia pažiūrėkime, kaip atrodo lentelė:

Būkime sąžiningi: tokios lentelės negalima vadinti tikrai prisitaikančia. Puikiai atrodo mobiliajame telefone, niekas niekur neišsiskiria ir svetainės išdėstymas „neteka“. Šis metodas puikiai tinka, jei lentelės jūsų svetainėje yra retos ir nėra prasmės dėl jų prijungti kai kuriuos papildinius ir rašyti papildomų stilių. Šį metodą naudoja Bootstrap. Taigi, kaip tai veikia?

Tai paprasta: lentelė apvyniota div, kuris nustatytas iki 100% pločio ir perpildymo: automatinis.

Jei stalas ilgas, taip pat galite nustatyti maksimalų aukštį ir pataisyti lentelės antraštę.

Rezultatą, kaip ir toliau pateiktame pavyzdyje, galite peržiūrėti šiame puslapyje.

Jei savo svetainėje dažnai turite lenteles, prasminga naudoti Footable papildinį.

Pirmiausia turite prijungti papildinį (atsisiųsti jį iš „GitHub“ arba prijungti iš CDN) ir inicijuoti:

$(function() ( $(.table").footable(); ));

Čia reikia kai ką patikslinti: kažkodėl scenarijus skaičiuoja ne peržiūros srities, o lentelės plotį. Norėdami tai išspręsti, turite šiek tiek „modernizuoti“ scenarijų:

JQuery(funkcija () ( jQuery(.table").footable(( apskaičiuotiWidthOverride: function()) ( return (width: jQuery(langas).width()); ) )); ))

Inicijuojant nurodome lentelės klasę arba tik lentelės žymą, jei norime, kad visos svetainės lentelės būtų adaptyvios.

Ką visa tai reiškia? Planšetiniuose kompiuteriuose stulpeliai „RAM“, „Įstrižainė“, „PPI“ ir „Battery“ bus paslėpti. Sumažėjus iki telefonų, prie jų prisijungs ir stulpelis „Kaina“.

Patikrinimo taškai gali būti nurodyti inicijuojant:

JQuery(function () ( jQuery(.table").footable(( apskaičiuokiteWidthOverride: function()) ( return (width: jQuery(window).width()); ), pertraukos taškai: ( mobilusis: 0, planšetinis kompiuteris: 720, darbalaukis: 1024 ) ));

Tai reiškia, kad 0–720 diapazone taisyklė taikoma mobiliesiems įrenginiams, 720–1024 planšetiniams kompiuteriams ir virš 1024 staliniams kompiuteriams. Jei reikia, niekas netrukdo sukurti dar daugiau taisyklių.

Taip pat galite įsitikinti, kad kai kurie stulpeliai yra išplėsti pagal numatytuosius nustatymus. Norėdami tai padaryti, nurodykite duomenų atributą data-expanded="true"

Papildinio galimybės tuo nesibaigia, tačiau to visiškai pakanka, kad būtų sukurtos prisitaikančios lentelės. Kitą kartą panagrinėsime kitas galimybes.

Windows: „Internet Explorer 10.0+“, „Firefox 1.5+“, „Google Chrome“, „Opera 9.5+“, „Safari 3.1+“, „SeaMonkey 1.0+“ [1].

Linux: Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].

Jei HTML lentelėje yra per daug duomenų, ji tampa platesnė nei laisva vieta puslapyje ir pradeda perpildyti. Norėdami ištaisyti situaciją, prie lentelės galite pridėti horizontalų slinkimą. Pavyzdys:

HTML/XHTML. Kodas:

1

2

3

4

5

6

7

8

9

10

Lentelė_duomenys_1

Lentelė_duomenys_2

Lentelė_duomenys_3

Lentelė_duomenys_4

Lentelė_duomenys_5

Lentelė_duomenys_6

Lentelė_duomenys_7

Lentelė_duomenys_8

Lentelė_duomenys_9

Lentelė_duomenys_10

lentelė (ekranas: blokas; perpildymas-x: automatinis;)

/* Papildomas CSS, kad pavyzdys atrodytų: */

lentelė (riba-griūti: griūti;)

lentelė td, th (papildymas: 10 piks.; kraštinė: 1 piks. # 000 vientisa;)

Pastaba: CSS display: block ypatybė leidžia lentelė užimti tik tiek pločio, kiek reikia duomenims be vaizdo iškraipymo. Ne daugiau, neištempiant per visą laisvos puslapio vietos plotį. Net jei plotis: 100% pridedamas prie CSS kodo. Pavyzdys:

Aliosque subditos ir tema

Yra daug internetinių paslaugų, skirtų kurti sitemap.xml. Tačiau tai galite padaryti patys savo kompiuteryje naudodami lynx naršyklę ir keletą Linux komandų eilutės paslaugų. Toliau pateikiamas juos naudojančio bash scenarijaus, vadinamo „sitemap.sh“, pavyzdys. Bash scenarijus, sukuriantis sitemap.xml failą: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e "s/\\.//g" | rūšiuoti | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/ \&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i " s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/