Sie können mit jQuery einige wirklich nette Dinge erstellen. Das neueste Release-Bundle aktualisiert viele Fehler und sogar Hinweise zur Unterstützung eines neuen jQuery Mobile. Mit Frontend-Scripting können Sie praktisch jede Art von Webanwendung erstellen. Genauer gesagt werden wir uns mit dem Aufbau eines kleinen Modal-Box-Fensters beschäftigen.
Ich habe die Funktionalität so gestaltet, dass sie wie eine private Messaging-Lösung aussieht. Dies ist ideal für die Implementierung auf einer Benutzerprofilseite oder einer Autorenseite in einem Blog. Wir werden einige praktische CSS3-Techniken verwenden und die Seitenstruktur in HTML5 codieren. Sie müssen kein Meister von jQuery sein, um dieses Tutorial zu verstehen, aber es würde nicht schaden, die Grundlagen aufzufrischen. Schauen Sie sich mein Live-Demo-Beispiel an und laden Sie den Quellcode des Projekts herunter.
Versuch es
Live-Demo ansehen - Quelle herunterladen
Die HTML-Struktur
Bevor wir uns mit jQuery beschäftigen, untersuchen wir zunächst ein wenig HTML. Wenn Sie das gesamte Dokumentenlayout untersuchen möchten, empfehle ich das Herunterladen aus dem Quellcode. Ich möchte mich jedoch zur weiteren Erläuterung auf den Modal Box-HTML-Code konzentrieren.
Ich teile die Vorlage mit HTML5 auf .containmsg Das enthält unsere modale Box und Schaltfläche zum Anzeigen / Ausblenden des Inhalts. Der modale Container verwendet die Klasse .mainCompose. So zielen wir auch in jQuery ab - schauen wir uns den HTML-Code unten an.
** Geben Sie einen Text ein!
Nachricht senden
In unserem Formelement gibt es keine Überraschungen. Ein kleines Label- und Eingabemeldungsfeld. Auch ein an: Feld mit einem Link zur Benutzerseite. In dieser Demo habe ich auf meine DesignShack-Autorenseite verlinkt. Es ist jedoch nicht erforderlich. Sie können den Link sogar ganz entfernen und die CSS-Stile trotzdem beibehalten. Die Benutzerliste ist als UL-Element codiert, sodass Sie das Messaging für mehrere Personen unterstützen können.
Bevor wir uns nun mit jQuery beschäftigen, gibt es noch eine weitere Technik, die ich behandeln wollte. Wenn Sie auf das Erstellungssymbol klicken, werden Sie feststellen, dass unsere modale Box ganz oben mit einem kleinen Dreieck versehen ist. Sie können Bilder für diese Technik verwenden, es gibt jedoch eine einfachere Alternative, wenn Sie ausschließlich CSS verwenden.
Coole CSS-Tooltip-Dreiecke
Es gibt ein kleines div, das direkt über dem Nachrichtenformular angezeigt wird. Dieser enthält zwei Klassen CalloutUp und CalloutUp2. Ersteres verhält sich als Fortsetzung unserer äußeren Grenze (dunklere Bräune), während letzteres sich mit der Mitte unseres Formbereichs verbindet. Mit beiden können wir passende Dreiecke in einem Tooltip-Connector erstellen.
Dies funktioniert aufgrund einer Einstellung in CSS, bei der alle Ränder in der Mitte als Dreieck zusammenkommen. Wir können also beide divs so einstellen, dass sie keine Höhe oder Breite haben, sondern massive Ränder. Wenn wir nur einer der Ränder Farbe geben und der Rest transparent ist, erzeugen wir den hier gezeigten Dreieckseffekt. Checkt die CSS-Klassen für beide Callouts aus.
Ich setze auch Details für die umgebenden Grenzen ein, da der div-Block dadurch quadratisch wirkt. Andernfalls würde unsere Form rechteckig werden, und dann würden unsere Dreiecke mit gezackten Kanten hervorstehen. Das z-index Diese Eigenschaft ist auch wichtig, damit unsere innere Spitze über der äußeren Spitze bleibt. Die anderen Stile werden verwendet, um unsere Schriftarten im Demobeispiel zu simulieren, sicherlich nichts Außergewöhnliches.
Interaktionen mit jQuery entwickeln
Jetzt können wir in das Gute eintauchen! Wenn Sie jQuery bereits verwendet haben, sind Sie wahrscheinlich mit dem Starten eines neuen Dokuments vertraut. Fügen Sie zunächst die neueste Version von jQuery in Ihre Seite ein. Wenn Sie die Datei nicht selbst herunterladen und hosten möchten, bietet Google alle Versionen von jQuery live für Entwickler an. Die neueste, die ich verwende, ist die Bibliothek 1.6.2 mini.
Sobald dies enthalten ist, sollten Sie ein weiteres Skripttag für das JavaScript öffnen. Ich entschied mich dafür, meinen Code innerhalb des Headblocks derselben HTML-Seite zu schreiben. Sie können dies aber alternativ in den Körper, in die Fußzeile oder sogar in eine externe Datei verschieben. Die ersten Code-Ausschnitte, die ich unten hinzugefügt habe.
Wir nennen unsere $ (Dokument) .ready () Diese Funktion hält alle Aktionen an, bis die Seite vollständig geladen ist. Die erste Aufgabe besteht darin, 3 Seitenelemente sofort auszublenden. Diese sind .mainCompose unsere modale Box zu verstecken, .loader um das Ajax-Ladegif zu verbergen, und #errortxt Wird nur angezeigt, wenn der Benutzer nichts eingegeben hat und versucht, das Formular zu senden. Jedes dieser Elemente wird nur unter bestimmten Bedingungen angezeigt, daher sollten Sie sie sofort verborgen halten.
Und zum Schluss prüft unsere erste Scripting-Aktion nach einem Click-Event-Handler. Das .komponieren Die Klasse ist eigentlich an unser Bild zusammengesetzt, obwohl kein Anker-Link angeklickt werden muss. jQuery kann mit den Klickereignissen umgehen und slideToggle () aufrufen. Nun ist der letzte Code, der untersucht werden muss, wie Daten aus Benutzereingaben abgerufen werden können.
Bearbeitung des modalen Formulars
Wir prüfen nur noch einen finalen Event-Handler. Dies hängt mit dem Klickereignis von unserem zusammen .sendbtn, die eigentlich an einen Ankerlink in unserer modalen Box gebunden ist.Direkt daneben befindet sich unser animiertes ajax .gif-Bild, das direkt nach dem Laden der Seite ausgeblendet wurde.
Die Ausführungsfunktion direkt nach dem Klicken unseres Buttons verfügt jetzt über einen Parameter. Funktion (e) Übergibt einfach die Instanz unseres Klickereignisses als Variable direkt an die Funktion. Wir verwenden diesen Ereignisselektor, um die PrevDefault () -Methode aufzurufen, damit sich unser Link nicht als Link verhält. Wir verbergen auch sofort das .sendbtn und ersetzen es durch unser .loader-Image.
Als nächstes gehen wir in eine Standard-if / else-Klausel über, die die #mymsg Textfeldwert. Wenn dieser Text keinen Text enthält, wissen wir, dass der Benutzer nichts eingegeben hat. In diesem Fall zeigen wir unsere Fehlermeldung an und verstecken das Ladebild erneut, während der Button erneut angezeigt wird. Ansonsten geben wir das ein sonstiges {} Klausel, die voraussetzt, dass wir die Nachricht senden können!
Ich habe keinen Ajax / PHP-Code geschrieben, da er außerhalb des Bereichs dieses Tutorials springt. Sie sollten sich jedoch die jQuery-Funktion ajax () ansehen, die die Backend-Entwicklung um das Zehnfache beschleunigen kann. Ich habe eine Variable reserviert formQueryString die verwendet werden kann, um die Formulardaten an einen Ajax-Aufruf zu übergeben. Stattdessen werde ich die Ästhetik in einer kleinen Funktion beenden finalSend ();
Was wir jetzt tun möchten, ist, unsere modale Box zu schließen und ein kleines Häkchen-Symbol anzuzeigen, damit der Benutzer weiß, dass alles in Ordnung ist. Ich habe .delay () verwendet, um die modale Box für 1 Sekunde offen zu halten, bevor wir unsere letzte slideToggle () -Methode aufrufen. Dies wurde nur für das Erscheinen in diesem Lernprogramm hinzugefügt, sodass Sie sehen können, wie es aussieht, bis der Server geladen wird. Wenn Sie möchten, dass Ihre Benutzer noch eine Sekunde warten, können Sie dies lassen - aber es ist ansonsten wenig sinnvoll!
Nach der Folienanimation habe ich eine Rückruffunktion hinzugefügt. Es enthält nur 2 Zeilen Basiscode. Zuerst zielen wir auf das Kompositionssymbol und ändern seine Klasse ab .komponieren zu .geschicktdann verstecken Sie es aus der Sicht. Endlich zielen wir ab #composebtn Dies ist der Container div unseres Symbols und fügt ein neues Häkchen-Symbol hinzu. Jetzt wissen unsere Benutzer, dass die Nachricht gesendet wurde, und wir haben kaum einen Bildschirm verwendet.
Live-Demo ansehen - Quelle herunterladen
Fazit
Dieses Tutorial sollte Ihnen den Aufbau einer skalierbaren Modal-Box in jQuery etwas angenehmer gemacht haben. Wir haben einige großartige CSS-Stile erstellt und einige grundlegende Formularverarbeitungen verwendet, um die Benutzerinteraktion zu verbessern. Es gibt sicherlich eine Menge, die Sie hinzufügen können, aber unser Beispiel legt die Grundstruktur fest und ebnet den Weg für höhere Möglichkeiten.
Wenn Sie immer noch nach meiner Demo suchen oder den Quellcode herunterladen möchten, können Sie dies unten tun. Das Lesen von Code kann nach längerer Zeit verwirrend sein. Daher empfehle ich, die Quelle direkt herunterzuladen, um eine bessere Vorstellung von der Funktionsweise dieser kleinen App zu erhalten. Wenn Sie Fragen oder Ideen haben, können Sie diese ebenfalls im Diskussionsbereich anbieten.