jQuery Mobile Framework - En formulärhandledning

Steg 1: Demo Application Page Structure

Vår demo ansökan består av en enda html-sida, index.html, som består av en behållarsida som visas nedan:

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

• Huvudinnehållet innehåller formuläret som ska fyllas i av användaren och har både en rubrik och en sidfot.
• Dialoginnehåll visas bara om ett obligatoriskt formulärfält saknas när formuläret skickas. Den består av en varning och en OK-knapp för att stänga dialogrutan. Observera att det inte har en rubrik eller sidfot.
• Övergångsinnehåll visas efter att formuläret har skickats tills svaret har tagits emot från servern. Den består av en "spinner" bild med kort text som informerar användaren att deras formulär skickas in. Övergångsinnehåll har inte heller en rubrik eller sidfot.
• Bekräftelsemeddelandet visas ett svar efter mottagning från servern. Det visar bekräftelsesnumret för användaren. Bekräftelseinnehållet har både en rubrik och en sidfot.

Innehållsövergångar visas i diagrammet nedan:

Ytterligare observationer på kodlistan ovan:

• De uppgifter-theme attributet tillåter oss att välja mellan tillgängliga stilar i jQuery Mobile-ramen:
  . Standardtemat har olika färgstämplar som heter a, b, c, d, e, var och en ger en konsekvent uppsättning färger för olika element på sidan. För vår ansökan valde vi den färg som motsvarade b.
• Headers kommer med en back-knapp. Vi behövde inte tillbaka knappar och valde därför att gömma dem via data nobackbtn = "true".
• Det är möjligt att ge viss text som ska visas i sidfoten mellan
  taggar. I vår ansökan slog vi bort text i sidfoten. Som ett resultat kommer användaren bara att se en tunn bar i samma sidfot som rubriken. Med texten kommer fotfoten att ha en liknande höjd som sidfoten med texten i den.

Formelement

Vårt fordringsformulär består av följande områden:

• Flera inmatning Fält av typtext: Fraktnummer, Förnamn, Efternamn, E-post, Telefon, Gatuadress, Ort och Postnummer. Alla är obligatoriska fält utom Telefon.
• en Välj element för staten. detta är ett obligatoriskt fält.
• en textarea element för att en användare ska ange information om den saknade eller skadade försändelsen. detta är ett obligatoriskt fält.

Låt oss till exempel titta på textfältet för leveransnummer:

 
 Fraktnummer *  

Vi använde a märka med en för attribut vars värde är detsamma som id av inmatning elementet i märka är kopplad till. Dessutom slingrade vi märka och inmatning i en div med data roll attribut värderat som fieldcontain. jQuery Mobile Framework kommer att använda fieldcontain attributvärde för special styling. Dessutom titta på name = "shipNo_r". För den här applikationen bestämde vi oss för att definiera värdet av namn attribut av något obligatoriskt formelement som är värdet av id attribut som bifogas av _r. Om elementet inte är nödvändigt, måste värdet av namn attributet kommer att vara detsamma som värdet av id attribut. Eftersom Telefon exempelvis inte är ett obligatoriskt fält definieras det som följer:

 
 Telefon  

Som vi kommer att se senare kommer den här speciella namngivningskonventionen att hjälpa oss att upptäcka saknade fält under formulärinsändning.

Ett annat anmärkningsvärt formelement är Välj element. Liknande ovanstående, värdet av för Attributet är detsamma som ID för Välj elementet i märka är kopplad till. Även märka och Välj är inslagna i a div med data roll ange värdet som fieldcontain. Med den långa listan över alternativ som vi har i den här applikationen öppnar jQuery Mobile-ramverket listan på en ny sida när användaren fokuserar på Välj element.

 
 Stat*  Vänligen välj ett tillstånd Alabama alaska Arizona...  

Formulärsidan som visas i en Android 2.2-telefon visas nedan. Användaren kommer att bläddra igenom sidan för att komma åt elementen i formuläret:

Samma blankett visas i en iPod touch som kör iOS 4.1:

Steg 2: Variabla definitioner

Vi hänvisar till olika delar på HTML-sidan i hela vår kod. Det är vettigt att definiera dessa referenser en gång och återanvända dem efter behov. Av denna anledning förklarar vi globalt använda variabler såväl som konstanter i huvud avsnitt av sidan:

Uppdrag av de variablerna görs i jQuery $ (Dokument) .ready () funktion med ID-selektorer, som visas nedan. (Minns det jQuery $ (Dokument) .ready () funktion kallas när hela DOM-hierarkin i sidan är laddad. Den funktionen är det bästa stället att initiera våra variabler.) Vi definierar också inputMapVar som en samling som består av alla inmatning element med _R i deras namn attribut (Funktionssamtalet $ ( 'Input [namn * = "_ r"]') väljer alla sådana element).

Steg 3: Innehållsval Funktioner

Låt oss nu titta på innehållsvalfunktionerna som kommer att ringas av händelsehanterare.

För att gömma och visa huvudinnehållet och dess rubrik / sidfot använder vi hideMain () och showMain () funktioner:

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

För att gömma och visa övergångsinnehåll använder vi hideContentTransition () och showContentTransition () funktioner:

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

För att gömma och visa dialoginnehållet använder vi hideContentDialog () och showContentDialog () funktioner:

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

Slutligen, för att dölja och visa bekräftelsemeddelandet och dess rubrik / sidfot använder vi hideConfirmation () och showConfirmation () funktioner:

 funktion hideConfirmation () hdrConfirmationVar.hide (); contentConfirmationVar.hide (); ftrConfirmationVar.hide ();  funktionskonfiguration () hdrConfirmationVar.show (); contentConfirmationVar.show (); ftrConfirmationVar.show (); 

När sidan är laddad ska endast huvudinnehållet visas. Av denna anledning är andra innehållssidor dolda:

Vi kommer att diskutera hur man sammanfogar dessa innehållsvalsfunktioner med händelsehanterare nedan.

Steg 4: Blankettinsändning

När en användare trycker på inmatningsknappen måste vi validera formulärdata innan vi skickar in formuläret. För att hålla sakerna enkla kontrollerar vi bara om alla obligatoriska fält har lämnats. Om formulärvalidering lyckas visar vi övergångsinnehållet som består av en spinnarbild med en kort text som informerar användaren om att deras formulär skickas in. Om validering misslyckas visar vi dialogrutans innehåll som består av en varning och en OK-knapp för att stänga dialogrutan.

Form validering

Etiketter på formulärelementen med saknade data markeras i rött. För detta ändamål lägger vi till en ny stilklass som heter missing och utökar jQuery Mobile märka klass.

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

Nedan är evenemangshanteraren för formulärinsändning. I typisk jQuery-notation, identifieraren för Form1 skickas till jQuery-objektsamtalet för att hantera inlämningsevenemanget:

 $ ('# form1'). Skicka (funktion ) var err = false; // Dölj huvudinnehåll hideMain (); // Återställ de tidigare markerade formulärelementen stateLabelVar.removeClass (MISSING); whatLabelVar.removeClass (MISSING) ; inputMapVar.each (funktion (index) $ (this) .prev (). removeClass (MISSING);); // Utför formvalideringsinmatningMapVar.each (funktion (index) if ($ (this) .val ) == null || $ (detta) .val () == TOM) $ (detta) .prev (). addClass (MISSING); err = true;), om (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; om (whatVar.val () == null || whatVar.val () == TOM) whatLabelVar.addClass (MISSING); err = true; / / Om valideringen misslyckas, visa Dialoginnehåll om (err == true) showContentDialog (); return false; // Om validering passerar, visa Övergång innehåll showContentTransition (); // Skicka formuläret $ .post ("/ formulär / requestProcessor.php ", form1Var.serialize (), funktion (data) confirmationVar.text (data); hideContentTransition (); showConfirmation ();); return false;);

Vi satte ett felflagga till falsk och gömma huvudinnehållet som innehåller formuläret. Vi nollställer sedan de tidigare markerade etiketterna på varje medlem i samlingen inputMapVar. För att göra det passerar vi en inline-funktion som ett argument till varje() som helt enkelt innehåller . $ (This) .prev () removeClass (saknas);. Anteckna det detta är den valda inmatning element och prev () returnerar sin omedelbara tidigare syskon som är märka associerad med det.

De stat för statligt urval och Vad för kravbeskrivning är inte textfält. Därför har motsvarande etiketter sina stilar återställda separat.

När alla tidigare markerade etiketter är nollställda återgår vi de nödvändiga inmatning element för att kontrollera om någon av dem har ett saknat värde. Om så är fallet lägger vi till den saknade klassen på etiketten som är associerad med inmatningsfältet:

 // Utför formvalideringsinmatningMapVar.each (funktion (index) om ($ (detta) .val () == null || $ (detta) .val () == Töm) $ (this) .prev .addClass (MISSING); err = true;); om (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true;  om (whatVar.val () == null || whatVar.val () == Töm) whatLabelVar.addClass (MISSING); err = true; 

