Transformați orice formular web într-un expert luminos pas cu pas folosind jquery

Acest tutorial vă va arăta cum să transformați un formular web lung într-un expert cu introducerea pas cu pas a datelor.

Când creați un formular web, indiferent de scopul pe care îl urmăriți, trebuie să împărțiți toate câmpurile de formule în blocuri tematice. Fiecare bloc ar trebui să descrie în mod clar câmpurile de formă incluse în acesta. Deși pe internet astăzi există multe exemple vizuale diferite, așa ar trebui să se uite în cod.

Astfel, fiecare grup de domenii este o sub-sarcină a unei sarcini mai mari prezentată într-o formă web. Prin urmare, fiecare sub-sarcină poate fi reprezentată ca un pas tematic, care conține o descriere, câmpuri de introducere a datelor și un sistem standard de navigație pentru formulare principale. Întreaga sarcină poate fi efectuată în câțiva pași simpli.

Codul ar trebui să arate astfel:

Acum, să ne uităm la următorul cod. Pentru a stabili câți pași există, trebuie să selectați (evidențiați) toate blocurile tematice și să setați dimensiunea cadrului creat. Apoi, integrăm cadrul creat (returnați toate blocurile), încadrați fiecare bloc tematic cu etichetele div și legați elementul care va conține butoanele "înapoi" și "următor".

Acum, hai să mergem la partea mai distractivă. Dacă acesta este primul bloc tematic, vom crea doar butonul "următor" și vom face vizibil acest pas în mod implicit. Pentru ultima etapă, creați numai butonul "înapoi". În toate celelalte cazuri, ambele butoane de navigare vor fi necesare. Metoda de creare a butoanelor de navigare va fi descrisă mai târziu.

Să descriem acum crearea butoanelor și procesul de navigare.

2. Creați butoanele Următor și Înapoi și adăugați interacțiunea

Crearea butoanelor de navigare nu este la fel de dificilă cum pare. Fiecare buton în locul etichetei standard Următorul poate avea propriul nume unic (de exemplu, Următorul sau Anterior) și va fi legat de panourile create în etapa anterioară. Pentru a comuta între "pașii", trebuie să adăugați etichete de legătură pentru fiecare buton. Acestea vor funcționa după cum urmează:

• Apăsând butonul Back revine utilizatorului pentru a deschide pagina la pasul anterior, care va fi marcat ca fiind curentul în selectStep () metoda.
• Butonul Următorul activat mișcă utilizatorul de la pagina deschisă la următoarea, care va fi marcată ca metoda curentă în metoda selectStep ().

Funcția selectStep () pe care am menționat-o elimină clasa CSS "curent" din toate blocurile și o atribuie doar celei curente:

Expertul este aproape gata de utilizare, dar asta nu e tot. Acum, să adăugăm descrieri ale fiecărui pas deasupra formularului, astfel încât utilizatorul să poată naviga cu ușurință.

Acest lucru este mult mai ușor decât s-ar părea la prima vedere. La începutul codului nostru, trebuie să adăugăm o listă neordonată care va deveni un container pentru aceste informații. În plus, ascundem butonul Accept, deoarece avem nevoie doar de ultima pagină.

De asemenea, trebuie să extinem funcția fiecărei funcții () și să adăugăm informații despre fiecare pas pentru toate etichetele de seturi ale cadrului creat (set înfășurat). Fiecare pas este numerotat începând de la 1. Sub numărul pasului, adăugăm o descriere cu elementul

.

Să adaptăm altceva. Deoarece butonul "Accept" trebuie să fie vizibil numai pe ultima pagină, îl vom ascunde de fiecare dată când utilizatorul face clic pe butonul Următor. Și imediat ce utilizatorul ajunge la ultimul pas, devine vizibil.

Plugin pentru ușurința utilizării

Ar fi trist dacă nu ar exista un plug-in, cu care să poți folosi tot ceea ce este descris mai sus într-o singură linie. Acest plugin se numește FormToWizard. Cred ca acum toata lumea intelege ce este :). Pentru a instala pluginul, conectăm linkul la fișierul script și îl referim la el

.

Dacă doriți să ascundeți butonul "Acceptați" (sau substituentul pentru diferite butoane), puteți adăuga parametrul sumbitButton specificând numele elementului pe care doriți să-l faceți invizibil.

Dimensiune mică (ușurință) și compatibilitate cu browserele

Plug-in-ul cântărește numai 2,3KB, iar sub formă comprimată este și mai mic. Este susținută de toate browserele populare: FireFox, Google Chrome, Safari, Opera, Internet Explorer 8, 7 și 6. Acesta din urmă este secundar, a fost foarte surprins de faptul că pluginul funcționează în el :).

Vă mulțumesc pentru atenție. Mult noroc!

Ultimele 5 lecții din rubrica "jQuery"

Astăzi dorim să vă spunem despre biblioteca TypeIt - un plugin jQuery gratuit. Cu aceasta, puteți simula tastarea. Dacă totul este ajustat corect, puteți obține un efect foarte realist.

jQuery plugin pentru crearea unei cronologii.

jQuery plugin pentru crearea unei diagrame Gantt.

Un exemplu de încărcare a unui fișier prin PHP și jQuery ajax.

Răcoros și util

Vă mulțumesc foarte mult! Am căutat o soluție pentru instalator pentru o lungă perioadă de timp, și aici este)

forma de clasă, într-adevăr a plăcut. Există o astfel de întrebare ca locul Sabatului standard pentru a vă pune imaginea

O lecție, clasă. În text: "În continuare, vom integra cadrul creat.", Litera "H"

Maxim Shkurupiy

Ho Ho este super. Doar aici aș face clic pe Pasul 1 și imediat m-am mutat la un pas, în ciuda faptului că eram în a treia etapă

Bună dimineața. Verificat în ie-6 - nu funcționează corect. Nu modificați formularul când faceți clic pe "Faceți clic aici pentru a modifica formularul", adică-6 produce eroare de eroare pe pagina 84, eroare nespecificată. Verificat și ie-7 - e nu funcționează corect. De asemenea, nu se modifică forma, dar numele erorii diferă: "Linia 28, obiectul nu acceptă această proprietate sau metodă". În formularul 8 forma sa schimbat.

2veins confirm. Am descarcat programul "Toti intr-unul".

Mulțumesc. Lucruri minunate. Vă rog să-mi spuneți cum să faceți formularul pas cu pas încărcat simultan, fără să faceți clic pe butonul de schimbare a formularului? Vă mulțumim anticipat.

Este un pic neclar în cazul în care codul întâlnește var pași = $ ("# Fieldup SignupForm"); trebuie doar să schimbați SignupForm cu alt nume, iar în cod nu găsesc unde. Când modificați pagina HTML, script-ul este tăiat corespunzător.

Întrebarea dispare, # a uitat să pună, mulțumesc pentru traducerea de calitate a articolului

Îmi pare rău pentru întrebarea stupidă, dar despre lecție. )) Ce este un formular web, este o formă comună pentru completarea datelor sau altceva?

Îmi pare rău pentru întrebarea stupidă, dar despre ce este lecția. )) Este o formă obișnuită pentru completarea datelor sau altceva?

Jotunn, vezi exemplul

Cum se face scriptul să înceapă să funcționeze imediat, fără a apăsa un buton?

Întrebarea unui astfel de plan. Cum se fac mai multe opțiuni în acest formular. și anume de exemplu. în primul pas, oferim o alegere, în funcție de alegere, se va deschide pasul 2 sau, de exemplu, imediat 3. Mulțumesc.

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!

Pagina anterioară

Pagina următoare