Ein allgemeiner Benutzeroberflächenstil für Apple und WordPress war das sich erweiternde Suchfeld. Wenn ein Benutzer zum Fokussieren klickt, wird das Feld breiter und kontrahiert, wenn der Benutzer die Scharfeinstellung vornimmt. Diese Technik ist populär geworden, weil sie Platz auf Ihrer Seite spart, wenn die Suche nicht verwendet wird. Es markiert aber auch das Suchfeld, wenn es angezeigt wird ist im Einsatz, was die Aufmerksamkeit des Benutzers auf sich zieht und ihm mitteilt, dass die Website reagiert.
In diesem Lernprogramm möchte ich zwei verschiedene Methoden zum Erstellen eines erweiterten Suchfelds demonstrieren. Der erste verwendet grundlegende CSS3-Übergänge, die nur in neueren Webbrowsern unterstützt werden. Dies funktioniert gut für einfache Designs, aber es gibt keine Möglichkeit zu überprüfen, ob der Benutzer Daten ausschließlich über CSS eingegeben hat. Im zweiten Feld werden wir JavaScript zum Erweitern verwenden und erst dann zurückschrumpfen, wenn der Benutzer keinen Text eingegeben hat. Es ist ein kleines, aber faszinierendes Stück UI, das sich gut in jedes Website-Projekt einfügen kann.
Live Demo - Quellcode herunterladen
Ein einfaches Formular erstellen
Ich möchte nicht, dass die Demo-Formulare tatsächlich etwas einreichen. Ich verwende JavaScript zum Stoppen des Submit-Ereignisses. Der einfache HTML-Code des Dokuments ist jedoch immer noch normal und ziemlich unkompliziert. Fühlen Sie sich frei, eine Kopie meiner Demo herunterzuladen, wenn Sie an einer lokalen Kopie des Tutorials arbeiten möchten.
Dieses Snippet enthält alle Header-Codes, die wir auf der HTML-Seite benötigen. Ich habe eine Kopie der jQuery-Bibliothek für schnelleres Scripting beigefügt. Mein benutzerdefiniertes JavaScript wird in einer externen Datei mit dem Namen gespeichert jsinput.js. Es enthält nichts zu komplexes, aber es lohnt sich zu verstehen, wie wir die verschiedenen Effekte mit CSS und JS vollenden. Hier sind die zwei Formulareingabebereiche mit ihren genauen HTML-Codes:
Die Suchfelder werden benannt #s und # s2 beziehungsweise. Ich habe eine ähnliche Namenskonvention mit den Formularelementen und den Submit-Buttons eingehalten. Das Lesen des CSS-Dokuments sollte wesentlich einfacher sein, da die Felder nach eindeutigen ID-Namen aufgeteilt sind. Aber zuerst können wir uns die CSS-Übergänge ansehen und dann zum dynamischen JavaScript-Feld gehen.
Erweiterung mit CSS-Übergängen
Meine Demo-CSS-Datei enthält eine Reihe von Resets sowie grundlegende Stile zum Erstellen der Layoutstruktur. Es ist nichts Ungewöhnliches, wenn Sie mit CSS vertraut sind. Ein Block, der meiner Meinung nach erwähnenswert ist, zielt jedoch auf den Platzhaltertext für verschiedene Eingabeelemente. Diese Selektoren werden nicht in allen Browsern unterstützt, wir können jedoch die Mehrheit der neueren Engines mit diesen Codes erhalten:
Es sieht viel schöner aus, typischen Eingabetext mit dem Rest Ihres Designs zu mischen. Die CSS-Eigenschaften für jedes Suchfeld ahmen einen ähnlichen Ton nach. Ich habe eine äußere Wrapper-Klasse .fieldcontainer das kapselt das Formular bei 100% Breite. Das bedeutet, dass das Formular niemals über den Seitencontainer hinaus erweitert wird, sodass wir 100% als Maximum verwenden können und alles andere relativ ist.
Die Übergangseigenschaften finden Sie ganz unten im .Suchfeld Klasse. Die allgemeinen CSS3-Eigenschafts- und Herstellerpräfixe sollten einen Großteil der Webbrowser abdecken. Wenn Sie jedoch Unterstützung für Rückwärtskompatibilität benötigen, führt die Verwendung einer strengen JavaScript-Methode zu besseren Ergebnissen. Dieser Code ist zwar zugegebenermaßen viel sauberer und einfacher zu organisieren.
Ein letztes Bit für den Sucheingabebereich legt die Platzierung für unser Suchsymbol fest. Dieser muss ganz am Ende des Eingabefeldes positioniert werden, das auf der rechten Seite auch etwas aufgefüllt wird. Auf diese Weise kann der Benutzer niemals Text eingeben, der über das Symbol der Suchschaltfläche schreibt. Die Originalquelle dieser Grafik stammt von Icon Finder von Brightmix. Das flache Icon-Set ist ideal für eine solche grundlegende Suchfeld-Eingabe.
Das größte Problem bei der Nur-CSS-Animation besteht in der Handhabung dynamischer Benutzerauswahlen. Wenn ein Besucher Text in das erweiterte Feld eingibt, kann er die Eingabetaste drücken oder auf die Lupe klicken. Wenn Sie auf Suchen klicken, wird der Fokus von der Eingabe entfernt und auf 45% reduziert, was auch das Klickereignis beeinträchtigt. Sie können die Übergangseigenschaften bearbeiten und sie auf dem fixieren :Fokus Zustand. Bei einer erneuten Verkleinerung gibt es jedoch keine Animation, sodass der Effekt noch schlimmer ist.
Umgang mit dynamischer Eingabe über jQuery
In meiner Beispieldemo ist das zweite Eingabefeld das einzige, auf das jQuery abzielt. Oben jsinput.js Ich habe zwei Variablen erstellt, die das zweite Eingabefeld und die Suchschaltfläche auswählen. Sie können diese Positionen ändern, wenn Sie lieber das erste Feld als Ziel verwenden möchten. Es kann jedoch auch sinnvoll sein, die CSS3-Übergänge zu entfernen und diese nur als Fallback-Methode zu verwenden, wenn JS im Browser deaktiviert ist.
Ich habe die Datei in zwei große Codeteile aufgeteilt. Diese erste Hälfte enthält die anfänglichen Variablen zusammen mit dem Fokusereignishandler. Wenn der Benutzer sich auf das zweite Eingabefeld konzentriert, müssen wir die Breite um 100% erweitern. Außerdem müssen wir das Suchsymbol von seiner Standardposition auf die rechte Seite verschieben. Die beiden jQuery.animate () - Methoden sollten zur gleichen Zeit ausgeführt werden, sodass ein sehr ähnlicher Animationseffekt wie bei CSS3-Übergängen entsteht.
Dann hat dieser letzte Block zwei weitere Ereignisse zum Binden. Das erste geschieht, nachdem der Benutzer das zweite Eingabefeld verwischt hat. Das Skript wird es testen search2.val () und bestimmen, ob der Benutzer Daten eingegeben hat. Wenn das Feld leer ist, animieren wir es wieder auf 45% Breite und das Symbol wird ebenfalls neu positioniert. Ansonsten hat der Benutzer einige Suchbegriffe eingegeben und wir lassen ihn auf 100% Breite.
Der zweite kleine Codeblock wird ausgelöst, sobald Sie versuchen, Daten für eines der Formulare zu übermitteln. Die Einreichung wird automatisch abgefangen und mit event.preventDefault () verhindert. Insgesamt sollte es kein komplexes Skript sein, aber Entwickler, die mit jQuery nicht vertraut sind, müssen möglicherweise ein paar Funktionen untersuchen. Die Codes sind außergewöhnlich klein und sollten in allen JS-fähigen Webbrowsern funktionieren.
Live Demo - Quellcode herunterladen
Fazit
Diese Schnittstelle erfordert nicht viel Planung oder zusätzlichen Code in Ihrem Entwurf. Auch wenn Sie für Ihre Website-Eingabefelder den gleichen Designstil beibehalten, können Sie diese Technik mit ein paar CSS3-Übergängen und einem äußeren Container ausführen.
Es ist auch möglich, dies in eine beliebige Anzahl ähnlicher Formulare wie Kontaktfelder oder Profileinstellungsseiten aufzunehmen. Laden Sie eine Kopie meines Demo-Quellcodes herunter und implementieren Sie diese Funktion in beliebig viele Projekte!