Apple ist eine sehr beliebte Marke im neuen technologischen Zeitalter, in dem wir leben. Sowohl Designer als auch Entwickler stimmen darin überein, dass die Produkte von Apple herausragende Talente und Leidenschaft für ihre Fähigkeiten aufweisen. Im Laufe der Zeit hat sich das Design von Benutzeroberflächen weiterentwickelt und ist heute eines der heißesten Themen unter den Webdesignern.
Im Folgenden werde ich überlegen, wie Sie ein kleines, von Apple gestaltetes Eingabeformular mit grundlegender Struktur und Skript erstellen. Der gesamte enthaltene Code basiert auf XHTML Transitional Doctype sowie auf neueren CSS2 / CSS3-Techniken. Wir werden auch die jQuery 1.4.1-Bibliothek verwenden, um unsere Display-Label-Funktionen zu unterstützen.
Versuch es
Hier ist ein kleiner Vorgeschmack auf das, was wir bauen werden. Schauen Sie sich die Demo-Seite an, um sie live zu sehen, und laden Sie sich das Beispiel für einen genaueren Blick herunter.
Live Demo - Herunterladen
Aufbau von HTML und CSS
Bevor wir mit der Entwicklung beginnen können, ist es wichtig, die Frontend-Code-Struktur in Ordnung zu bringen. Glücklicherweise ist dieser Prozess sehr einfach und sollte nicht lange dauern. Unten habe ich eine entfernte Kopie des HTML-Codes aus unserem Beispiel? Index.html? dokumentieren. Dies sollte alles Standardcode sein, um ein sehr einfaches Eingabeformular anzuzeigen, nichts weiter als das Wissen eines HTML-Entwicklers.
Hier habe ich 2 sehr wichtige Eingabeelemente unter den IDs? Unameblock? und "pwblock". Diese stehen für Benutzername Block und Passwortblockbzw. werden wir später in unserem Skript sehr wichtig sein. Nun, da unser Code gut aussieht, wäre es ratsam, in CSS-Stile zu springen.
Hierbei handelt es sich um die echten Regeln für die reine Knochenstruktur, da CSS allen HTML-Elementen ihre Form gibt. Es gibt nicht viele Änderungen, die wir berücksichtigen werden. Einige grundlegende Rücksetzungen für globale Variablen sowie Ausrichtung und Positionierung für Eingabefelder. Nachfolgend finden Sie Ausschnitte aus dem Quellcode, die in Bitintervallen erläutert werden.
Hier haben wir unser globales Reset mit der Sternchen (*) Selector entfernt alle Browser-Standard-Ränder und Füllungen. Wir geben auch dem Body-Element einige Stile für die Positionierung unserer Formularfront und -mitte. Die #c-Abteilung ist unser Container-Div, der für unsere Demo zentriert wurde.
Der erste sichtbare Block dient zur Gestaltung unserer Eingabefelder. Es zielt auf alle Eingabeelemente mit der Klasse? U1? die sowohl unseren Benutzernamen als auch unser Passwort ausführen. Anstatt 10-20 Stildeklarationen in einer einzigen Zeile zu platzieren, ist es für die Bearbeitung viel einfacher, diese auf Blockebene zu behalten.
Hier haben wir die Stile, um zu konfigurieren, wie unsere Eingabefelder aussehen. Padding, Schriftgröße, zwischen vielen Rändern und Eigenschaften für die Textbearbeitung. Wir verwenden hier viele neue CSS3-Techniken, die für alle CSS-Entwickler offensichtlich sein sollten.
Neue CSS3-Entitäten
Wir verwenden zwei brandneue CSS3-Funktionen -Webkit-Gradient und -moz-linearer Gradient die im laufenden Betrieb Farbverläufe erzeugen können. Dies ist eine erstaunliche Funktion, die in vielen CSS3-Artikeln nicht behandelt wurde. Dadurch werden keine Bilder mehr benötigt, um standardkonforme Hintergrundverläufe zu erstellen.
Wir haben auch -webkit-box-shadow und -Moz-Box-Schatten. Ähnliche Benennungsschemata helfen bei der Verwirrung zwischen Webkit-Browsern und Mozilla-basierten Gecko-Browsern.
Weiter unten haben wir drei weitere Stile, die den Submit-Button zusammen mit den Zuständen für unsere Eingabeformulare angreifen. Das :Fokus Pseudo-Targeting bedeutet, dass CSS unsere Stile nur dann anwendet, wenn der Benutzer sich auf eines der Eingabefelder konzentriert. Diese Stile zeigen ein blaues Licht für den Fokus und ein rotes Licht für Fehler an (sehr nützlich beim Debuggen von Benutzeranmeldungen und Registrierungsformularen).
Bisher sieht das alles gut aus! In der Tat müssen wir nur ein paar Skripte / Stile in den Header-Bereich einfügen, um wirklich mit unseren dynamischen Effekten zu beginnen. Wenn Sie das aktuelle Dokument verwenden und unser Stylesheet einfügen, können wir die Hover-Effekte sofort erhalten.
Mit jQuery-Effekten arbeiten
jQuery ist eine erstaunliche JavaScript-Bibliothek, die sich immer wieder als nützlich erwiesen hat. Ihr durchschnittlicher Webentwickler ist stark auf Geschwindigkeit und Präzision beim Scripting fokussiert. Dies ist etwas, das jQuery aufgreift und mit seinen Ideen verinnerlicht.
Unten ist ein kleiner Abschnitt, der zwischen dem hinzugefügt werden muss Kopf Tags Ihres Dokuments. Ich werde im Folgenden einige davon erläutern und in den Code hinter den Kulissen einsteigen.
Unsere style.css-Datei enthält alle oben aufgeführten CSS-Regeln. Eine weitere Einbeziehung ist tip-yellowsimple.css was noch nicht erwähnt wurde. Es ist ein Skript, das durch jQuery als Plug-In für Tooltip-Hover geschrieben wurde.Mit diesem Stylesheet (Download mit Demoquelle) können wir Tooltips für jede Aktion formatieren.
Unsere beiden JavaScript-Dateien sind wirklich einfach und selbsterklärend. Wir greifen auf jQuery 1.4.1 min zurück, um die Verarbeitungsgeschwindigkeit und die Downloadgeschwindigkeit zu reduzieren. Wir lesen auch die APIs-Codedatenbank von Google, in der alle vorherigen und aktiven Versionen gängiger Skripts gespeichert sind. Dies ist ein enormer Aufwand und trägt dazu bei, dass Entwicklungsprojekte voranschreiten, ohne dass die jQuery-Bibliothek ständig manuell heruntergeladen werden muss.
Die zweite Datei haben wir? Jquery.poshytip.js? enthält unseren Plug-In-Code. Poshytip ist eine jQuery-Klasse, die von Vasil Dinkov zur Unterstützung dynamischer Tooltips geschrieben wurde. Der Code ist umfangreich und es ist nicht notwendig, detailliert zu lernen. Wenn Sie jedoch ein Geizhals von jQuery sind, können Sie seine manuellen Bemühungen überprüfen, um zu sehen, wie diese Methoden aufgerufen werden und welche Variablen Sie bearbeiten können.
Grundlegender Aktionsaufruf
Jetzt brauchen wir nur noch unseren berüchtigten Aufruf zum Handeln! Dies ist unsere Hauptfunktion, die beim Laden des Dokuments geladen wird und sich auf das Signal vorbereitet, das wir aufrufen. In diesem Fall suchen wir nach einem Ereignis, das auftritt, wenn ein Benutzer sich auf eines der Eingabefelder konzentriert.
Ein letzter Schritt ist das Hinzufügen dieses Codes in den Kopf unter allen unseren Dateiinhalten. Dies ist ein reiner JavaScript-Code, der mit einem gekapselt werden sollte Skript Etikett. Zur Vereinfachung habe ich die Tags im folgenden Code entfernt, damit wir uns nur auf die js-Funktionalität konzentrieren können.
Was wir also nennen, ist ein generischer Name Funktion () {} um einige Ereignisse zu überprüfen. Wir erstellen 2 neue Instanzen von poshytip () Methode basierend auf unseren Eingabeformularen. Dies kann man sehen, wenn wir das DOM für die Element-IDs analysieren - Unameblock? und "pwblock".
Jede der individuellen Einstellungen erweitert die Funktionalität von Poshytip. Wenn Sie die Dokumentation für alle Methoden anzeigen möchten, gibt es eine großartige Sammlung, die Vasil online gestellt hat. Nämlich gezeigt bei ist unsere wichtigste Variable, die der Parsing-Engine mitteilt, in diesen beiden Elementen nach Fokusaktivität zu suchen.
AlignX und AlignY sind für die Platzierung wichtig. Diese enthalten die Werte, an denen der Tooltip auf der Seite angezeigt wird. Dies kann unten, in der Mitte, oben und zusammen mit versetzten Positionen wie innen links und rechts innen liegen. Versuchen Sie es mit diesen, wenn Sie die Tooltips lieber auf der Seite oder unten als an der Oberkante platzieren möchten.
Was Sie vielleicht noch nicht bemerkt haben, ist, woher unser Text geladen wird. Poshytips macht es auch hier einfach, wo unser Wert liegt Titel Attribut wird im Tooltip-Text angezeigt. Dies macht das Targeting auf bestimmte Elemente extrem einfach und sehr produktiv!
Fazit
Dies sind einige der grundlegendsten Schritte zum Erstellen eines Eingabefelds im Apple-Stil. Es gibt viele andere einzigartige Effekte, die mit jQuery angewendet werden können und nicht in diesem Tutorial enthalten sind. Schauen Sie sich einige Demos von der Apple-Website an, um mehr Inspiration zu erhalten. Wenn Sie das gesamte Demopaket herunterladen möchten, können Sie dies hier tun.