Fișierele sursă ale articolului curent pot fi descărcate de pe link.
Deci, avem cel mai simplu câmp de text al formularului, în care, după cum presupunem, utilizatorul trebuie să introducă prețul minim și maxim, adică o anumită gamă de prețuri în care el caută bunurile.
Teoretic, utilizatorul nu va avea probleme în a intra într-un astfel de interval. Însă, în practică, va fi mai ușor să le spuneți utilizatorului formatul datelor primite, sau chiar mai bine, pentru a simplifica procesul cât mai mult posibil. Cea mai ușoară modalitate de a face acest lucru este cu un cursor sau un cursor, care trage care, utilizatorul va putea schimba prețurile minime și maxime.
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Un astfel de cursor ne va ajuta să implementăm biblioteca jQuery UI. Descărcați și conectați această bibliotecă. Dacă nu știți cum să faceți acest lucru, vă sugerăm să vă referiți la articolul din calendarul UI jQuery.
De fapt, trebuie să conectăm un fișier de stiluri și scripturi din biblioteca de jQuery UI:
Acum avem nevoie de un element de lângă câmpul de formular, în care va fi localizat glisorul pentru interval. Creați o div divulă obișnuită:
Acum inițializați widget-ul Slider. Pentru a face acest lucru, să luăm codul chemării sale din documentație și să-l folosim, înlocuind elementele de aspect în ea cu dvs. dacă este necesar:
Să verificăm modul în care funcționează codul nostru.
Super! Totul funcționează. Acum, utilizatorul poate trage glisoarele cursorului și poate schimba gama de valori ale prețurilor. În API-ul cursorului veți găsi toate tipurile de setări. Eu, probabil, voi schimba doar un pas dintr-o gamă. Pasul implicit este unul. În magazinele online, prețurile pot fi valori rotunde, așa că voi pune pasul 10, iar valoarea minimă inițială este 0. Pentru a face acest lucru, voi adăuga proprietatea pas și modifica proprietatea valori un pic:
Foarte bine, funcționează! Pe asta am totul. Mult noroc!
Curs practic pe aterizare adaptivă de la zero!
Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Articole similare
Trimiteți-le prietenilor: