Pentru a crea un coș de cumpărături, tehnologia "drag-and-drop" va fi utilizată utilizând biblioteca jQuery UI. Întreaga listă de cumpărături poate fi derulată orizontal prin tragerea cu cursorul mouse-ului.
Lista produselor
În exemplul nostru, nu există nicio parte a serverului, astfel încât codul de markup formează o listă simplă de articole (în exemplul respectiv se utilizează 10 produse). Structura layout-ului este simplă:
Cosul de cumparaturi
În coșul de cumpărături există un element în care achizițiile vor fi "aruncate". Această zonă poate fi de asemenea trasă de cursorul mouse-ului pentru a vedea întreaga listă de cumpărături. De asemenea, în coșul de cumpărături există elemente pentru navigarea pe lista de cumpărături, un buton pentru ștergerea întregului coș deodată și indicatori pentru numărul total de articole selectate și suma de achiziție.
Inițializarea coșului de reciclare
Ștergerea unui articol din coșul de cumpărături
Când eliminați un articol din coșul de cumpărături, trebuie să actualizați suma și suma totală:
Coș de cumpărături de navigare
Glisarea unei zone cu o listă de cumpărături nu este singura modalitate de a naviga în coșul de cumpărături. Am adăugat două elemente pentru a parcurge lista de cumpărături la stânga și la dreapta. Ei manipulează proprietatea CSS din stânga.
Ca rezultat, obținem interfața cu coșul de cumpărături:
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați 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!
Articole similare
Trimiteți-le prietenilor: