Extreme Makeover jPaginator CSS3 Edition

div "paginare" este ceea ce vom viza, aici se va adăuga jPaginatorul nostru. Elementul div înainte de "paginare" nu este esențial, dar o vom folosi pentru a ilustra paginarea făcând ceva, schimbând conținutul în el de fiecare dată când este apăsat un buton.

De remarcat, de asemenea, sunt butoanele de control, două link-uri de pe ambele părți ale "paginator_p_wrap" pe care le vom folosi pentru a controla paginarea noastră. Acestea sunt în întregime opționale - le vom aloca un rol în parametrii când sunăm jPaginator. În final, vom include marcajul pentru cursor.

Tot lotul este apoi înfășurat într-un container "div" doar pentru a ne ajuta să afișăm lucrurile minunat.

Acum trebuie să sunăm jPaginator în cadrul :

Aici puteți vedea că jPaginator este aplicat divinării noastre "paginare", reglată cu doar câțiva din mulții parametri disponibili pentru noi. Am stabilit numărul de pagini la 64, marginea din jurul fiecărui link la 5px și lungimea (cu toate că multe linkuri vor fi vizibile) până la 8. Continuând, vom enumera cele 4 elemente de control pe care le-am adăugat la marcajul nostru - De fapt, fac ceva. În cele din urmă, o funcție (oferită de Remy) de a schimba conținutul paginii noastre de div când ajungem la clic.

După ce ați finalizat pașii până acum, ar trebui să aveți întregul lucru în forma cea mai de bază.

Pasul 4: Să înceapă jocurile

Pentru a construi cu exactitate elementele noastre, trebuie să ne asigurăm mai întâi că tot ce este mare este. Să aruncăm o privire asupra diferitelor dimensiuni ale designului nostru:

Pentru a rezuma, avem butoanele de paginare (ele nu sunt elemente de buton, dar le vom face referire la ele ca butoane din acest punct), care sunt de 30x30 px, containerul (inclusiv culorile și umbrele) care are o înălțime de 110 pixeli și naveta link-uri care au o lățime de 40px.

Acoperit, hai să mergem la niște dulciuri?

Pasul 5: foaia de stil

Butoanele pentru paginarea noastră sunt create dinamic, deci dacă ați șters exemplul comentat, va trebui să utilizați Firebug sau alt inspector de browser pentru a vedea cum sunt puse împreună lucrurile.

După ce am constatat că butoanele noastre sunt de fapt divs cu o clasă de "paginator_p", știm cel puțin ce vom face stilul. Putem vedea, de asemenea, că multe elemente stiluri inline sunt adăugate la aceste elemente de către jPaginator, deși toate determină aspectul spre deosebire de estetica.

Să adăugăm niște reguli în foaia de stil, pentru ca mingea să se rostogolească?

corp fundal: url (img / bg.png) # 242424;  #container padding: 20px; lățime: 480px; marja: 100px auto 0 auto; font-family: Arial, sans-serif;  .paginator_p height: 30px; lățime: 30px; linia-înălțime: 30px; text-align: centru; font-size: 13px; font-weight: bold; culoare: # 26430c; 

Un început solid. Înainte de a începe să ne amestecăm cu butoanele, am stabilit o imagine de fundal pentru corp și adăugăm un stil la "containerul" div. Am specificat că butoanele noastre trebuie să fie de 30x30 pixeli, am stabilit că înălțimea liniilor din ele se potrivesc (care vor poziționa numerele noastre mai mult sau mai puțin centrat pe verticală) și am aplicat un centru de text-align: pentru a face față alinierea orizontală a numerelor. Deci, avem butoane frumoase pătrate, cu numere perfect centrate. Apoi, îngrășăm textul și îl colorăm în funcție de designul nostru.

Pasul 6: Destul de culoare

