Vizatimi i zebrës - ose ngjyrosja ose hijezimi i rreshtave alternative në një tabelë - mendohet se përmirëson përdorshmërinë e një tabele duke e drejtuar syrin e përdoruesit përgjatë një rreshti. Kjo metodë është përdorur në shtyp për vite, dhe shumë stilistë përpiqen të imitojnë këtë teknikë kur bëjnë tabela për ueb. CSS e ka bërë më të lehtë arritjen e shiritave të zebrave, por, deri në CSS3, ai ende përfshin një kodim të rëndë.
Me ardhjen e përzgjedhësit të fëmijës së nëntë të CSS3, ne jemi në gjendje të synojmë elementë të shumtë në një dokument duke krijuar një "counter" që kalon mbi fëmijët e specifikuar në pemën e dokumentit. Kjo na lejon, konkretisht, të stilojmë vetëm rreshtat tek apo çift të një tabele. Ky artikull detajon se si të përdoret me sukses nth-child.
Ditët e këqija të vjetra...Përpara se të fillojmë të mbulojmë mënyrën e përdorimit të këtij përzgjedhësi të ri, le të rishikojmë mënyrën e vjetër të të bërit të gjërave. Së pari, ne do të duhet të shtojmë një atribut të klasës në çdo rresht tjetër të tabelës:
| Salmon | Omega-3 ndihmojnë trurin të zhvillohet siç duhet, zvogëlojnë rrezikun e Alzheimerit dhe ndihmojnë në parandalimin e sëmundjeve të zemrës. |
| Spinaqi | Burim i madh i folatit dhe luteinës. Parandalon defektet e lindjes, sëmundjet e zemrës, goditjet në tru dhe mbron lëkurën tuaj nga dëmtimi i diellit. |
| Patate e ëmbël | Beta karoteni mbron lëkurën tuaj nga dëmtimi i diellit. |
Për fat të mirë, tavolina jonë është mjaft e vogël, kështu që kjo nuk kërkon shumë punë. Por mund ta imagjinoni se sa i lodhshëm do të ishte ky proces nëse tabela jonë do të ishte e gjatë me dhjetëra rreshta! Më pas do të shtonim një rregull CSS që synonte ato rreshta:
Tr.odd (ngjyra e sfondit: #99ff99; )
Ndërsa kjo metodë funksionon, është pak joefikase në atë që kërkon shënim shtesë në dokumentin HTML. Ky shënim, nga ana tjetër, nuk shton asgjë me vlerë semantike: Rreshtat tek nuk shërbejnë një funksion të ndryshëm nga rreshtat çift; ne vetëm duam që ata të duken ndryshe. Prandaj, ne nuk e kemi mbajtur strukturën të ndarë nga prezantimi. Për të mos përmendur që kodimi i një tabele të madhe në këtë mënyrë mund të jetë një detyrë frustruese.
Prezantimi i fëmijës së radhësCSS3, megjithatë, përfshin përzgjedhës që na lejojnë t'i mbajmë duart jashtë shënimit dhe të përdorim vetëm CSS për të zgjedhur rreshtat që duam të stilojmë. Përzgjedhësi përkatës - përzgjedhësi i fëmijës së nëntë - është pak i komplikuar, kështu që le të marrim një moment për të kuptuar se si funksionon.
Përzgjedhësi i fëmijës së nëntë synon elementë në një pemë dokumenti që kanë një numër të caktuar vëllezërish e motrash përpara atë. Ku n është një numër i plotë, :nth-child(an+b) do të përputhet me elementin që ka një +b-1 vëllezër e motra përpara tij.
Çfarë do të thotë kjo?
Ky n është në thelb një numërues: fillon me zero, pastaj lëviz lart deri sa t'i mbarojnë elementet e fëmijëve. Pastaj ndryshorja b përfaqëson vendin e fillimit të numëruesit - me fjalë të tjera, pozicionin e elementit të parë nga i cili fillojmë të numërojmë. Së fundi, ndryshorja përfaqëson pozicionet e elementeve që përputhen pas kësaj.
Për t'i sqaruar pak gjërat, le të zbërthejmë një shembull:
:fëmija n-të (5 n+2 )
Në shembullin tonë hipotetik të mësipërm, ndryshorja b vendoset si dy, që do të thotë se elementi i parë i synuar është e dyta fëmija nën prindin në pemën e dokumentit, paragrafin e dytë brenda trupit ose artikullin e dytë brenda një liste.
Gjithashtu në shembullin e mësipërm, ndryshorja a është caktuar në pesë, që do të thotë se çdo i pesti fëmijë pas kësaj duhet gjithashtu të synohet. Tani që kemi përcaktuar si variablat a ashtu edhe b, mund të përcaktojmë se cilët elementë fëmijë do të stilohen. Duke futur në prizë vlerën fillestare të zero dhe duke numëruar derisa të na mbarojnë elementët fëmijë, mund të përcaktojmë se cilët elementë fëmijë do të stilohen.
Në këtë shembull, siç tregohet në Tabelën 1, mund të shihni se elementi i dytë i fëmijës përputhet, pastaj i shtati, më pas i dymbëdhjeti dhe kështu me radhë, derisa të na mbarojnë elementët.
| n/a | n/a | |
| Y | ||
| Y | Y | |
| Y | ||
| Y | ||
| Y | Y | |
| Y | ||
| Y | Y | |
| Y | ||
| Y | ||
| Y | Y | |
| Y | ||
| Y | Y |
Tabela 1. Demonstrimi se cili element fëmijë është zgjedhur
Llogaritja e vijave të zebrësSi na ndihmon ky përzgjedhës me shiritat e zebrës? Vini re se kjo formulë lejon disa konfigurime mjaft të ndërlikuara - duke e bërë atë shumë të gjithanshëm. Megjithatë, për të synuar vetëm elementë tek ose çift, ne duhet të kujtojmë vetëm dy lloje përzgjedhësish.
Për të synuar të gjitha rreshtat çift siç tregohet në tabelën 2, mund të përdorim përzgjedhësin e mëposhtëm:
Tr: fëmija i nëntë (2n)
| n/a | n/a |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
Tabela 2. Duke demonstruar se janë zgjedhur vetëm rreshtat me numër çift
Për të synuar të gjitha rreshtat tek, ne do të krijonim përzgjedhësin e mëposhtëm:
Tr:fëmija e nëntë (2n+1)
Ky përzgjedhës përputhet me rreshtin e parë brenda një tabele, dhe çdo rresht të dytë pas kësaj - të gjitha rreshtat tek, siç tregohet në Tabelën 3.
| n/a | n/a | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y |
Tabela 3. Duke demonstruar se janë zgjedhur vetëm rreshtat me numër tek
Ilustrimi i vijave të zebrësFigura 1 tregon një tabelë që liston "superushqime" të ndryshme dhe virtytet e tyre ushqyese si një demonstrim i shiritit të zebrës.
Figura 1: The Tabela HTML
Në këtë demonstrim, ne duam të ngjyrosim sfondin e rreshtave tek në mënyrë që tabela të lexohet më lehtë. Blloku i deklarimit shkruhet si i tillë:
Tr:fëmija e nëntë(2n+1) (ngjyra e sfondit: #99ff99; )
Ky rregull përputhet me të gjitha rreshtat tek dhe aplikon ngjyrën e sfondit vetëm në atë rresht siç tregohet në Figurën 2.
Figura 2: Vetëm rreshtat me numër çift janë stiluar
Nëse këto formula janë shumë të komplikuara për t'u mbajtur mend, vetia nth-child i lejon ata që sfidohen nga matematika të përdorin shkurtore të fjalëve kyçe. Në vend të një formule matematikore, ne gjithashtu mund të përdorim fjalët kyçe "tek" ose "çift" si vlerë:
Tr:nth-child(tek) (ngjyra e sfondit: #99ff99; )
CSS3 na ofron një teknikë pa telashe për zbërthimin e tabelave tona, listën e artikujve ose formularëve, e kështu me radhë.
Fatkeqësisht, përzgjedhësi i fëmijës së nëntë gëzon mbështetje të kufizuar të shfletuesit. Deri në momentin e shkrimit, përzgjedhësi i fëmijës së nëntë punon në Safari 3 dhe Opera 9.5. Fatkeqësisht, ju mund të dëshironi t'i përmbaheni metodës më joefikase të kodimit CSS derisa mbështetja për pronën të rritet me shpejtësi në shfletues të tjerë. Ose, nëse dëshironi të mbështesni shfletues të tjerë si p.sh Internet Explorer me metodën e thjeshtë të shiritit të zebrës, mund të "patch" mbështetjen e fëmijës së nëntë në ata shfletues. Duke përdorur një kornizë JavaScript si jQuery, ju mund të dorëzoni një zgjidhje të aktivizuar me JavaScript vetëm në IE ndërsa shfletuesit e tjerë përdorin rregullat CSS për të stiluar faqen.
Shembull i drejtpërdrejtë i tryezës së SuperushqimeveNëse keni një shfletues që mbështet fëmijën e n-të, kjo tabelë e lidhur HTML do të duket se është me shirita zebër. CSS është futur në kokë në këtë faqe në mënyrë që të mund ta shikoni burimin me lehtësi shikoni cfare po ndodh.
Ndodh që një pjesë e përmbajtjes në faqen tonë të internetit duhet të formatohet në formën e një tabele që do të përmbajë informacione të caktuara. Cila është mënyra më e mirë për të stiluar këtë tryezë atëherë? Unë mendoj se ju keni hasur mjaft shpesh tavolina në formë zebra. Këto janë ato tabela në të cilat rreshtat janë ngjyrosur me një ngjyrë të caktuar. Avantazhi i tabelave të tilla është lexueshmëria e tyre. Sot do t'ju tregoj se sa thjesht mund të stiloni një tabelë në këtë mënyrë duke përdorur pseudo-klasa.
1. Para së gjithash, ne duhet të krijojmë një skedar html dhe në të vetë tabelën që do të stilojmë. Le ta bejme kete.
Unë do të krijoj një dokument html5 dhe do të lidh menjëherë me të fletën e stilit që do të krijojmë hapi tjeter dhe krijoni një tabelë në trupin e dokumentit.
Dokument pa titull
Kështu do të duket tavolina jonë tani nëse hapemi skedar html në shfletuesin:
2. Tani është koha për të krijuar një skedar stili "style.css" dhe për të filluar stilimin e tabelës sonë.
Krijo këtë skedar dhe ruaje në të njëjtën direktori si skedari html. Nëse ruani në një drejtori tjetër, mos harroni të korrigjoni shtegun e skedarit kur e lidhni atë në html.
Stilimi i një tavoline zebraPër stilim do të përdorim pseudo-klasën ":nth-child".
Mënyra më e thjeshtë për të stiluar rreshtat çift dhe tek në një tabelë është përdorimi fjalë kyçe"tek" (elemente tek nga grupi) dhe "çift" (elemente çift nga grupi).
Kjo bëhet shumë thjesht. Në skedarin tuaj të fletës së stilit, shkruani sa vijon:
tr:n-të-fëmija(tek) (ngjyra e sfondit:#CCC;) tr:fëmija e nëntë(çift) (ngjyra e sfondit:#FFC;)
Ju mund të zgjidhni çdo ngjyrë të sfondit. Përveç ngjyrë e sfondit Mund të vendosni rregulla të tjera, si trashësia e shkronjave, lloji i shkronjave, etj.
Si rezultat, nëse rifreskoni faqen në shfletuesin tuaj, do të shihni sa vijon:
Siç mund ta shihni, të gjitha rreshtat teke janë të ngjyrosura ngjyrë gri, dhe të gjitha çiftet janë të verdha të lehta.
3. Por kjo është vetëm një nga më mënyra të thjeshta duke përdorur pseudo-klasën ":nth-child".
Në fakt, me ndihmën e tij ne mund të zgjedhim elementë të një grupi në mënyra të ndryshme.
Po sikur, për shembull, dua, ndër të tjera, të lyej të gjitha rreshtat e qelizave të para dhe të fundit në një ngjyrë të caktuar, por në të njëjtën kohë dy qelizat e mia në mes të mbeten në formën e një "zebra" .
Kjo është gjithashtu mjaft e thjeshtë për t'u bërë.
Para së gjithash, më duhet të zgjedh një element qelizë, pastaj të aplikoj një pseudo-klasë në të me parametrat përkatës në kllapa.
Si kjo:
tr td:fëmija n-të(3n+1)(ngjyra e sfondit:#069;)
Le të shpjegojmë këtë kod.
"3n" do të thotë se ne zgjedhim çdo rresht të tretë. Dhe "+1" do të thotë që përzgjedhja do të fillojë nga rreshti i parë. Në këtë mënyrë do të zgjidhet rreshti i parë dhe i treti pas tij.
Në rastin tonë, ne kemi vetëm 4 rreshta në tabelë, pra në Ngjyra blu do të ngjyroset vetëm e para dhe rreshtat e fundit.
Nëse tabela jonë do të kishte më shumë rreshta, atëherë rreshti i parë dhe më pas çdo rresht i tretë do të përfshihej në mostër.
Nëse shkruanim të njëjtin kod, por pa "+1":
tr td: nth-child(3n) (background-color:#069;)
Atëherë mostra do të ishte krejtësisht e ndryshme. Ne thjesht do të zgjidhnim çdo rresht të tretë dhe rezultati do të ishte si ky:
Mendoj se tani ky parim i kampionimit duke përdorur pseudo-klasën “:nth-child” është bërë më i qartë për ju.
Ju mund të ndryshoni parametrat në kllapa dhe kështu të zgjidhni elementet ashtu siç ju nevojiten. Duhet vetëm pak praktikë.
Sidoqoftë, kjo metodë është mjaft e përshtatshme, pasi nuk keni nevojë të caktoni klasa në secilën rresht ose kolonë në tabelë.
Pra, praktikoni dhe shijoni për shëndetin tuaj!
Kjo është e gjitha për mua sot.
Pres me padurim komentet tuaja! Mos harroni ta ndani mësimin me miqtë tuaj duke përdorur butonat e rrjeteve sociale që do të gjeni më poshtë.
Abonohuni në përditësimet e blogut dhe qëndroni të përditësuar me artikujt dhe mësimet më interesante dhe të dobishme!
Anna Kotelnikova ishte me ju.
Fat të mirë dhe shihemi përsëri!
Një tabelë zebra është një tabelë në të cilën ngjyra e sfondit të rreshtit ndryshon pas çdo rreshti. Kjo është, për shembull, bardhë-e zezë-bardhë-e zezë... Kjo është ajo që ne do të bëjmë duke përdorur vetëm CSS.
Për të krijuar një "zebër" në një tabelë, mund të përdorni JS. Por kjo metodë do të jetë mjaft e mundimshme. Ju mund të krijoni një "zebër" me dorë, domethënë, të shtoni manualisht klasa në etiketë
Kjo pseudo-klasë u krijua për të shtuar vetitë në etiketën që shkon poshtë numër specifik. Mund të specifikoni që vetitë t'u caktohen vetëm etiketave çift ose tek. Në thelb, kjo pseudo-klasë mund të përdoret pikërisht ajo që është në tabela. Rregullat e shkrimit:nth-child:
Përzgjedhësi:fëmija e nëntë(vlera) (...)
Vlerat mund të jenë:
tek – numra tek (1, 3, 5, 7...).
çift – numra çift (2, 4, 5, 6...).
numër - çdo numër nga një.
Por kjo metodë ka një disavantazh: nuk mbështetet në shfletuesit e vjetër.
Dhe, për të krijuar një stil "zebër" në tabelë, duhet të bëni sa më poshtë:
HTML| 1 | Kinë | 1 338 613,0 |
| 2 | Indi | 1 166 079,2 |
| 3 | SHBA | 307 212.1 |
| 4 | Indonezia | 240 271.5 |
| 5 | Brazili | 198 739.3 |
Me këtë kemi pyetur se çfarë nëse tag
Tabela, tr, td, th ( ngjyra:#969799; /* Ngjyra e tekstit */ font:13pt Andale mono, monospace; /* Madhësia, lloji i shkronjave */ kufiri: 1px solid #E9E9E9; /* Stroke */kufi-collapse :collapse; /* Hiq goditjen e dyfishtë midis qelizave */ ) td, th ( mbushje: 5 px; /* Mbushja e brendshme */ ) th ( pesha e shkronjave: bold; ngjyra e sfondit:#E5E5E5; /* Ngjyra e sfondit */ )
Nëse do t'i isha respektuar gjithmonë parimit të mjaftueshmërisë së arsyeshme, ju nuk do t'i lexonit këto rreshta tani. Ajo që dua të them është se, megjithëse tema e propozuar është mbuluar mjaft mirë, dhe zgjidhjet ekzistuese Unë jam plotësisht i kënaqur, por ata nuk mund të më sillnin në një gjendje paqeje të plotë... në përgjithësi, fillova të rishpik rrotën.
Do të flasim për tabela HTML "me shirita", d.m.th. rreth tabelave me rreshta të alternuar të stileve të ndryshme. Në veçanti, për të përmirësuar perceptimin e të dhënave, këto rreshta mund të jenë me shumë ngjyra. Më poshtë është një shembull i një tabele të tillë:
I vendosa vetes detyrën e mëposhtme: pa ndryshuar skedarin HTML:
| Heshtakë | 30 lloje | Skeleti i kordatës |
| Peshku kërcor | 600 lloje | Skeleti kërcor |
| Peshk kockor | 20,000 lloje | Skeleti kockor |
| amfibët | 3000 lloje | Skeleti i hapur |
| Zvarranikët | 6000 lloje | Skeleti i ngurtë |
| Zogjtë | 8000 lloje | Skeleti i ngurtë |
| Gjitarët | 4000 lloje | Skeleti i ngurtë |
Në internet, duke kërkuar për "tavolina me shirita" ose "tavolina zebra", është e lehtë të gjesh materialet e nevojshme për këtë temë. Si rregull, zgjidhjet e propozuara janë variacione të ndryshme të së njëjtës ide: duke përdorur JavaScript dhe DOM, gjejmë tabelat e kërkuara (klasa me shirita) në dokumentin HTML dhe shtojmë klasat e nevojshme (për shembull, oddrows dhe evenrows) në to. rreshtave, në varësi të faktit nëse është një rresht i barabartë apo jo. Mund të zbatohet në këtë mënyrë:
< tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) // rreshtat numërohen duke filluar nga 0 rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows"); ) )
Duke e lidhur thirrjen e këtij funksioni me ngjarjen onload të faqes, do të arrijmë rezultatin e dëshiruar.
Ndoshta sot është zgjidhje optimale, megjithatë, nuk e lë të paprekur kodin HTML. Unë isha i interesuar ta zgjidhja problemin ekskluzivisht duke përdorur CSS, ose të paktën t'i besoja CSS detyrën për të gjetur këto mjete.
Zgjidhja perfekteA është e mundur të zgjidhet problemi me CSS "të pastër"? Po, nëse shfletuesi juaj mbështet CSS3. Pasi kemi studiuar specifikimet, gjejmë atje një pseudo-klasë të re :nth-child() , padyshim e ndikuar nga tema, dhe falë së cilës stilet e nevojshme vendosen shumë thjesht:
/* rreshti tek i tabelës së klasës me shirita */.tripy tr:nth-child(2n+1)( ... ) /* rreshti çift i tabelës së klasës me shirita */.shirita tr:nth-child(2n)( ... )Mjerisht, shfletues modern shumica dërrmuese nuk e mbështesin ende këtë. Po CSS2? Fatkeqësisht, ka shumë pak mjete të përshtatshme këtu. Problemi mund të zgjidhet pjesërisht duke përdorur një përzgjedhës:
tr me shirita ( ... ) /* rreshti i parë */.shirita tr + tr ( ... ) /* rreshti i dytë */.shirita tr + tr + tr ( ... ) /* rreshti i tretë */.shirita tr + tr + tr + tr ( ... ) /* rreshti 4 */.shirita tr + tr + tr + tr + tr ( ... ) /* rreshti i 5-të */
megjithatë, kjo metodë është e përshtatshme vetëm për tabela me një numër relativisht të vogël dhe të njohur më parë rreshtash, dhe përveç kësaj, nuk mund të quhet e përshtatshme. Çfarë mbetet? E tëra që mbetet është të përdorni aftësitë shtesë të secilit shfletues individual. U përpoqa të gjeja një zgjidhje për versionet e Windows të Internet Explorer, Mozilla dhe Opera.
Internet ExplorerNuk kishte vështirësi me këtë shfletues. Duke përfituar nga aftësia e IE për të vendosur vlerat e vetive CSS në mënyrë dinamike duke përdorur shprehjen(), problemi i alternimit të vargjeve me ngjyra, për shembull, mund të zgjidhet lehtësisht në mënyrën e mëposhtme:
Stripy tr( background: shprehje(this.rowIndex % 2 == 0 ? "#ffe" : "#efe"); )
Për të përdorur këtë metodë për të përcaktuar jo vetëm një veti, por një stil të tërë për rreshtat përkatës të tabelës (shtoni klasa oddrows dhe evenrows), kodi do të duhet të jetë i ndërlikuar ose të përdorë teknologjinë DHTML Behaviors:
Stripy tr(sjellja: url(stripy.htc); ) /* varg tek *//* vijë çift */
Në shembullin e dhënë, plani zbatohet: klasat e nevojshme u shtohen linjave, varësisht nëse është një vijë e barabartë apo jo. Kjo sjellje e etiketës tr përshkruhet në skedarin stripy.htc:
stripy.htc //Teknologjitë e përdorura u prezantuan për herë të parë në versionin 5 të Internet Explorer; në përputhje me rrethanat, tabelat me klasën me shirita do të bëhen "zebra" duke filluar nga ky version.
GeckoNjë shtesë e ngjashme me Sjelljet DHTML zbatohet gjithashtu në shfletues me motorin Gecko. Zhvilluesit e uebit lejohen të përcaktojnë elementë të rinj në faqe dhe të anashkalojnë pamjen, përmbajtjen dhe sjelljen e atyre standarde. Për këtë përdoret XBL (XML Binding Language). Kjo teknologji ka aftësi më të mëdha në krahasim me zhvillimin nga Microsoft dhe dukej se nuk do të kishte vështirësi në zgjidhjen e problemit, por nuk ishte kështu.
Në CSS, lidhja XBL vendoset në mënyrë të ngjashme me sjelljen duke përdorur veçorinë -moz-binding:
tr me shirita (-moz-lidhja: url(stripy.xml); )
Gjithçka që mbeti ishte të përshkruanim sjelljen në skedarin XBL stripy.xml etiketat e nevojshme megjithatë, me gjithë përpjekjet e mia më të mira, nuk munda të "lidhja" as etiketën tr dhe as etiketat e tjera të tabelës. Shkaku i kësaj telashe doli të ishte Bugzilla Bug 83830: Lidhja e qelizave TD (me XBL) nuk funksionon fare. Pavarësisht se sa fyese ishte, dukej sikur nuk duhet të mbështeteni në XBL. Për fat të mirë u gjet një zgjidhje!
Ndihma erdhi nga guru i famshëm i uebit Dean Edwards, i cili krijoi një mbështjellës XBL që lejon shfletuesit Gecko të përdorin teknologjinë Microsoft DHTML Behaviors, që do të thotë se i njëjti skedar stripy.htc mund të përdoret për të zgjidhur problemin si për IE!
Për ta bërë këtë, na duhen dy skedarë XBL: moz-behaviors.xml (vetë mbështjellësi, mund ta merrni në faqen e internetit të Dean Edwards, peshon më pak se 7K) dhe bindings.xml (një skedar ndihmës, ndërmjetës "midis" CSS dhe moz -behaviors.xml, kodi më poshtë në tekst). Tani, që skedari .htc të funksionojë në Mozilla, ju nevojiten sa vijon:
.stripy tr( -moz-binding: url(bindings.xml#stripy.htc); )Në rastin e përgjithshëm, gjithçka funksionon mirë, por ju ende nuk do të jeni në gjendje të ndryshoni sjelljen e etiketës tr për shkak të gabimit të përmendur më lart, por Edwards i zgjuar arriti ta zgjidhë këtë problem. Për rastin tonë, kodi CSS duhet të plotësohet:
/* shtesa e nevojshme për lidhjen e suksesshme të etiketave të tabelës */.stripy( -moz-binding: url(bindings.xml#table); /* Sjellja HTC duke përdorur lidhjen XBL */.stripy tr( -moz-binding: url(bindings.xml#stripy.htc); ) /* varg tek */.stripy .oddrows( sfond:#ffe; ...) /* vijë çift */.stripy .evenrows( sfond:#efe; ... )Përmbajtja e skedarit bindings.xml duhet të jetë si më poshtë:
lidhjet.xmlTani gjithçka funksionon shkëlqyeshëm. Tabelat me klasën me shirita do të bëhen "zebra" në shfletuesit e bazuar në motorin Gecko, duke filluar nga versioni 1.0.
OperaFatkeqësisht, ky anëtar i familjes së eksploruesve të uebit nuk ka mekanizma zgjerimi të krahasueshëm me konkurrentët e tij. Po, miniaplikacionet u shfaqën në versionin 9, por me ndihmën e tyre është e pamundur të ndikohet në funksionimin e shfletuesit në asnjë mënyrë. Çfarë duhet bërë? Operas nuk i mbeti zgjidhje tjetër veçse të përdorte teknikën e ndaluar. Duke filluar nga versioni 7, shfletuesi (si dhe IE, duke filluar nga versioni 5) kishte një "veçori" interesante - aftësinë për të ekzekutuar skriptet direkt nga CSS. Për ta bërë këtë, përdorni çdo pronë CSS që ju lejon të specifikoni një shteg skedari si vlerë. Këtu është një shembull i një teknike të tillë:
Trupi (imazhi i sfondit: url ("javascript: alert("Përshëndetje");");
Opera e ekzekuton skriptin vetëm në elementët ekzistues HTML dhe vetëm një herë. Pse të mos përfitoni nga kjo dhe të huazoni skenarin e përmendur më lart? Unë bëra pikërisht këtë, megjithëse duhet të pranoj se kishte disa vështirësi me këtë teknikë dhe jo të gjithë skenarët ishin "të bindur":
Funksioni makeStripy(tabClass) ( var tabs = document.getElementsByTagName ("tabela"); për (var e = 0; e< tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows"); } } if (window.opera) makeStripy("stripy");
Ky skenar do të ekzekutohet me sukses në Opera dhe nëpërmjet CSS:
Stripy tr( background-image: url("javascript:function makeStripy(tabClass)(var tabs=document.getElementsByTagName("tabela");për (var e=0;e
