jQuery Mobile Framework - En skjemaoppgave

Trinn 1: Demo Application Page Structure

Vår demo-applikasjon består av en enkelt html-side, index.html, som består av en containerside som vist nedenfor:

 
  
... 
 
... 
 
   
... 
   
... 
   
... 
 
... 
 
 ... 

• Hovedinnholdet inneholder skjemaet som skal fylles ut av brukeren, og har både en header og en bunntekst.
• Dialoginnhold vises kun hvis et skjemaformular mangler når skjema er sendt inn. Den består av en advarsel og en OK-knapp for å lukke dialogboksen. Vær oppmerksom på at den ikke har overskrift eller bunntekst.
• Overgangsinnhold vises etter at skjemaet er sendt inntil svaret er mottatt fra serveren. Den består av et "spinner" bilde med kort tekst som informerer brukeren om at skjemaet blir sendt inn. Overgangsinnhold har heller ikke en overskrift eller et bunntekst.
• Bekreftelsesinnhold vises. Etter mottak er mottatt fra serveren. Det viser bekreftelsesnummeret til brukeren. Bekreftelsesinnhold har både en header og en bunntekst.

Innholdsoverganger vises i diagrammet nedenfor:

Ytterligere observasjoner på koden oversikt over:

• De data-tema Attributt lar oss velge mellom tilgjengelige stiler i jQuery Mobile-rammen:
  . Standardtemaet har forskjellige fargestifter som heter a, b, c, d, e, hver gir et konsekvent sett med farger for forskjellige elementer på siden. For vår søknad valgte vi fargen som tilsvarer b.
• Headers kommer med en tilbakeknapp. Vi trengte ikke tilbake knapper og valgte derfor å skjule dem via data-nobackbtn = "true".
• Det er mulig å gi litt tekst som skal vises i bunnteksten mellom
  tags. I vår søknad har vi utelatt tekst i bunnteksten. Som et resultat vil brukeren bare se i en bunnfarge en tynn stang som er den samme som toppteksten. Med tekst vil bunnteksten ha en tilsvarende høyde som bunnteksten med teksten i den.

Formelementer

Vårt fordringsskjema består av følgende felt:

• Flere inngang felt av typen tekst: Frakt nummer, Fornavn, Etternavn, E-post, Telefon, Gateadresse, By og postnummer. Alle er obligatoriske felt bortsett fra Telefon.
• EN å velge element for stat. dette er et obligatorisk felt.
• EN textarea element for en bruker å legge inn informasjon om manglende eller skadet forsendelse. dette er et obligatorisk felt.

For eksempel, la oss se på tekstfeltet for Leveringsnummer:

 
 Fraktnummer *  

Vi brukte en merkelapp med en til attributt hvis verdi er den samme som id av inngang elementet merkelapp er festet til. Videre pakket vi inn merkelapp og inngang i en div med data-rolle attributt verdsatt som fieldcontain. jQuery Mobile Framework vil benytte fieldcontain attributt verdi for spesiell styling. I tillegg ser du på name = "shipNo_r". For denne spesielle applikasjonen bestemte vi oss for å definere verdien av Navn attributt for et ønsket formelement som er verdien av id attributt vedlagt av _r. Hvis elementet ikke er nødvendig, er verdien av Navn Attributtet vil være det samme som verdien av id Egenskap. For eksempel, siden Telefon ikke er et obligatorisk felt, defineres det som følger:

 
 telefon  

Som vi vil se senere, vil denne spesielle navngivningskonvensjonen hjelpe oss med å oppdage manglende felt under skjemainnlevering.

Et annet bemerkelsesverdig formelement er å velge element. I likhet med ovenstående, verdien av til Attributtet er det samme som ID for å velge elementet merkelapp er festet til. Også, den merkelapp og å velge er pakket inn i a div med data-rolle attributt verdi som fieldcontain. Med den lange listen over alternativer vi har i denne applikasjonen, åpner jQuery Mobile rammeverket listen på en ny side når brukeren fokuserer på å velge element.

 
 Stat*  Vennligst velg en stat Alabama Alaska Arizona...  

Skjema siden som vises i en Android 2.2-telefon er vist nedenfor. Brukeren vil bla gjennom siden for å få tilgang til elementene i skjemaet:

Det samme skjemaet vises i en iPod touch som kjører iOS 4.1:

Trinn 2: Variabeldefinisjoner

Vi vil referere til ulike elementer på HTML-siden gjennom hele koden vår. Det er fornuftig å definere disse referansene bare én gang og gjenbruk dem etter behov. Av denne grunn erklærer vi globalt brukte variabler samt konstanter i hode delen av siden:

Oppdrag av disse variablene er gjort i jQuery $ (Document) .ready () Fungerer ved hjelp av ID-seleksjoner, som vist nedenfor. (Husk at jQuery $ (Document) .ready () funksjon kalles når hele DOM-hierarkiet i siden er lastet inn. Den funksjonen er det beste stedet å initialisere våre variabler.) Vi definerer også inputMapVar som en samling bestående av alle inngang elementer med _R i deres Navn attributt (Funksjonsanropet $ ( 'Inngang [navn * = "_ r"]') velger alle slike elementer).

