jQuery Mobile Framework - Ein Formulartutorial

Schritt 1: Seitenstruktur der Demo-Anwendung

Unsere Demoanwendung besteht aus einer einzigen HTML-Seite, index.html, bestehend aus einer Containerseite wie unten gezeigt:

 
  
… 
 
… 
 
   
… 
   
… 
   
… 
 
… 
 
 … 

• Der Hauptinhalt enthält das vom Benutzer auszufüllende Formular und hat sowohl eine Kopf- als auch eine Fußzeile.
• Dialoginhalt wird nur angezeigt, wenn beim Senden des Formulars ein erforderliches Formularfeld fehlt. Es besteht aus einer Warnung und einer OK-Schaltfläche, um den Dialog zu schließen. Beachten Sie, dass es keine Kopf- oder Fußzeile hat.
• Der Übergabeinhalt wird angezeigt, nachdem das Formular gesendet wurde, bis die Antwort vom Server empfangen wird. Es besteht aus einem "Spinner" -Bild mit kurzem Text, der den Benutzer darüber informiert, dass sein Formular gesendet wird. Übergangsinhalt hat auch keine Kopf- oder Fußzeile.
• Der Inhalt der Bestätigung wird angezeigt, nachdem der Server eine Antwort erhalten hat. Es zeigt dem Benutzer die Bestätigungsnummer an. Bestätigungsinhalt hat sowohl eine Kopf- als auch eine Fußzeile.

Inhaltsübergänge sind in der folgenden Abbildung dargestellt:

Zusätzliche Anmerkungen zur obigen Codeliste:

• Das Daten-Thema Mit diesem Attribut können wir aus den verfügbaren Stilen im jQuery Mobile-Framework auswählen:
  . Das Standarddesign hat verschiedene Farbfelder a, b, c, d, e, Jeder stellt einen konsistenten Satz von Farben für verschiedene Elemente auf der Seite bereit. Für unsere Anwendung haben wir die entsprechende Farbe ausgewählt b.
• Header werden mit einem Zurück-Button geliefert. Wir brauchten keine hinteren Knöpfe und haben uns deshalb entschieden, sie über zu verstecken data-nobackbtn = "true".
• Es ist möglich, Text bereitzustellen, der in der Fußzeile zwischen angezeigt wird
  Stichworte. In unserer Anwendung haben wir Text in der Fußzeile weggelassen. Demzufolge sieht der Benutzer in der Fußzeile nur einen dünnen Balken, der genauso farbig ist wie die Kopfzeile. Bei Text hat die Fußzeile eine ähnliche Höhe wie die Fußzeile mit dem Text darin.

Formularelemente

Unser Anspruchsformular besteht aus folgenden Bereichen:

• Mehrere Eingang Textfelder des Typs: Versandnummer, Vorname, Nachname, E-Mail, Telefon, Straße, Ort und Postleitzahl. Alle sind Pflichtfelder außer Telefon.
• EIN wählen Element für State. Das ist ein Pflichtfeld.
• EIN Textbereich Element für einen Benutzer, um Informationen über die fehlende oder beschädigte Sendung einzugeben. Das ist ein Pflichtfeld.

Betrachten wir als Beispiel das Textfeld für die Versandnummer:

 
 Sendungsnummer*  

Wir haben a verwendet Etikette mit einer zum Attribut, dessen Wert mit dem gleich ist Ich würde des Eingang Element der Etikette hängt an. Außerdem haben wir die verpackt Etikette und Eingang in einem div mit Datenrolle Attribut als bewertet Feldinhalt. Das jQuery Mobile-Framework verwendet das Feldinhalt Attributwert für das spezielle Styling. Schauen Sie sich zusätzlich an name = "shipNo_r". Für diese spezielle Anwendung haben wir uns entschieden, den Wert von zu definieren Name Attribut eines beliebigen Formularelements als Wert von Ich würde Attribut angehängt von _r. Wenn das Element nicht erforderlich ist, wird der Wert von Name Das Attribut entspricht dem Wert von Ich würde Attribut. Da Phone beispielsweise kein Pflichtfeld ist, wird es wie folgt definiert:

 
 Telefon  

Wie wir später sehen werden, hilft uns diese spezielle Namenskonvention dabei, fehlende Felder während der Formularübermittlung zu erkennen.

Ein weiteres bemerkenswertes Formularelement ist das wählen Element. Ähnlich wie oben, der Wert von zum Attribut ist identisch mit der ID von wählen Element der Etikette hängt an. Auch die Etikette und wählen sind in einer verpackt div mit dem Datenrolle Attributwert als Feldinhalt. Mit der langen Liste von Optionen, die wir in dieser Anwendung haben, öffnet das jQuery Mobile-Framework die Liste auf einer neuen Seite, wenn sich der Benutzer auf die wählen Element.

 
 Zustand*  Bitte wählen Sie einen Staat aus Alabama Alaska Arizona…  

Die Formularseite, die in einem Android 2.2-Telefon angezeigt wird, ist unten dargestellt. Der Benutzer blättert durch die Seite, um auf die Elemente im Formular zuzugreifen:

Das gleiche Formular wird auf einem iPod touch mit iOS 4.1 angezeigt:

Schritt 2: Variablendefinitionen

Wir werden in unserem Code auf verschiedene Elemente der HTML-Seite verweisen. Es ist sinnvoll, diese Referenzen nur einmal zu definieren und bei Bedarf wiederzuverwenden. Aus diesem Grund deklarieren wir sowohl global verwendete Variablen als auch Konstanten im Kopf Abschnitt der Seite:

Zuweisungen dieser Variablen werden in jQuery vorgenommen $ (Dokument) .ready () Funktion mit ID-Selektoren, wie unten gezeigt. (Erinnere dich an jQuery $ (Dokument) .ready () Die Funktion wird aufgerufen, wenn die gesamte DOM-Hierarchie in der Seite geladen ist. Diese Funktion ist der beste Ort, um unsere Variablen zu initialisieren.) Wir definieren auch inputMapVar als eine Sammlung von allem Eingang Elemente mit _r in ihren Name Attribut (Der Funktionsaufruf $ ('input [name * = "_ r"]') wählt alle solche Elemente aus).

Schritt 3: Inhaltsauswahlfunktionen

Lassen Sie uns nun die Inhaltsauswahlfunktionen betrachten, die von Ereignishandlern aufgerufen werden.

Zum Ausblenden und Anzeigen des Hauptinhalts und seiner Kopf- / Fußzeile verwenden wir die hideMain () und showMain () Funktionen:

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

Zum Ausblenden und Anzeigen des Übergangsinhalts verwenden wir die hideContentTransition () und showContentTransition () Funktionen:

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

Zum Ausblenden und Anzeigen des Dialoginhalts verwenden wir die hideContentDialog () und showContentDialog () Funktionen:

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

Zum Ausblenden und Anzeigen des Bestätigungsinhalts und seiner Kopf- / Fußzeile verwenden wir schließlich die hideConfirmation () und showConfirmation () Funktionen:

 function hideConfirmation () hdrConfirmationVar.hide (); contentConfirmationVar.hide (); ftrConfirmationVar.hide ();  function showConfirmation () hdrConfirmationVar.show (); contentConfirmationVar.show (); ftrConfirmationVar.show (); 

Wenn die Seite geladen ist, sollte nur der Hauptinhalt angezeigt werden. Aus diesem Grund werden andere Inhaltsseiten ausgeblendet:

Wir werden besprechen, wie diese Inhaltsauswahlfunktionen mit den Ereignishandlern unten verknüpft werden können.

Schritt 4: Formular einreichen

Wenn ein Benutzer auf die Schaltfläche "Senden" klickt, müssen wir die Formulardaten vor dem Senden des Formulars überprüfen. Der Einfachheit halber prüfen wir nur, ob alle erforderlichen Felder angegeben wurden. Wenn die Formularvalidierung erfolgreich ist, zeigen wir den Übergangsinhalt an, der aus einem Spinner-Bild mit einem kurzen Text besteht, der den Benutzer darüber informiert, dass sein Formular gesendet wird. Wenn die Überprüfung fehlschlägt, wird der Dialoginhalt angezeigt, der aus einer Warnung und einer OK-Schaltfläche besteht, um den Dialog zu schließen.

Formularvalidierung

Beschriftungen der Formularelemente mit fehlenden Daten werden rot hervorgehoben. Zu diesem Zweck fügen wir eine neue Stilklasse hinzu, die den Namen missing enthält und die jQuery Mobile-Erweiterung erweitert Etikette Klasse.

 label.missing color: # FF0000; Schriftdicke: fett; 

Unten ist der Event-Handler für die Formularübermittlung. In der typischen jQuery-Notation der Bezeichner für Form 1 wird an den jQuery-Objektaufruf übergeben, um das Submit-Ereignis zu behandeln:

 $ ('# form1'). submit (function () var err = false; // Den Hauptinhalt ausblenden hideMain (); // Die zuvor hervorgehobenen Formularelemente zurücksetzen stateLabelVar.removeClass (MISSING); whatLabelVar.removeClass (MISSING) ; inputMapVar.each (function (index) $ (this) .prev (). removeClass (MISSING);); // Formularvalidierung durchführen inputMapVar.each (function (index) if ($ (this) .val ( ) == null || $ (this) .val () == EMPTY) $ (this) .prev (). addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true; / / Wenn die Validierung fehlschlägt, zeigen Sie den Dialoginhalt an, wenn (err == true) showContentDialog (); false zurückgibt. // Wenn die Validierung erfolgreich ist, zeigen Sie den Transition-Inhalt an. ShowContentTransition (); // Senden Sie das Formular $ .post ("/ forms / requestProcessor.php ", form1Var.serialize (), function (data) confirmVar.text (data); hideContentTransition (); showConfirmation ();); return false;);

Wir setzen ein Fehlerflag auf falsch und blenden Sie den Hauptinhalt aus, der das Formular enthält. Wir setzen dann die zuvor hervorgehobenen Beschriftungen der einzelnen Mitglieder der Sammlung zurück inputMapVar. Dazu übergeben wir eine Inline-Funktion als Argument an jeder() das enthält einfach $ (this) .prev (). removeClass (MISSING);. Beachten Sie, dass diese ist das ausgewählte Eingang Element und prev () gibt sein unmittelbares vorheriges Geschwister zurück, welches das ist Etikette mit ihr verbundenen.

Das Zustand zur Zustandsauswahl und Was Bei der Beschreibung der Ansprüche handelt es sich nicht um Textfelder. Daher werden die Stile der entsprechenden Beschriftungen separat zurückgesetzt.

Nachdem alle zuvor markierten Beschriftungen zurückgesetzt wurden, besuchen wir die erforderlichen Etiketten erneut Eingang Elemente, um zu überprüfen, ob einer von ihnen einen fehlenden Wert hat. Wenn dies der Fall ist, fügen wir der mit dem Eingabefeld verknüpften Bezeichnung die fehlende Klasse hinzu:

 // Formularvalidierung durchführen inputMapVar.each (Funktion (Index) if ($ (this) .val () == null || $ (this) .val () == EMPTY) $ (this) .prev () .addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = wahr;  if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = wahr; 

Zusätzlich wird das Fehlerflag auf true gesetzt und der Fehlerdialog angezeigt. Die folgende Abbildung zeigt den Fehlerdialog in unserem Android 2.2-Telefon:

Nachdem der Benutzer die OK-Taste gedrückt hat, wird dem Benutzer die Formularseite mit den fehlenden Feldern angezeigt (siehe unten). In diesem Bild ist der Bildschirm des Telefons horizontal ausgerichtet. Beachten Sie, dass jedes Label und sein gleichgeordnetes Textfeld in einer einzelnen Zeile angezeigt werden, im Gegensatz zur vertikalen Ausrichtung in Abbildung 3, in der sich das Label über dem Textfeld befindet.

Wenn die Validierung jedoch erfolgreich ist, zeigen wir den Übergangsinhalt und senden das Formular wie unten beschrieben ab.

Übermittlung des Formulars über Ajax

Die Formularübermittlung verwendet jQuery Mobile Post Funktion, die drei Argumente akzeptiert:

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

• Das erste Argument ist die Server-URL, an die das Formular gesendet werden soll.
• Der zweite ist der Formularinhalt, der eingereicht werden soll. Um den Formularinhalt zu erhalten, rufen wir einfach an serialisieren () im jQuery-Objekt, indem Sie die Kennung für unser Formular übergeben.
• Das dritte Argument ist eine Inline-Funktion zur Verarbeitung der Antwort, Daten, vom Server zurückgeschickt.

Notiere dass der Post Die Funktion führt einen Ajax-Aufruf aus, der von Natur aus asynchron ist. Gleich nach dem Anruf Post, Die Programmausführung wird durch die Rückgabe von false fortgesetzt einreichen Funktion und Benutzer werden den Transition-Inhalt sehen.

Die Inline-Funktion zur Verarbeitung der Antwort wird nur ausgeführt, wenn der Server seine Antwort zurückgibt. Zur Vereinfachung verarbeitet die Serveranwendung die Formulardaten, requestProcessor.php, gibt eine hart codierte Anspruchs-ID zurück, die der Benutzer zur späteren Verwendung verwenden kann. Vor dem Senden der Anspruchs-ID requestProcessor.php, Es schläft 4 Sekunden, um die Server-Verarbeitungszeit zu emulieren. In diesem Zeitraum zeigt die Anwendung den Übergangsinhalt an.

Wenn die Serverantwort empfangen wird, wird der Ereignishandlercode ausgeführt. Der erste Schritt ist das Auffüllen der Spanne Tag benannt Bestätigung mit dem vom Server zurückgegebenen Wert. Dies geschieht einfach mit:

 ConfirmationVar.text (Daten);

Dann blenden wir den Übergangsinhalt aus und zeigen den Bestätigungsinhalt an, der den enthält Spanne Tag benannt Bestätigung:

 
 
Auf der Grundlage der von Ihnen übermittelten Daten wurde ein neuer Anspruch erstellt.
 
Ihre Bestätigungsnummer lautet:  
 

Die Bestätigungsseite, die in unserem Android 2.2-Telefon angezeigt wird, wird unten angezeigt (die Ausrichtung des Telefons ist horizontal):

Die gleiche Bestätigungsseite wird auf einem iPod touch wie folgt angezeigt (Ausrichtung ist vertikal):

Bereitstellen des Quellcodes

Der Quellcode für das Lernprogramm hat eine einfache Ordnerstruktur. Alle Ressourcen werden in einem Ordner mit dem Namen gespeichert Formen. In diesem Ordner befinden sich zwei Unterordner, css und img. Das css Ordner enthält colors.css, was hat die label.missing Klasse und img Shops wait.gif, das Spinnerbild. Das index.html und requestProcessor.php Dateien sind direkt unter Formen Mappe. In unseren Tests haben wir einen Apache-Webserver mit Version 2.2.11 verwendet, auf dem PHP Version 5.3.0 ausgeführt wird. Wenn Sie das platzieren Formen Ordner direkt unter dem Dokument Root Sie können über den Webserver auf die Anwendung zugreifen http: // [Ihr_Hostname] /folder/index.html.

Fazit

In diesem Tutorial haben wir grundlegende Konzepte aus dem jQuery Mobile-Framework mit den Schwerpunkten Seitenstruktur, grundlegendes Styling, Formularelemente und Ajax-Formularübergabe vorgestellt. Eine Beispielanwendung zur Bearbeitung von Ansprüchen wurde eingeführt, um diese Konzepte zu veranschaulichen. Wir haben Screenshots von verschiedenen Seiten der Anwendung bereitgestellt, die auf einem Android 2.2-Telefon und einem iPod touch-Gerät mit iOS 4.1 ausgeführt werden. Einige Bemerkungen und Schlussbemerkungen sind unten aufgeführt:

• Da jQuery Mobile auf jQuery Core basiert, können Benutzer, die bereits über Kenntnisse des jQuery-Frameworks verfügen, das jQuery Mobile-Framework problemlos nutzen.
• Die Fähigkeit des Frameworks, mehrere Inhaltsseiten in einer einzigen HTML-Seite mit integrierten Funktionen zum Anzeigen / Ausblenden dieser Inhaltsseiten darzustellen, schien sehr praktisch zu sein, um eine Formularanwendung mit verschiedenen Ansichten zu erstellen, die je nach Status unterschiedliche Ansichten haben. Diese Technik kann beispielsweise angewendet werden, um Benutzerhandbücher oder mehrseitige Umfrageformulare im Assistentenstil zu implementieren.
• Getestet auf Desktop-, Android 2.2- und iOS 4.1-Plattformen waren sowohl das Erscheinungsbild als auch die funktionalen Aspekte der Beispielanwendung konsistent. Während der Entwicklung sollte es möglich sein, die Hauptaspekte einer jQuery Mobile-Anwendung auf einer Desktop-Plattform schnell zu testen und zu debuggen. Auf den einzelnen Geräten und Browsern, die die Anwendung unterstützen soll, können dann weitere Tests durchgeführt werden.