Share
Una dintre cele mai mari provocări pentru designerii de web este găsirea modalităților de a plasa o mulțime de informații pe o pagină fără a pierde gradul de utilizare. Conținutul cu file este o modalitate excelentă de a rezolva această problemă și a fost utilizat pe scară largă pe bloguri recent. Astăzi vom construi o casetă de informare simplă în tabelul HTML, apoi o vom face să funcționeze folosind niște simple Javascript și apoi vom obține în cele din urmă același lucru folosind biblioteca jQuery.
În primul rând, avem nevoie de ceva care arată minunat. Deci, o excursie rapidă la Photoshop și voila avem un mockup frumos despre ceea ce ar trebui să arate componenta noastră tabulară. Este destul de drept înainte, cu câteva gradienți suplimentare pentru a face nettuts minunat. Aveți posibilitatea să apucați fișierul Photoshop PSD pentru această imagine dacă doriți să aruncați o privire mai atentă, dar este destul de simplă și o putem construi din spațiul JPG plat.
Primul lucru pe care trebuie să-l faceți atunci când construiți cursul este să obțineți o idee grosolană despre cum veți proceda. Acest lucru devine mai ușor cu cât mai multe lucruri pe care le-ați dezvoltat. Privind la această imagine aș spune că cel mai bun lucru pe care trebuie să-l faceți este:
Ca să rezumăm, va fi ceva de genul:
Nu vă faceți griji dacă privirea la acea imagine nu vă face să vă gândiți imediat la acea structură. Uneori trebuie doar să faci lucruri de încercare și de eroare. În cazul meu, am făcut aceste lucruri cu câteva fileuri de câteva ori și știu că este o modalitate simplă de a le face.
De asemenea, este bine să vă gândiți la structura de genul asta, înainte de a avea o mulțime de nume de clasă și de conținut și de conținut, deoarece poate fi greu să vedeți pădurea din copaci mai târziu. Mai ales când adăugați conținut pentru toate filele diferite.
Acum că avem o imagine în mintea cum să ne construim structura, să ajungem la ea!
Acum, dacă ați urmat tutorialele mele pe PSDTUTS, veți ști că îmi place un fond de gradient bun. Așa că, înainte de a începe chiar cu structura tabelă, să ne facem un fundal frumos!
Deschideți Photoshop, creați un document 1000px x 1000px și desenați un gradient frumos (subtil) radial ca cel prezentat mai jos. Rețineți că am scos-o de la centru / sus și am asigurat că gradientul este terminat până când ajung la marginea documentului. Aceasta înseamnă că pot seta culoarea de fundal în HTML pentru a fi culoarea mai închisă și dacă cineva își întinde fereastra browserului va fi fără probleme.
Deci, creați un nou director pentru proiect, apoi creați un al doilea director numit acolo imagini și salvați imaginea din interior ca background.jpg. Când salvați utilizarea Fișier> Salvare pentru Web și dispozitive și selectați JPG cu o setare de calitate de aproximativ 70. Aceasta iese la o dimensiune de fișier de 16kb, care nu este prea rău. Trebuia să existe un moment în care a trebuit să scrii și să salvezi cu adevărat, dar acum vrei să te asiguri că nu ești prost risipitor cu dimensiunile fișierelor tale.
Acum, creăm un document HTML și scriem într-un anumit cod:
Structura cu filet - regulat
Deci, aceasta va fi baza HTML-ului nostru. Acum o vom crea style.css documentați și scrieți în următoarele:
corpul background-image: url (images / background.jpg); background-repeat: no-repetare; fundal-poziție: centrul de top; background-color: # 657077; margin: 40px;
Câteva lucruri pe care trebuie să le menționăm aici:
Puteți vedea documentul HTML rezultat aici. Rețineți că dacă vă redimensionați fereastra este un fundal absolut frumos absolvit. Wunderbar!
Apoi, adăugăm structura noastră la pagină, astfel încât să putem începe stilul.
Structura cu filet - regulat
Așa cum puteți vedea că am folosit în esență aceeași structură pe care am menționat-o în Pasul 2. Am adăugat câteva id-uri și clase și un conținut real. Iată raționamentul din spatele a ceea ce am făcut:
Accentsconagua
.tabbed_area ul dar acest lucru ar putea deveni confuz cu viitorul OK, fără stiluri, nu prea arată prea mult ... încă!
Acum, cu elemente de styling, cred că este mai bine să lucrați din elementul exterior. Deci, vom începe cu acest element -
#tabbed_box margin: 0px auto 0px auto; lățime: 300px;
Acum vom face zona de rulare. Putem schita astfel:
.tabbed_box h4 font-family: Arial, Helvetica, sans-serif; font-size: 23px; Culoare: #FFFFFF; literă Spațiere: -1px; margin-bottom: 10px; .tabbed_box h4 mică culoare: # e3e9ec; font-weight: normal; font-size: 9px; font-familie: Verdana, Arial, Helvetica, sans-serif; text-transform: majuscule; Poziția: relativă; sus: -4px; stânga: 6px; literă Spațiere: 0px;
Câteva lucruri de reținut aici:
Îți vom da înăuntru
.tabbed_area border: 1px solid # 494e52; background-color: # 636d76; padding: 8px;
Acest lucru oferă doar un pic de definiție și spații elementele interioare departe de părți. Puteți vedea unde ne aflăm în imaginea de mai jos.
Lucrând din exterior, am dat elementul nostru un pic de formă și este mult mai ușor să vedem cum se va termina în căutarea. De asemenea, de multe ori veți avea constrângeri venind din exterior, de exemplu, caseta ar putea fi necesară pentru a se încadra într-o coloană cu o anumită lățime. În cele din urmă, este de asemenea o idee bună să ieșiți înăuntru, pentru că atunci orice moștenire a stilului este clară. De exemplu, dacă ați mers invers și ați făcut mai întâi elementele interioare, stilurile ulterioare ar putea afecta acele elemente interioare și va trebui să vă întoarceți și să vă reajustați oricum.
Acum ajungem la lucrurile bune - la filele! Dacă adăugăm această mică bucată de CSS, vom face un drum lung pentru a face ca filele să arate mai mult ca filele:
ul.tabs margine: 0px; padding: 0px; ul.tabs li stil-list: none; display: inline;
Acest cod spune că
Există de fapt alte valori afișate pe care le puteți citi despre Quirksmode.
Bineînțeles că "filele" noastre încă arată destul de ciudate, așa că să le oferim un stil. Am folosit-o
ul.tabs li a culoare-fundal: # 464c54; Culoare: # ffebb5; umplutura: 8px 14px 8px 14px; text-decoration: none; font-size: 9px; font-familie: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-transform: majuscule; frontieră: 1px solid # 464c54; ul.tabs li a: mutați background-color: # 2f343a; border-color: # 2f343a; ul.tabs li a.active fundal-culoare: #ffffff; Culoare: # 282e32; frontieră: 1px solid # 464c54; frontieră-fund: 1px solid #ffffff;
Ceea ce am făcut aici este:
Există două lucruri pe care trebuie să le facem pentru a face ca zonele de conținut să funcționeze. Primul este că ar trebui să facem ca celelalte două zone să dispară, iar a doua este să le facem să arate în mod corespunzător.
.conținut background-color: #ffffff; padding: 10px; frontieră: 1px solid # 464c54; # content_2, # content_3 display: none;
Veți vedea că prima parte a CSS spune browser-ului că toate elementele cu class = "conținut" ar trebui să fie albă cu padding și o margine (aceeași culoare ca și filele). A doua parte spune că elementele cu id = "content_2" și id = "content_3" ar trebui să aibă un afișaj: nici unul, sau în alte cuvinte ar trebui să fie invizibil.
Mai târziu, când adăugăm niște Javascript, putem folosi scriptul pentru a alterna între afișare: nici unul și afișarea: bloc pentru a le face să se arate și să se ascundă.
Deci, iată cum arată filele noastre, puteți vedea și o versiune HTML a locului în care ne aflăm. După cum puteți vedea că este destul de aproape acum, dar trebuie să reparăm spațiul și să adăugăm conținut real.
Fixarea problemei spațiere este, de fapt, pur și simplu o chestiune de adăugare a marjelor înapoi la
ul.tabs margine: 0px; padding: 0px; margin-top: 5px; margin-bottom: 6px;
Pentru a fi perfect sincer, nu sunt sigur de ce a apărut această problemă de spațiere. Uneori, HTML mă mistifică, dar eu doar ajustează setările până când lucrurile se corectează. Uneori în acest proces îmi dau seama care a fost cauza, câteodată nu. Cred că ceea ce spun este că, dacă nu veți intra într-adevăr în detaliile ciudate ale specificațiilor W3, mai devreme sau mai târziu veți întâlni câteva probleme pe care nu le puteți explica. Nu vă lăsați să vă scadă, doar reglați până găsiți o soluție sau o soluție.
Acum vom adăuga conținut în zona de conținut. Am evitat acest lucru mai devreme, deoarece vroiam să păstrez HTML-ul ca simplu. Iată câteva:
Răsfoiți site-ul Selectați o filă
Deci, aici tocmai am adăugat o grămadă de liste neordonate în cele trei zone de conținut. De altfel, mă bat joc de asta ca și cum ar fi folosit pe un blog WordPress. Dar într-adevăr ai putea folosi asta pentru tot felul de lucruri. Noua pagină de pornire FlashDen, la care am lucrat câteva zile în urmă, utilizează zone cu file pentru a afișa diferite tipuri de fișiere recente.
Acum vom adăuga un stil pentru a face ca acestea să arate mai bine:
.conținut ul margine: 0px; umplutură: 0px 20px 0px 20px; .content ul li style-style: none; frontieră-jos: 1px solid # d6dde0; padding-top: 15px; padding-bottom: 15px; font-size: 13px; .content ul li a text-decoration: nimic; Culoare: # 3e4346; .content ul li a culoare: # 8b959c; font-size: 9px; text-transform: majuscule; font-familie: Verdana, Arial, Helvetica, sans-serif; Poziția: relativă; stânga: 4px; top: 0px;
Încă o dată am elaborat listele noastre. Acest timp, mai degrabă decât să dea
Alte lucruri de reținut:
Așa arată astfel pagina noastră:
În general, este destul de bine, cu excepția faptului că avem prea multe frontiere. Dar este ok, putem rezolva cu un pseudo-selector magic numit "ultimul copil' asa:
.conținut ul li: ultimul-copil border-bottom: nici unul;
Acest stil se aplică doar ultimului element de felul său - adică ultima
Acum este doar un pas pentru a termina HTML-ul nostru, și asta pentru niște imagini frumoase de fundal pentru elementele noastre. După cum vă amintiți, unele elemente din fișierul meu original PSD au avut gradiente subtile. Deci, acum este momentul să le adăugăm. Există trei biți gradate: (a) pe fila activă (b) pe filele inactive și (c) în partea de jos a zonei de conținut. Iată cele trei imagini pe care le vom avea nevoie:
Sunt greu de văzut, dar în principiu sunt fiecare felii mici de gradient pe care le vom stabili ca imagini de fundal repetate. Aici este o închidere superioară celei pentru tab (notă am adăugat o margine subțire în jurul ei, deci este puțin mai clar.) Observați că există o linie albă de 1px în partea de sus..
Deci, trebuie să facem câteva ajustări ale codului CSS pentru a adăuga imagini în fundal, cum ar fi:
ul.tabs li a imagine-imagine: url (imagini / tab_off.jpg); background-repeat: repeat-x; background-position: bottom; ul.tabs li a.activă background-image: url (images / tab_on.jpg); background-repeat: repeat-x; background-position: top; .content imagine-imagine: url (imagini / content_bottom.jpg); background-repeat: repeat-x; background-position: bottom;
Rețineți că am introdus de fapt aceste biti în plus cu restul definițiilor lor de clasă, dar de dragul concisității tocmai am copiat în extrase. După cum puteți vedea în cele trei cazuri, repetăm o imagine de fundal numai de-a lungul axei x. În cazul a două (fila off și zona de conținut) o facem de-a lungul fundului, iar în cealaltă este de-a lungul vârfului.
Și cu asta am terminat oficial partea HTML / CSS a acestui tutorial. Puteți vedea pagina finalizată cu stil aici.
Următorul lucru pe care trebuie să-l facem este să adăugați niște Javascript pentru a face ca filele noastre să facă ceva. Mai întâi vom face acest lucru manual și apoi vă voi arăta cum să utilizați o bibliotecă Javascript pentru a realiza același lucru. Acum ar trebui să subliniez că nu sunt expert JS și sper să introduc niște maeștri programatici adevărați pentru a scrie tutoriale aici, deci dacă mă observați că fac ceva care este puțin dubios, nu ezitați să lăsați un comentariu și Voi atinge tutorialul și o voi face puțin mai bune!
Deci, mai întâi să subliniem ce vrem să facem când cineva face clic pe o filă. Vrem să închidem fila noastră curentă, să activați cea nouă, să ascundem zona curentă de conținut și să afișăm cea nouă.
Acum am putea avea ceva inteligent care să funcționeze care tabă este în prezent și o oprește, dar e mai ușor să treci și să le dezactivezi și apoi să porni pe cea pe care o dorim. În mod similar, pentru zonele de conținut, putem ascunde toate cele trei și apoi le putem arăta pe cea pe care o dorim. Acest lucru ne salvează să realizăm situația actuală.
Elementele cu care lucrăm arata astfel:
Acum, în Javascript putem găsi un element pur și simplu folosind id-ul lui și document.getElementById (). Deci document.getElementById ('content_1') ne va da prima zonă de conținut. Apoi putem să setăm stilul de afișare pentru nimeni folosind această linie:
document.getElementById ('content_1'). style.display = 'none';
Similar pentru a vedea o clasă pe care o folosim:
document.getElementById ('tab_1') className = 'activ';
Deci, atunci a într-adevăr abordarea simplă ar fi aceea de a scrie:
funcția tabSwitch (new_tab, new_content) document.getElementById ('content_1') style.display = 'none'; document.getElementById ('content_2'). stil.display = 'nici unul'; document.getElementById ('content_3'). stil.display = 'none'; document.getElementById (new_content) .style.display = 'bloc'; document.getElementById ('tab_1') className = "; document.getElementById ('tab_2') className ="; document.getElementById ('tab_3') className = "; document.getElementById (new_tab) .className = 'activ'; Acest lucru ar fi plasat în interiorul unui fișier, să îl numim functions.js. Apoi am sunat acest script modificând link-urile de file la:
Și destul de sigur, iată un exemplu al exemplului nostru simplu de javascript. Functioneaza!
Acum există câteva probleme foarte evidente cu acest scenariu. Nu în ultimul rând, dacă adăugați o altă filă, va trebui să vă schimbați funcția. Și dacă ați avea mai multe seturi de file pe o pagină, veți avea nevoie de două funcții! Deci, hai sa-i facem putin:
funcția tabSwitch_2 (activ, număr, tab_prefix, content_prefix) pentru (var i = 1; i < number+1; i++) document.getElementById(content_prefix+i).style.display = 'none'; document.getElementById(tab_prefix+i).className ="; document.getElementById(content_prefix+active).style.display = 'block'; document.getElementById(tab_prefix+active).className = 'active';
Cea de-a doua versiune a funcției de comutare a filelor are nevoie de mai multe argumente, dar este puțin mai inteligentă. Se presupune că avem un set de file și un set de zone de conținut și au id-uri care au un prefix și un număr de numere incrementale. I.E. tab_1, tab_2 ... și content_1, content_2 ...
Primul argument pe care funcția noastră îl are, "activ", este fila / conținutul pe care ne dorim. Al doilea argument, "număr", reprezintă numărul de file utilizate. Al treilea și al patrulea argument sunt prefixele utilizate în ID-urile elementelor noastre.
Funcția are apoi o buclă pentru care circulă de la 1 la numărul de file și le dezactivează, apoi le comută pe cele două pe care le dorim înapoi la sfârșit. Cu alte cuvinte, este același script ca înainte, dar tocmai am făcut-o un pic mai deștept.
Deci, în exemplul nostru pentru a apela funcția, am avea acest cod:
Aceasta înseamnă că mai târziu dacă am avea un al doilea set de file, le-am putea da diferite prefixe de id și să folosim aceeași funcție din nou și din nou.
Vedeți al doilea exemplu de javascript.
În ultima vreme au apărut o mulțime de biblioteci Javascript și, de fapt, există (cel puțin) două care sunt făcute special pentru realizarea acestui efect tab: MooTabs și DomTab. Nici eu nu am folosit-o, dar dintr-o privire scurtă au părut destul de ușor de folosit.
Cu toate acestea, după cum am auzit multe despre biblioteca jQuery, am decis să încerc să schimb același fila folosind jQuery. Am sentimentul că soluția mea ar putea folosi ceva lucru, dar este încă interesant să privim.
Deci, mai întâi, accesați site-ul jQuery și descărcați cea mai recentă versiune a bibliotecii de script-uri.
jQuery oferă o grămadă de funcții care vă permit să selectați grupuri de lucruri. De exemplu, dacă doriți să selectați fiecare element de pe pagina care este o legătură (adică. elemente) și apoi să le facă să dispară, veți plasa acest lucru în dvs. zonă:
Prima linie adaugă biblioteca de script jQuery. Zona principală de script este în interiorul unei bucăți de cod care arată astfel: $ (Documentul) .ready (funcția () ); Acest lucru îi spune browserului să execute totul înăuntru când atinge pagina. Deci, în cazul nostru, îi dăm comanda:
$ ( "A") slideUp ().;
Acest lucru spune că găsiți tot ce este și executați slideUp () pe ea. Sau cu alte cuvinte: găsiți toate legăturile și faceți-le să dispară cu un efect de alunecare. Încercați să adăugați acel script la o pagină și încărcați-l și veți vedea că toate linkurile dvs. dispăreau. Destul de curat?
Oricum, există multe modalități de a selecta lucrurile și puteți citi despre ele în API și în documentație. Puteți face lucruri cum ar fi găsirea fiecărui element cu o anumită clasă, un anumit id și așa mai departe. La un moment dat, voi scrie o introducere corectă la tutorialul jQuery aici, dar pentru moment, acel mic intro va face - pe lângă faptul că are doar o oră de experiență cu jQuery, bănuiesc că ar fi ceva de râs pentru mine să scriu introduceți-l!
Deci, după o mică experiență am venit cu o modalitate de a utiliza jQuery pentru a face ca filele să alunece și să iasă. Pentru a face acest lucru mai întâi am modificat link-urile mele pentru a nu avea nici un javascript, ci mai degrabă să am titlu atribut și un extra class = "tab-ul". Observați că puteți da un element două clase prin aceasta: class = "tab active".
Acum, folosind aceste două elemente, în principiu pot obține toate legăturile cu clasa "tab" și pot găsi, de asemenea, orice element al cărui id este egal cu atributul de titlu al link-ului care a fost doar clic. Iată scriptul (plasat în
) care explică acest lucru un pic mai bine:Așa că am adăugat comentarii pentru a explica. Practic atunci când se face clic pe orice legătură cu clasa "tab", facem totul în interiorul acelei funcții.
Și pentru a vedea exemplul final de lucru cu jQuery, faceți clic aici!
OK, la câteva minute după ce am făcut exemplul de jQuery, am descoperit că există, de fapt, un control vizual special în tabelele jQuery. Va trebui să am o joacă cu mâine, fără îndoială că va face viața mult mai simplă!
Între timp, sper că ți-a plăcut tutorialul și ai obținut ceva din el.