Dessutom är felflaggan satt till sann och feldialogrutan visas. Figuren nedan visar feldialogrutan i vår Android 2.2-telefon:

När användaren har tryckt på OK-knappen visas användaren formulärsidan med de saknade fälten markerade, som visas nedan. I den bilden är orienteringen på telefonskärmen horisontell. Observera att varje etikett och dess syskon textfält visas i en enda linje i motsats till den vertikala orienteringen i Figur 3 där etiketten ligger ovanför textfältet.

Å andra sidan, om valideringen är framgångsrik visar vi övergångsinnehållet och skickar formuläret som diskuteras nedan.

Skicka in formuläret via Ajax

Formulärinsändningen använder jQuery Mobile posta funktion som accepterar tre argument:

 $ .post ("/ formulär / requestProcessor.php", form1Var.serialize (), funktion (data) ...);

• Det första argumentet är serverns URL att skicka formuläret till.
• Den andra är formulärinnehållet att skicka in. För att få formulärets innehåll, ringar vi helt enkelt serialisera () på jQuery-objektet genom att skicka den till identifieraren för vår blankett.
• Det tredje argumentet är en in-line-funktion för att bearbeta svaret, data, skickas tillbaka från servern.

Observera att posta funktionen utför ett Ajax-samtal som är asynkront av naturen. Omedelbart efter att ha ringt posta, programkörning fortsätter genom att returnera falskt från lämna funktionen och användaren börjar visa övergångsinnehållet.

In-line-funktionen för att bearbeta svaret utförs endast när servern returnerar sitt svar. För enkelhetens behandling bearbetar serverns ansökningsformuläret, requestProcessor.php, returnerar en hårdkodad fordran id för användaren att använda för framtida referens. Innan du skickar fordran id requestProcessor.php, Det sover 4 sekunder för att emulera serverens bearbetningstid. Det är under denna period att programmet visar övergångsinnehållet.

När serverns svar är mottagen, körs händelseshanterarkoden. Det första steget är att fylla i spänna taggen heter Bekräftelse med värdet som returneras från servern. Detta görs enkelt med:

 confirmationVar.text (data);

Därefter gömmer vi övergångsinnehållet och visar bekräftelseinnehållet som innehåller spänna taggen heter Bekräftelse:

 
 
En ny fordran har skapats baserat på data du har skickat.
 
Ditt bekräftelsesnummer är:  
 

Bekräftelsessidan som visas i vår Android 2.2-telefon visas nedan (telefonens riktning är horisontell):

Samma bekräftelsessida visas på en iPod touch enligt följande (orienteringen är vertikal):

Implementera källkoden

Källkoden för handledningen har en enkel mappstruktur. Alla resurser lagras i en mapp som heter former. I den mappen finns det två undermappar, css och img. De css mappen innehåller colors.css, som har label.missing klass och img butiker wait.gif, spinnarbilden. De index.html och requestProcessor.php filer är direkt under former mapp. I vår testning använde vi en Apache webbserver med version 2.2.11 som kör PHP version 5.3.0. Om du placerar former mapp direkt under Document på webbservern kan du komma åt programmet via http: // [your_host_name] /folder/index.html.

Slutsats

I denna handledning introducerade vi grundläggande koncept från jQuery Mobile-ramverket med fokus på sidestruktur, grundläggande styling, formulärelement och Ajax-formulärinsändning. Ett provkrav behandlingsansökan infördes för att visa dessa begrepp. Vi gav skärmdumpar av olika sidor av programmet som körs i en Android 2.2-telefon och en iPod touch-enhet med iOS 4.1. Några observationer och avslutande kommentarer ges nedan:

• Eftersom jQuery Mobile är uppbyggd på jQuery-kärnan kan de som har förkunskaper i jQuery-ramverket enkelt komma igång med jQuery Mobile-ramen.
• Möjligheten för ramverket att representera flera innehållssidor på en enda html-sida med inbyggda funktioner för att visa / dölja innehållssidorna verkade mycket bekvämt att skapa en formuläransökan med olika visningar beroende på tillstånd. Till exempel kan den här tekniken tillämpas för att implementera användarhandböcker för guiden "stil" eller flersidiga undersökningsformulär.
• Testade på skrivbord, Android 2.2 och iOS 4.1-plattformar var både utseendet och funktionen och funktionella aspekterna av provprogrammet konsekventa. Under utveckling bör det vara möjligt att snabbt testa och felsöka de viktigaste aspekterna av en jQuery Mobile-applikation på en stationär plattform. Då kan fler testning göras på de enskilda enheterna och webbläsarna som programmet förväntas stödja.