Tabel Adaptive compararea produselor cu posibilitatea de filtrare.
Dacă sunteți în curs de dezvoltare magazin online, cu o mare cantitate de bunuri, posibilitatea de a compara produse este, fără îndoială, util. Cea mai simplă realizare - un tabel HTML simplu. Dacă doriți ca utilizatorii să fie în măsură să compare 6 sau mai multe produse, această problemă este complicată. În plus, necesitatea de a oferi adaptabilitate pentru diferite dispozitive.
În acest articol veți găsi o soluție gata preparată, - un tabel de comparație a mărfurilor magazin online. punerea în aplicare a noastră sa născut după ce a citit site-ul Sony din Marea Britanie.
structura HTML
Structura HTML va consta dintr-o comparație-masă produse section.cd element. înscrise în
Expose Lățimea elementului de produse .cd-împachetarea egal cu 100%, și preaplin-x egal cu auto; Lățimea elementului-produse .cd-coloane este egal cu suma tuturor coloanelor + atașați-l pentru a derula. Div.features unitate de poziționare este absolută, a pus-o în partea stângă a câmpului vizual.
Pe ecrane mari (mai mult de 1170px), clasa .top-fix va fi atașat la .cd-produse de masă în timp ce derulând la informațiile principale despre acest produs a fost întotdeauna în partea de sus (numele produsului și imagine):
Prelucrare eveniment
Pentru comercializarea produselor va crea un productsTable obiect de tabelă. precum și utiliza funcția pentru interceptarea convorbirilor telefonice bindEvents unor evenimente:
După cum știți, am atașat un wiretap de defilare produse-.cd-înveliș; adăugând clasa .top-fixat la elementul .cd-produse-masă. Elementele de poziție .top-info vor fi înregistrate, astfel încât cu produse de .cd-coloane defilare va avea loc. Funcția updateLeftScrolling () este folosită pentru a actualiza datele din tabel, atunci când elementul de derulare produse .cd-împachetarea.
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!