Share
In diesem Tutorial betrachten wir eine der neuesten Komponenten von jQuery UI 1.8 - das Widget Autocomplete. Das Ausfüllen von Textfeldern kann bei Besuchern Ihrer Website eine beliebte Wahl sein, da sie die Eingabe von Informationen erheblich vereinfacht. Sie können beispielsweise für Produktsuchfelder verwendet werden, oder wenn ein Besucher ein Land, eine Stadt oder etwas anderes eingeben muss, das aus einem allgemeinen Datensatz ausgewählt werden kann. Die jQuery UI Autocomplete ist nicht nur bei Besuchern beliebt, sondern auch bei Entwicklern beliebt, da sie einfach zu bedienen, leistungsstark und flexibel ist.
Ich bin kein großer Fan von Facebook, ich bevorzuge Twitter (@danwellman btw), aber eine Facebook-Funktion, die ich mag, ist die Messaging-Funktion, mit der Sie eine Nachricht an einen Freund oder an Freunde senden können. Ich mag es, wie die Autovervollständigung verwendet wird, um die Auswahl der Namen Ihres Freundes zu vereinfachen, und wie die Namen formatiert werden, sobald sie ausgewählt und dem 'to'-Feld hinzugefügt wurden, z. Sie haben jeweils einen engen Link, sodass der Name leicht entfernt werden kann, ohne dass Text ausgewählt werden muss.
In diesem Lernprogramm verwenden wir das Widget für die automatische Vervollständigung der Benutzeroberfläche der jQuery-Benutzeroberfläche, um diesen Aspekt des Messaging-Systems von Facebook zu replizieren. Wir werden uns jedoch nicht mit dem Senden von Nachrichten befassen. Das ist, was wir schaffen werden:
Wir müssen einen benutzerdefinierten Download der jQuery-Benutzeroberfläche erstellen, der nur die benötigten Komponenten enthält. Besuchen Sie den Download Builder unter http://jqueryui.com/download. Wir müssen die folgenden Kernkomponenten verwenden:
Das Autocomplete-Widget selbst wird ebenfalls benötigt. Stellen Sie daher sicher, dass nur die obigen Elemente sowie Autocomplete im linken Bereich Komponenten markiert sind. Verwenden Sie das Standarddesign (UI Lightness) und stellen Sie sicher, dass die Version 1.8 rechts ausgewählt ist.
Erstellen Sie nach dem Herunterladen einen neuen Ordner auf Ihrem Computer und rufen Sie ihn an Autovervollständigung. Dann öffnen Sie das Archiv und kopieren das css und js Ordner in den neuen Ordner, den Sie gerade erstellt haben. Dadurch erhalten Sie alle Bibliotheksdateien, die für dieses Beispiel erforderlich sind, einschließlich jQuery selbst. Diese müssen nicht separat heruntergeladen werden.
Schauen wir uns den HTML-Code für die Zuerst:
Es ist eine ziemlich Standardform; Es gibt einen äußeren Behälter Wir müssen außerdem einen Link zu den Dateien erstellen, die wir aus dem jQuery-UI-Archiv entpackt haben, sowie ein benutzerdefiniertes Stylesheet. Die folgenden Dateien sollten in die der Seite: Die folgenden Dateien sollten am Ende von : In diesem Beispiel verwenden wir ein sehr einfaches, neutrales Thema, von dem die meisten nur als Beispiel dienen. Es werden nur sehr wenige Stile benötigt, die meisten können bei Bedarf geändert werden. Das folgende CSS wird im verwendet autocomplete.css Stylesheet (das gesamte Design der jQuery-Benutzeroberfläche befindet sich im jquery-ui-1.8.custom.css Stilvorlage): Um dem Formular einen schönen transparenten Rand mit abgerundeten Ecken zu geben, verwenden wir das CSS3 RGBa Regel und die -Moz-Rand-Radius, -Webkit-Grenzradius und Grenzradius Regeln; Die meisten gängigen Browser unterstützen diese Regeln jetzt, einschließlich Firefox, Safari, Chrome und Opera. Der IE unterstützt keine der beiden Möglichkeiten. Obwohl er einen Filter zum Implementieren von rudimentärer Deckkraft verwenden kann, müssen abgerundete Ecken durch die Verwendung von Bildern unterstützt werden. Die Wirksamkeit der RGBa Transparenz wird in diesem Beispiel nicht in vollem Umfang gezeigt. Diese Art von Formular würde jedoch wahrscheinlich als schwebende modale Überlagerung in einer vollständigen Implementierung verwendet, die über dem tatsächlichen Inhalt der Seite liegt. Der Kontainer Wir gestalten auch die Empfänger, die dem hinzugefügt werden Zu diesem Zeitpunkt sollte das Formular folgendermaßen aussehen: Als nächstes müssen wir das Autocomplete-Widget an das anhängen innerhalb des Das Widget ist an das angehängt Verwendung der Autovervollständigung () Methode. Wir liefern ein Objektliteral als Argument für die Methode, die das konfiguriert Quelle Option und die wählen und Veränderung Ereignisrückrufe. Das Quelle Mit dieser Option können Sie dem Widget mitteilen, woher die Vorschläge für das Autovervollständigen-Menü stammen. Wir verwenden eine Funktion als Wert dieser Option, die zwei Argumente akzeptiert. der erste ist der Begriff, der in das eingegeben wurde , Die zweite ist eine Rückruffunktion, mit der die Vorschläge an das Widget zurückgegeben werden. In dieser Funktion verwenden wir jQuery's getJSON () Methode, um den Begriff an eine serverseitige PHP-Datei zu übergeben. Die PHP-Datei verwendet den Begriff, um übereinstimmende Kontaktnamen aus einer MySql-Datenbank zu extrahieren. Wir verwenden einen JSONP-Callback, um die vom Server zurückgegebenen Daten zu verarbeiten. Die Rückruffunktion, die als zweites Argument an die source -Option übergeben wird, erwartet, dass sie die Daten in einem Array empfängt. Daher erstellen wir zuerst ein leeres Array und verwenden dann die von jQuery jeder() Methode zum Verarbeiten jedes Elements in dem vom Server zurückgegebenen JSON-Array. Wir durchlaufen einfach jedes Element in diesem Array und fügen jeden Vorschlag unserem neuen Array hinzu. Sobald unser neues Array erstellt ist, übergeben wir es an die Rückruffunktion, damit das Widget im Menü angezeigt wird. Dann definieren wir einen Handler für den Benutzerdefinierten Autocomplete wählen Veranstaltung; Diese Funktion wird vom Widget jedes Mal ausgeführt, wenn im Menü Autocomplete ein Vorschlag ausgewählt wird. Dieser Funktion werden automatisch zwei Argumente übergeben - das Ereignisobjekt und ein ui Objekt, das den ausgewählten Vorschlag enthält. Wir verwenden diese Funktion, um den Namen des Empfängers zu formatieren und ihn dem hinzuzufügen Zuletzt fügen wir einen Handler für die Veränderung Veranstaltung; Diese Funktion wird immer aufgerufen, wenn der Wert von dass der Autocomplete mit Änderungen verbunden ist. Wir verwenden es einfach, um den Wert aus dem zu entfernen weil wir die formatierte Version bereits in unseren Container aufgenommen haben Dies ist die gesamte Konfiguration, die wir für diese bestimmte Implementierung benötigen, aber es gibt noch ein paar zusätzliche Funktionen, die wir hinzufügen müssen, um die Dinge ein wenig zu verbessern. Nach dem Autovervollständigung () Methode füge folgenden Code hinzu: Das dass unser Autocomplete angeschlossen ist, ist teilweise verborgen und sein Container Wir müssen auch Klicks auf den Anker bearbeiten, der jedem formatierten Empfänger hinzugefügt wird. Wir verwenden jQuery's Leben() Diese Methode kann zu einem bestimmten Zeitpunkt auf der Seite vorhanden sein oder nicht, und es ist einfacher, die Handlerfunktion jedes Mal zu binden, wenn wir einen dieser Anker erstellen. Immer wenn einer dieser Anker angeklickt wird, navigieren wir zum übergeordneten Anker des Ankers, auf den geklickt wurde, und entfernen ihn dann von der Seite. Erinnern Sie sich noch daran, als wir die Position des Karat zuvor im Skript korrigiert haben? Wir müssen nur prüfen, ob alle Empfänger entfernt wurden, und falls ja, setzen Sie die Position auf die Standardeinstellung zurück. Ich habe eine MySql - Datenbank mit einer Tabelle mit den Empfängernamen und der folgenden PHP - Datei verwendet, um die vom getJSON () Methode und ziehen Sie passende Empfänger aus der Datenbank: Um die herunterladbaren Beispieldateien ausführen zu können, benötigen Sie einen Entwicklungs-Webserver, auf dem PHP installiert und konfiguriert ist, sowie MySql und die entsprechende Datenbank und Tabelle. Wenn ein Buchstabe in das Feld "to" eingegeben wird, wird dieser Brief an den Server übergeben und zum Herausnehmen jedes Namens verwendet, der mit dem eingegebenen Buchstaben beginnt. Die übereinstimmenden Namen werden dann als JSON an die Seite zurückgegeben und im Vorschlagsmenü angezeigt: In diesem Lernprogramm wurde gezeigt, wie Sie das Nachrichtenformular von Facebook replizieren können, insbesondere die Art und Weise, wie Freunde mithilfe von Autocomplete als Empfänger hinzugefügt werden, und wie die Freundesnamen nach dem Hinzufügen formatiert werden, damit sie problemlos entfernt werden können. Unser Beispielformular macht eigentlich nichts, aber um das Formular wirklich zu senden, müssten wir den Inhalt des Formulars an eine serverseitige Datei senden, um es mit AJAX zu senden, das leicht in das Submit eingebunden werden kann Ereignis der im Formular verwendeten Senden-Schaltfläche. Die Empfänger müssten natürlich eine Bedeutung für das Backend-System haben und würden wahrscheinlich E-Mail-Adressen in der Datenbank zugeordnet werden. Wir müssten den textuellen Inhalt von jedem abrufen Elemente vor der Weitergabe an den Server, obwohl dies eine ziemlich triviale Angelegenheit wäre. Mit dem Widget für die automatische Vervollständigung der jQuery-Benutzeroberfläche können Sie problemlos eine Verbindung zu einer beliebigen Datenquelle herstellen. Es enthält eine Vielzahl von Ereignisbehandlungsroutinen, an die wir Funktionen übergeben können, um auf das Eingeben von Text in das zugehörige Feld oder auf einen im Menü ausgewählten Vorschlag zu reagieren. Das Widget wurde mit dem umfangreichen CSS-Framework der jQuery-Benutzeroberfläche gestaltet und kann leicht so geändert werden, dass es Ihrem vorhandenen Websitedesign entspricht. Alles in allem ist es ein hervorragendes Widget, das einfach zu bedienen ist und großartige Funktionen bietet.
Schritt 3 Formular gestalten
#formWrap padding: 10px; Position: absolut; Schwimmer: links; Hintergrundfarbe: # 000; Hintergrund: rgba (0,0,0, 0,5); -moz-border-radius: 10px; -webkit-border-radius: 10px; Grenzradius: 10px; #messageForm width: 326px; Grenze: 1px fest # 666; Hintergrundfarbe: #eee; #messageForm fieldset padding: 0; Marge: 0; Position: relativ; Grenze: keine; Hintergrundfarbe: #eee; #messageForm Legende Sichtbarkeit: ausgeblendet; Höhe: 0; #messageForm span display: block; Breite: 326px; Polsterung: 10px 0; Marge: 0 0 20px; Text-Gedankenstrich: 20px; Hintergrundfarbe: #bbb; Rand unten: 1px fest # 333; Schriftart: 18px Georgia, Serif; Farbe: #fff; #friends width: 274px; Polsterung: 3px 3px 0; Marge: 0 auto; Grenze: 1px fest #aaa; Hintergrundfarbe: #fff; Cursor: Text; #messageForm #to width: 30px; Marge: 0 0 2px 0; Polsterung: 0 0 3px; Position: relativ; oben: 0; Schwimmer: links; Grenze: keine; #messageForm eingabe, #messageForm textarea display: block; Breite: 274px; Polsterung: 3px; Marge: 0 Auto 20px; Grenze: 1px fest #aaa; #messageForm label Anzeige: Block; Marge: 20px 0 3px; Text-Gedankenstrich: 22px; Schriftart: Fett 11px Verdana, Serifenlose; Farbe: # 666; #messageForm #toLabel margin-top: 0; #messageForm button float: right; Marge: 0 0 20px 0; #messageForm #cancel margin-right: 20px; #friends span display: block; Marge: 0 3px 3px 0; Polsterung: 3px 20px 4px 8px; Position: relativ; Schwimmer: links; Hintergrundfarbe: #eee; Grenze: 1px fest # 333; -moz-border-radius: 7px; -webkit-border-radius: 7px; Grenzradius: 7px; Farbe: # 333; Schrift: normal 11px Verdana, serifenlos; #friends umfassen eine Position: absolut; rechts: 8px; oben: 2px; Farbe: # 666; Schrift: fett 12px Verdana, serifenlos; Textdekoration: keine; #friends umfassen a: hover color: # ff0000; .ui-menu .ui-menu-item Leerraum: Nowrap; Auffüllen: 0 10px 0 0;
Schritt 4 Anbringen der Autovervollständigung
// Click-Handler zu Freunden hinzufügen div $ ("# friends"). click (function () // focus 'to' Feld $ ("# to"). focus ();); // Live-Handler für Klicks auf entfernte Links hinzufügen $ (". remove", document.getElementById ("friends")). live ("click", function () // aktuellen Freund entfernen $ (this) .parent () .remove (); // korrigiere die Position des Feldes "to" if ($ ("# friends span"). length === 0) $ ("# to"). css ("top", 0); );
Schritt 5 Zusätzlicher Code und Ressourcen
$ row ["name"]); // Echo JSON auf Seite $ response = $ _GET ["Rückruf"]. "(". json_encode ($ friends). ")"; Echo $ Antwort; mysql_close ($ server); ?> 
Accentsconagua