Trinn 3: Innholdsvalgfunksjoner

La oss nå se på innholdseleksjonsfunksjonene som blir kalt av hendelseshåndterere.

For å gjemme og vise hovedinnholdet og overskriften / bunnteksten bruker vi hideMain () og showMain () funksjoner:

 funksjon hideMain () hdrMainVar.hide (); contentMainVar.hide (); ftrMainVar.hide ();  funksjon showMain () hdrMainVar.show (); contentMainVar.show (); ftrMainVar.show (); 

For å gjemme og vise overgangsinnhold bruker vi hideContentTransition () og showContentTransition () funksjoner:

 funksjon hideContentTransition () contentTransitionVar.hide ();  funksjon showContentTransition () contentTransitionVar.show (); 

For å gjemme og vise dialogboksen innhold, bruker vi hideContentDialog () og showContentDialog () funksjoner:

 funksjon hideContentDialog () contentDialogVar.hide ();  funksjon showContentDialog () contentDialogVar.show (); 

Til slutt, for å gjemme og vise bekreftelsesinnholdet og dets overskrift / bunntekst, bruker vi hideConfirmation () og showConfirmation () funksjoner:

 funksjon hideConfirmation () hdrConfirmationVar.hide (); contentConfirmationVar.hide (); ftrConfirmationVar.hide ();  funksjonsvisningKonfirmasjon () hdrConfirmationVar.show (); contentConfirmationVar.show (); ftrConfirmationVar.show (); 

Når siden er lastet, skal bare hovedinnholdet vises. Av denne grunn er andre innholdssider skjult:

Vi vil diskutere hvordan du knytter sammen innholdsvalgfunksjonene med hendelsesbehandlerne nedenfor.

Trinn 4: Form Innlevering

Når en bruker trykker på innleveringsknappen, må vi validere skjemadataene før du sender inn skjemaet. For å holde ting enkelt, vil vi bare sjekke om alle de obligatoriske feltene er gitt. Hvis form validering er vellykket, viser vi overgangsinnholdet som består av et spinnerbilde med en kort tekst som informerer brukeren om at skjemaet blir sendt inn. Hvis validering mislykkes, viser vi dialoginnholdet som består av en advarsel og en OK-knapp for å lukke dialogboksen.

Form validering

Etiketter av formelementene med manglende data vil bli uthevet i rødt. Til dette formål legger vi til en ny stilklasse som heter missing og utvider jQuery Mobile merkelapp klasse.

 label.missing color: # FF0000; font-vekt: bold; 