Trecem mai departe, să aplicăm fundalul corect butoanelor noastre. Vom folosi gradientele CSS3, pe care le vom urmări toate browserele moderne - chiar IE10. Pentru a proteja, vom avea o culoare solidă și o schimbare de imagine gradient pentru browserele necooperante. De asemenea, adăugăm o umbră subtilă la textul din butonul nostru, așa cum este dictat de designul nostru.

 / * 1px decalaj dreapta și jos, fără estompare și offwhite * / text-shadow: 1px 1px 0px # 5a8332; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / culoarea de fundal: # 4A821B; imagine-imagine: url (img / sprite.png) no-repeat 0 0; / * imagine de rezervă pentru niciun browser de sprijin * / background-image: -webkit-gradient (liniare, partea stângă sus, partea stângă jos, de la (# 4a821b), la (# 243f0d)); / * Saf4 +, Chrome * / fundal-imagine: -webkit-gradient linear (top, # 4a821b, # 243f0d); / * Chrome 10+, Saf5.1 + * / fundal-imagine: -moz-linear-gradient (top, # 4a821b, # 243f0d); / * FF3.6 * / imagine-fundal: -ms-gradient linear (top, # 4a821b, # 243f0d); / * IE10 * / fundal-imagine: -o-gradient linear (top, # 4a821b, # 243f0d); / * Opera 11.10+ * / fundal-imagine: gradient liniar (top, # 4a821b, # 243f0d);

Notă: dacă aveți 5 minute, verificați CSS3 lui Paul Irish, vă rog! pentru mai multe informații despre browserele CSS3 și de sprijin.

Pasul 7: Cercul vieții

Am specificat deja că link-urile noastre au fost pătrate de 30px, adăugând astfel colțuri rotunjite de 15px care ne vor oferi cercuri perfecte. Atunci pleci?

 / * raza de graniță jumătate din lățimea și înălțimea legăturilor noastre pentru a crea un cerc * / -moz-border-radius: 15px; / * FF1-3.6 * / -webkit-border-radius: 15px; / * Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

Pasul 8: Pop!

Suntem doar câteva detalii mici, departe de a avea butoane ca cele din .psd. Să adăugăm o umbră cutie pentru a face elementul nostru pop. De fapt, să adăugăm două.

Vom da fiecare legătură într-o umbra întunecată, acționând ca o strălucire întunecată în jurul cercului. Vor fi distribuite 1px din cerc, apoi se vor bloca încă 4px. Am specificat exact culoarea (datorită instrumentului dropper din Photoshop) dar am putea folosi și o valoare rgb cu opacitate aici.

Aplicând prima umbră a cutiei, putem aplica acum o secundă (trebuie să ne uităm la umbrele din cutie) pentru a acționa ca un punct de atracție. Veți vedea al doilea set de valori precedat de "inset" care forțează strălucirea spre interior. Fără estompare, fără decalajul axei x, dar deplasat cu 1px în jos, astfel încât strălucirea să scadă în partea de sus a cercurilor noastre.

 / * umbra cutie - nu este decalata, dar o estompare de 4 pixeli si o raspandire de 1px * / / * plus o boxa suplimentara pentru a crea stralucirea * / -moz-box-shadow: 0 0 4px 1px # 191919, inset 0 1px 0 # 7ead42; / * FF3.5 + * / -webkit-box-shadow: 0 0 4px 1px # 191919, inset 0 1px 0 # 7ead42; / * Saf3.0 +, Chrome * / box-shadow: 0 0 4px 1px # 191919, inset 0 1px 0 # 7ead42; / * Opera 10.5, IE9, Chrome 10+ * /

Iată ce arată css-ul rezultat pentru "paginator_p" div:

.paginator_p height: 30px; lățime: 30px; linia-înălțime: 30px; text-align: centru; font-size: 13px; font-weight: bold; culoare: # 26430c; / * 1px decalaj dreapta și jos, fără estompare și offwhite * / text-shadow: 1px 1px 0px # 5a8332; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / culoarea de fundal: # 4A821B; imagine-imagine: url (img / sprite.png) no-repeat 0 0; / * imagine de rezervă pentru niciun browser de sprijin * / background-image: -webkit-gradient (liniare, partea stângă sus, partea stângă jos, de la (# 4a821b), la (# 243f0d)); / * Saf4 +, Chrome * / fundal-imagine: -webkit-gradient linear (top, # 4a821b, # 243f0d); / * Chrome 10+, Saf5.1 + * / fundal-imagine: -moz-linear-gradient (top, # 4a821b, # 243f0d); / * FF3.6 * / imagine-fundal: -ms-gradient linear (top, # 4a821b, # 243f0d); / * IE10 * / fundal-imagine: -o-gradient linear (top, # 4a821b, # 243f0d); / * Opera 11.10+ * / fundal-imagine: gradient liniar (top, # 4a821b, # 243f0d); / * raza de graniță jumătate din lățimea și înălțimea legăturilor noastre pentru a crea un cerc * / -moz-border-radius: 15px; / * FF1-3.6 * / -webkit-border-radius: 15px; / * Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ /*box shadow - no offset, but a blur of 4px and spread of 1px*/ /*plus an additional box-shadow to create the glow*/ -moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* FF3.5+ */ -webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Saf3.0+, Chrome */ box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Opera 10.5, IE9, Chrome 10+ */ 

Pasul 9: Milestone # 1

Chiar atunci, avem legăturile noastre în starea lor implicită - arată bine! Acum trebuie să adăugăm un pic de spațiu de respirație elementelor din jurul legăturilor:

/ * container pentru butoane - adăugați niște umpluturi astfel încât să putem vedea umbra picăturilor * / .paginator_p_bloc padding: 5px 0; 

Paginatorul "paginator_p_bloc" este părintele tuturor butoanelor noastre și are nevoie de un pic de umplutură (de sus și de jos) pentru a permite umplerea umbră pe care am aplicat-o în jurul lor. Ceea ce aveți acum ar trebui să pară prima noastră piatră de hotar.

Pasul 10: Starea de hover

Să aplicăm pe butoanele noastre o stare de hover frumos, așa cum ne-am prezentat în .psd.

.paginator_p: hover culoare: # 0d1804; / * 1px decalaj dreapta și jos, fără estompare și verde deschis * / text-shadow: 1px 1px 0px # 8dc953; fundal-culoare: # 87D445; imagini de fundal: url (img / sprite.png) no-repeat -120px 0; / * imagine de rezervă pentru nici un browser de sprijin * / background-image: -webkit-gradient (liniare, partea stângă sus, partea stângă jos, de la (# 87d445), la (# 589225)); / * Saf4 +, Chrome * / fundal-imagine: -webkit-gradient linear (top, # 87d445, # 589225); / * Chrome 10+, Saf5.1 + * / fundal-imagine: -moz-linear-gradient (top, # 87d445, # 589225); / * FF3.6 * / fundal-imagine: -ms-linear-gradient (top, # 87d445, # 589225); / * IE10 * / fundal-imagine: -o-linear-gradient (top, # 87d445, # 589225); / * Opera 11.10+ * / fundal-imagine: gradient liniar (top, # 87d445, # 589225); / * umbra cutie - nu este decalata, dar o estompare de 2px si o raspandire de 1px * / / * plus o cutie suplimentara-umbra pentru a crea stralucirea - usor mai puternica decat starea normala * / -moz-box-shadow: 0 0 4px 1px # 191919, inset 0 1px 0 # cff3a2; / * FF3.5 + * / -webkit-box-shadow: 0 0 4px 1px # 191919, inset 0 1px 0 # cff3a2; / * Saf3.0 +, Chrome * / box-shadow: 0 0 4px 1px # 191919, inset 0 1px 0 # cff3a2; / * Opera 10.5, IE9, Chrome 10+ * /

Deci, ce am făcut aici? Ei bine, am întunecat culoarea numerelor și le-am dat o umbră palidă. Am modificat valorile gradientului de fundal (pentru a face mai strălucitoare lucrurile) și am modificat subtil pictograma de culori în partea de sus a link-urilor. Umbra întunecată a strălucirii rămâne aceeași, dar trebuie să o declarăm din nou dacă nu trebuie ignorată.

Pasul 11: Statul selectat (Milestone # 2)

Am fost amabili cu o clasă selectată, așa că haideți să o facem ca și cum butonul a fost deprimat (prin care vreau să spun că a fost împins spre interior, nu stă în baie care se balansează înainte și înapoi, plângând într-o oală cu unt de arahide ).

/ * pentru selectat, plus mouse-ul în timp ce este selectat. Acest lucru poate apărea înainte sau după starea generală de hover din cauza specificității de expansiune * / .paginator_p.selected, .paginator_p.selected: hover color: # 0d1804; / * 1px decalaj dreapta și jos, fără estompare și verde deschis * / text-shadow: 1px 1px 0px # 8dc953; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / culoarea de fundal: # 589225; imagine-imagine: url (img / sprite.png) no-repeat -80px 0; / * imagine de rezervă pentru niciun browser de sprijin * / background-image: -webkit-gradient (liniare, partea stângă sus, partea stângă jos, de la (# 589225), la (# 87D445)); / * Saf4 +, Chrome * / fundal-imagine: -webkit-gradient linear (top, # 589225, # 87D445); / * Chrome 10+, Saf5.1 + * / fundal-imagine: -moz-linear-gradient (top, # 589225, # 87D445); / * FF3.6 * / fundal-imagine: -ms-gradient linear (top, # 589225, # 87D445); / * IE10 * / fundal-imagine: -o-gradient linear (top, # 589225, # 87D445); / * Opera 11.10+ * / fundal-imagine: gradient linear (top, # 589225, # 87D445); / * umbra cutie - nu este compensata, dar o estompare de 2 pixeli si o raspandire de 1px * / / * plus o boxa suplimentara pentru a crea stralucirea - usor mai puternica decat starea normala * / -moz-box-shadow: 0 0 2px 1px # 191919, inset 0 1px 0 # cff3a2; / * FF3.5 + * / -webkit-box-shadow: 0 0 2px 1px # 191919, inset 0 1px 0 # cff3a2; / * Saf3.0 +, Chrome * / box-shadow: 0 0 2px 1px # 191919, inset 0 1px 0 # cff3a2; / * Opera 10.5, IE9, Chrome 10+ * /

Am inclus a selectate: hover astfel încât butonul să nu se schimbe atunci când se deplasează. Și ce altceva am făcut aici? Am schimbat din nou culoarea și umbra textului, am inversat gradientul, pentru a da o senzație concavă și a redus strălucirea întunecată (sugerând că nu mai lipsește atât de mult). Simplu. Ceea ce aveți acum ar trebui să pară a doua noastră piatră de hotar

Pasul 12: Sliderul

După ce ați sortat butoanele, să ne îndreptăm atenția asupra cursorului. Este relativ direct înainte; trebuie să modificăm marginile pentru a avea distanța corectă, pentru a da un fundal și a le face să crească înălțimea corectă. Trebuie să fie de 10px înălțime, în funcție de designul nostru, așa că îi vom da o înălțime de 8px plus o margine de 1px în jurul valorii de a elimina. Dăm marginile de sus și de stânga o culoare închisă, apoi partea de jos și cea din dreapta marchează o culoare palidă pentru a da o impresie de ușurare.

În cele din urmă, în jurul colțurilor de pe fiecare capăt - acum avem o șină frumoasă.

/ * bara de culisare * / .paginator_slider / * marginea din stânga îl împinge deasupra butoanelor nav, deci face distanța lățimea totală, inclusiv marginile butoanelor nav * / margin: 20px 0 20px 80px; / * cu înălțimea de 8 pixeli, plus marginea de 1px pe tot parcursul sumelor noastre maxime 10px * / height: 8px; fundal: # 181818; frontieră: 1px solid # 393939; border-top-color: # 0f0f0f; border-left-color: # 0f0f0f; / * raza de graniță pentru ff, safari + crom, css3 * / / * jumătate din înălțimea totală a elementului nostru pentru a crea capete rotunjite * / -moz-border-radius: 5px; / * FF1-3.6 * / -webkit-raza de graniță: 5px; / * Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ 

Pasul 13: Butonul

Da, butonul. Părea ca un nume bun în acel moment, dar presupun că aș fi putut să rămân cu mânerul. Oricum, să adăugăm un anumit stil acelui lucru pe care faceți clic și trageți de-a lungul șinei?

/ * cursorul, er, butonul? * / .paginator_slider .ui-slider-handle height: 20px; lățime: 20px; margin-stânga: -10px; / * impinge butonul din stânga, jumătate din lățimea lui * / / * elimina conturul în ff * / schiță: nici unul; / * raza de graniță pentru ff, safari + crom, css3 * / / * jumătate din lățimea și înălțimea butonului pentru a crea un cerc * / -moz-border-radius: 10px; / * FF1-3.6 * / -webkit-border-radius: 10px; / * Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ /*alter the positioning to bring it centred to rail*/ top: -7px; /*same styling as links*/ background-color: #4A821B; background-image: url(img/sprite.png) no-repeat 0 0; /*image fallback for none supporting browsers*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#4a821b), to(#243f0d)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #4a821b, #243f0d); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #4a821b, #243f0d); /* FF3.6 */ background-image: -ms-linear-gradient(top, #4a821b, #243f0d); /* IE10 */ background-image: -o-linear-gradient(top, #4a821b, #243f0d); /* Opera 11.10+ */ background-image: linear-gradient(top, #4a821b, #243f0d); /*box shadow - no offset, but a blur of 4px and spread of 1px*/ /*plus an additional box-shadow to create the glow*/ -moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* FF3.5+ */ -webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Saf3.0+, Chrome */ box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Opera 10.5, IE9, Chrome 10+ */ 

Majoritatea acestui stil va arăta familiar, deoarece se bazează pe starea implicită a butoanelor noastre; lățimea și înălțimea prestabilite, fundalul de gradient, colțurile rotunjite și diferitele umbre ale cutiei.

Singurele reguli demne de remarcat sunt schiță: nici unul care va elimina conturul punctat din Firefox, poziționarea axei y pentru a modifica locul în care butonul este așezat vertical pe șină, iar margin-stânga: -10px; care împingă butonul la stânga exact la jumătate din lățimea sa. Consultați imaginea de mai jos pentru a afla de ce:

Facem progrese, verificăm cea de-a treia etapă.

Pasul 14: Controale

Continuând, să ordonăm comenzile de pe ambele părți ale containerului de paginare.

Din motive de simplitate, vom folosi imagini, așa că săriți înapoi în Photoshop pregătiți-vă o foaie de sprite pentru pictogramele link-ului. Am început deja să compilesc o foaie de sprite cu gradientele de rezervă, așa că voi adăuga doar la asta, plasând totul logic pentru a face referire în CSS. Dacă alegeți să aruncați totul aleatoriu în fișa dvs. de sprite, puteți oricând să vă localizați imaginile grație unor servicii cum ar fi Sprite Cow.

Fiecare stare a icoanelor este de 40x40 pixeli și ne vom opune situației de hover vertical. După cum puteți vedea din stilul de mai jos, fiecare buton este un bloc de 40x40 pixeli și are aplicată imaginea potrivită, în funcție de poziția și starea sa. CSS este comentat, așa că voi tace acum.

/ * să ne ocupăm de butoanele de comandă * / / * stiluri generale pentru comenzi * / .control float: left; lățime: 40px; înălțime: 40px; marja: 35px 0 0 0; poziție: relativă; / * veți vedea de ce într-un bit * / cursor: pointer;  #max_backward fundal: url (img / sprite.png) nr-repeta 0 -60px;  #over_backward fundal: url (img / sprite.png) no-repeat -40px -60px;  #over_forward fundal: url (img / sprite.png) no-repeat -80px -60px;  #max_forward fundal: url (img / sprite.png) no-repeat -120px -60px;  / * bate * / #max_backward: hover fundal: url (img / sprite.png) no-repeat 0 -100px;  #over_backward: treceți cu background: url (img / sprite.png) no-repeat -40px -100px;  #over_forward: hover fundal: url (img / sprite.png) no-repeat -80px -100px;  #max_forward: hover fundal: url (img / sprite.png) no-repeat -120px -100px; 

Foarte bine, aruncăm o privire la ceea ce sa făcut până acum în piatra de hotar # 4.

Pasul 15: Sentimentul de scufundare

Există într-adevăr doar câteva detalii suplimentare de care trebuie să avem grijă. Butoanele noastre sunt prea înalte și dispăreau în neant în momentul în care au atins marginea containerului părinte, ceea ce este puțin neclar. Designul nostru are grijă de acest lucru sugerând că ele se află sub un slot în fundal, deci să vedem dacă putem traduce acest lucru în browser.

Uitați-vă la imaginea de mai jos. În ea, veți vedea că avem nevoie de patru imagini pentru a face față fiecăruia dintre cele mai importante și umbre. Cele mai importante aparțin în afară de comenzile de pe ambele părți ale containerului, umbrele aparțin în containerul propriu-zis, așa că trebuie să-l facem de 110px înălțime.

Mai întâi să avem grijă de (creșterea) plăcuței de pe elementul nostru de container:

.paginator_p_wrap margine: 0; padding: 35px 0; 

După ce a făcut acest lucru, paginarea noastră a fost împinsă în poziția sa legală.

Pasul 16: Nip și Tuck

Bine, haideți să umblăm în aceste umbre (le-am adăugat din nou în foaia de sprite):

.paginator_p_wrap margine: 0; padding: 35px 0; / * mai multe imagini de fundal, unul pentru stânga, unul pentru dreapta * / fundal: url (img / shadow_sprite.png) left -220px no-repeat, url (img / shadow_sprite.png)

? și acum, hai să facem față cu cele mai importante utilizări :după selector (acceptat în toate browserele majore)

/ * highlights * / #over_backward: după content: "; background: url (img / sprite.png) -40px -140px no-repeat; afișare: bloc; înălțime: 110px; lățime: 30px; la flotoare și margini moștenite incomode din .control * / position: absolute; right: 0px; top: -35px; #over_forward: după content: "; fundal: url (img / sprite.png) -80px -140px no-repeat; afișare: bloc; înălțime: 110px; lățime: 30px; / * Poziționați evidenția datorită unor flotoare și margini incomplete moștenite de la .control * / position: absolute; stânga: 0px; top: -35px; 

După ce selectorul generează efectiv un obiect în pagina noastră. Putem apoi manipula acel element ca orice altul, având în vedere faptul că el moștenește proprietăți de la părintele său. În cazul nostru, datorită stilului extins al obiectului părinte, am optat pentru poziționarea absolută, permițându-ne să identificăm unde apare evidențiarea.

Unele stiluri suplimentare pentru a ordona conținutul paginii, atunci am terminat.

Excelent! Am ajuns la piatra de hotar # 5, linia de finisaj, dacă nu doriți să răspundeți la browserele mai vechi.

Pasul 17: Compatibilitate înapoi

O să-ți las asta. Tehnicile pe care le-am practicat erau exact așa; tehnici de practicare și am enumerat compatibilitatea browserului în introducere. Cu toate acestea, dacă doriți să mergeți mai departe și să vă asigurați că totul este bilet de avion în browserele mai vechi, aveți câteva opțiuni deschise pentru dvs. Ne-am asigurat că gradientele noastre au fost acoperite prin includerea imaginilor de rezervă în foaia de sprite. Cu toate acestea, stabilirea mai multor imagini de fundal, umbre în cutie, umbre de text și rază de margine nu este la fel de simplă.

Angajarea CSS3PIE vă va ajuta cu majoritatea acestor lucruri (toate în afară de text-shadow) sau puteți adăuga butoanele în foaia de spirite (de fapt, le-am făcut deja pentru dvs.) și le aplicați utilizând o foaie de stil specifică browserului . Ținta IE8 și mai mică folosind o declarație condiționată, cum ar fi cea de mai jos și browserele moderne, nu va fi mai înțeleaptă.

Concluzie

Mulțumesc că ați urmărit, sper că veți reuși să trageți câteva idei utile din ceea ce ați citit. De asemenea, o mare mulțumire pentru Remy pentru jPaginator de voluntariat ca un cobai - nu uitați să verificați dezvoltarea sa la GitHub!