Nedenfor er hendelseshandleren for skjemainnlevering. I typisk jQuery notasjon, identifikatoren for Form1 sendes til jQuery-objektsamtalen for å håndtere innleveringshendelsen:

 $ ('# form1'). send inn (funksjon () var err = false; // Skjul hovedinnhold hideMain (); // Tilbakestill de tidligere uthevede formelementene stateLabelVar.removeClass (MISSING); whatLabelVar.removeClass (MISSING) ; inputMapVar.each (funksjon (indeks) $ (dette) .prev (). removeClass (MISSING);); // Utfør form validering inputMapVar.each (funksjon (indeks) hvis ($ (dette) .val ) == null || $ (dette) .val () == TOM) $ (dette) .prev (). addClass (MISSING); err = true;), hvis (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; hvis (whatVar.val () == null || whatVar.val () == TOM) whatLabelVar.addClass (MISSING); err = true; / / Hvis validering mislykkes, vis dialoginnhold hvis (err == true) showContentDialog (); return false; // Hvis validering passerer, vis Overgang innhold showContentTransition (); // Send skjema $ .post ("/ skjema / requestProcessor.php ", form1Var.serialize (), funksjon (data) confirmationVar.text (data); hideContentTransition (); showConfirmation ();); return false;);

Vi satte et feilflagg til falsk og skjul hovedinnholdet som inneholder skjemaet. Vi nullstiller de tidligere merkede etikettene på hvert medlem av samlingen inputMapVar. For å gjøre det, sender vi en inline-funksjon som et argument til Hver() som bare inneholder . $ (Dette) .prev () removeClass (MISSING);. Noter det dette er valgt inngang element og prev () returnerer sin umiddelbare tidligere søsken som er merkelapp forbundet med det.

De stat for statsvalg og hva for kravbeskrivelse er ikke tekstfelt. Derfor har de tilsvarende etikettene sine stiler tilbakestilt separat.

Etter at alle tidligere uthevede etiketter er tilbakestilt, reagerer vi på det nødvendige inngang elementer for å sjekke om noen av dem har en manglende verdi. Hvis så er tilfelle, legger vi til den manglende klassen på etiketten som er knyttet til inntastingsfeltet:

 // Utfør skjema validering inputMapVar.each (funksjon (indeks) hvis ($ (dette) .val () == null || $ (dette) .val () == TOM) $ (this) .prev .addClass (MISSING); err = true;); hvis (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); feil = true;  hvis (whatVar.val () == null || whatVar.val () == TOM) whatLabelVar.addClass (MISSING); feil = true; 

I tillegg er feilflagget satt til ekte og feildialogen vises. Figuren nedenfor viser feildialogen i vår Android 2.2-telefon:

Etter at brukeren har trykket på OK-knappen, vises brukeren skjema-siden med de manglende feltene uthevet, som vist nedenfor. På det bildet er orienteringen på telefonskjermen horisontal. Vær oppmerksom på at hver etikett og dens søskentekstfelt vises i en enkelt linje i motsetning til den vertikale retningen i figur 3 hvor etiketten ligger over tekstfeltet.

På den annen side, hvis validering er vellykket, viser vi overgangsinnholdet og sender skjemaet som omtalt nedenfor.

Sende skjemaet via Ajax

Skjemainnsendelsen bruker jQuery Mobile post funksjon som aksepterer tre argumenter:

 $ .post ("/ forms / requestProcessor.php", form1Var.serialize (), funksjon (data) ...);

• Det første argumentet er serverens nettadresse for å sende skjemaet til.
• Den andre er skjemainnholdet til å sende inn. For å få skjemainnholdet, ringer vi bare serialiserer () på jQuery-objektet ved å sende det til identifikatoren for vårt skjema.
• Det tredje argumentet er en in-line-funksjon for å behandle svaret, data, sendt tilbake fra serveren.

Legg merke til at post funksjonen utfører et Ajax-anrop som er asynkron av natur. Umiddelbart etter å ringe post, Programgjennomføringen fortsetter ved å returnere falsk fra sende inn funksjon og bruker vil begynne å se overgangsinnholdet.

In-line-funksjonen for å behandle svaret utføres bare når serveren returnerer svaret. For enkelhets skyld behandler serverprogrammet skjemadataene, requestProcessor.php, Returnerer et hardkodet krav-ID for brukeren å bruke til fremtidig referanse. Før du sender kravet ID requestProcessor.php, Det sover 4 sekunder for å etterligne serverens behandlingstid. Det er i denne perioden at søknaden viser overgangsinnholdet.

Når serverresponsen mottas, utføres hendelseshåndtererkoden. Det første trinnet er å fylle ut span tag kalt bekreftelse med verdien returnert fra serveren. Dette gjøres enkelt med:

 confirmationVar.text (data);

Deretter skjuler vi overgangsinnholdet og viser bekreftelsesinnholdet som inneholder span tag kalt bekreftelse:

 
 
Et nytt krav er opprettet basert på data du har sendt inn.
 
Ditt bekreftelsesnummer er:  
 

Bekreftelsessiden som vises i vår Android 2.2-telefon vises nedenfor (telefonens orientering er horisontal):

Den samme bekreftelsessiden vises på en iPod touch som følger (orienteringen er vertikal):

Implementere kildekoden

Kildekoden for opplæringen har en enkel mappestruktur. Alle ressurser lagres i en navngitt mappe skjemaer. I den mappen er det to undermapper, css og img. De css mappen inneholder colors.css, som har label.missing klasse, og img butikker wait.gif, spinneren bildet. De index.html og requestProcessor.php filer er direkte under skjemaer mappe. I testen brukte vi en Apache webserver med versjon 2.2.11 som kjører PHP versjon 5.3.0. Hvis du plasserer skjemaer mappe direkte under Document av webserveren, kan du få tilgang til programmet via http: // [your_host_name] /folder/index.html.

Konklusjon

I denne opplæringen presenterte vi grunnleggende konsepter fra jQuery Mobile rammeverk med fokus på sidestruktur, grunnleggende styling, formelementer og Ajax form innsending. Det ble introdusert en prøvekravbehandlingsapplikasjon for å demonstrere disse konseptene. Vi ga skjermbilder av ulike sider av applikasjonen som kjøres i en Android 2.2-telefon og en iPod touch-enhet med iOS 4.1. Noen observasjoner og avsluttende bemerkninger er gitt nedenfor:

• Siden jQuery Mobile er bygget på jQuery-kjernen, kan de som har forkunnskap til jQuery-rammen, komme opp til fart med jQuery Mobile-rammen lett.
• Rammets evne til å representere flere innholdssider på en enkelt HTML-side med innebygde funksjoner for å vise / skjule disse innholdssider, virket veldig praktisk å lage et skjemaprogram med forskjellige visninger avhengig av tilstand. For eksempel kan denne teknikken brukes til å implementere brukerveiledninger for veiviserstiler eller flersidige undersøkelsesskjemaer.
• Testet på desktop, Android 2.2 og iOS 4.1-plattformer, var både utseende og følelse og funksjonelle aspekter av prøveapplikasjonen konsistente. Under utviklingen skal det være mulig å raskt teste og feilsøke de viktigste aspektene av et jQuery Mobile-program på en stasjonær plattform. Deretter kan flere testing gjøres på de enkelte enhetene og nettleserne som programmet forventes å støtte.