Digg ist eines der beliebtesten Social-News-Netzwerke. Sie haben ein riesiges Publikum unter den Millionen Mitgliedern. Kürzlich hat das Unternehmen mit der Einführung von Digg v4 eine neue Richtung eingeschlagen. Das gesamte System wurde durch neue Statistiken und Follower / folgende Netzwerke ersetzt.
Eine der bemerkenswertesten Änderungen betrifft die Seitenästhetik. Mit der Einführung von Digg verfügt v4 über ein brandneues Design mit einzigartigem Aussehen und Verhalten. In diesem Tutorial gehe ich durch, wie Sie Ihr eigenes Eingabeformular für Digg V4-Format erstellen können, indem Sie einige grundlegende CSS3-Eigenschaften verwenden.
Wir werden auch jQuery verwenden, um die einzelnen Schlüsselbereiche für einen effizienten Animationseffekt zu bearbeiten. Wir werden hier keine fantastischen Ajax-Aufrufe verwenden, obwohl jQuery diese Funktionalität unterstützt. Das Hauptformular, das wir verwenden werden, basiert auf Diggs aktueller Übergabeseite.
Live Demo - Herunterladen
Mit CSS3 und jQuery arbeiten
Da dies nicht unbedingt impliziert ist, ist für die Arbeit mit CSS3 nichts Besonderes erforderlich. Wir müssen keine externen Dateien oder Bibliotheken hinzufügen, da die meisten modernen Browser eine neuere Rendering-Engine unterstützen. jQuery muss in unserer Datei enthalten sein. Glück für uns Google Code hostet alle Versionen beliebter Skripts online.
Mit den Google-APIs-Dokumenten können wir mit jQuery 1.4.1 arbeiten. Ich habe die reduzierte Version hinzugefügt, um auf lange Sicht Bandbreite zu sparen (immer eine gute Idee für Produktionsumgebungen). Abgesehen davon brauchen wir auch unsere Kerndateien. Dazu gehören eine einfache index.html, global.css für Styles und script.js für unsere jQuery-Funktionalität.
Nackte Strukturen
Wir können zuerst mit unserem HTML-Code beginnen. Es sollte ziemlich unkompliziert sein, aber es schadet nicht, Dinge in Abschnitte aufzuteilen.
Dies ist der Hauptteil des HTML-Dokuments. Es enthält alle Metainformationen sowie einen XHTML-Übergangsdoktyp. Die einzigen Dateien, mit denen wir arbeiten, sind CSS und externer JavaScript-Code. Beide Dateien werden lokal gespeichert, während unsere jQuery-Karte über http://ajax.googleapis.com/ eingebunden ist.
Als Nächstes haben wir einige grundlegende Codes für unser Kernkörperlayout. Dies umfasst die Digg-Überschrift und den Logo-Teil der Seite. Dazu gehört auch unser kleines Formular mit wenigen Eingabetasten und Div-Boxen.
Digg es AbbrechenAls Nächstes sollte es einfach sein, einige der häufigsten CSS-Abfragen zu behandeln. Es gibt einige Eigenschaften und IDs, die beim Bearbeiten eines ähnlichen Stilskripts gut verstanden werden sollten. Außerdem haben wir einige CSS3-Eigenschaften verwendet, die in modernen Browsern neu sind.
Next Generation CSS
Unsere Datei beginnt mit dem Zurücksetzen von Rändern und Überschriften / Körperstilen. In Bezug auf Schriftarten, Blockbereiche oder andere allgemeine Elemente gibt es wirklich nicht viel. Da der Zweck unseres Codes vom Tutorial abhängt, habe ich mich nicht darum gekümmert, eine umfangreiche Liste von CSS-Eigenschaften zu erstellen.
Beachten Sie, wie es eine kleine Klasse namens "Sprite" gibt. Hierbei wird eine master.png-Datei verwendet, die alle Symbole und Grafiken für Diggs Layout enthält. Dies ist eine Spriting-Technik, mit der Bandbreite und Server-Aufrufe für Hintergrundgrafiken eingespart werden.
Weiter unten auf der Seite haben wir einige neuere Blöcke, die sich auf CSS3-Abfragen beziehen. Viele Eingabefelder und Schaltflächen des Formulars enthalten Effekte, die im Browser über CSS generiert werden. Als ein Beispiel haben alle Eingabetextfelder -webkit-box-shadow mit einem Inset-Fall gesetzt.
Dies erzeugt einen 3-D-Effekt, der anders ist als bisher. Die neuen Webstandards erzeugen eine schöne Tonalität und mit diesen CSS-Eigenschaften können wir erstaunliche Schnittstellen entwerfen.
Etwas niedriger haben wir einen Codeblock für einige Klassen. Vorlage-Detail-Feld und jetzt bearbeiten enthalten einige interessante Eigenschaften, die etwas weiter untersucht werden sollten. Zunächst hat der gesamte Inhalt einer Klasse, die sich gerade in Bearbeitung befindet, keine Anzeige. Dies wird mit jQuery geändert, um zu ändern, wie wir unsere Formulare verwenden sollen.
Übergabeformulare werden standardmäßig so eingestellt, dass sie wie Beschriftungen aussehen. Sobald Sie auf klicken, um sie zu bearbeiten, ändern wir die übergeordnete Divisionsklasse in jetzt bearbeitet und entfernen die Anzeige: keine; Klausel.Von hier aus können wir problemlos zwischen den beiden Zuständen wechseln.
Diese CSS-Stile können mit fast allem funktionieren. Sie werden sofort ein paar Fehler im System feststellen. Als kurzes Beispiel zeigen keine Schaltflächen oder Links im div einen Mauszeiger auf dem Hover. Stattdessen wird die Textleiste angezeigt, die zum Hervorheben von Textblöcken verwendet wird. Dies kann über die Cursor-Eigenschaft von CSS geändert werden.
Unser Skript bauen
Das erforderliche JavaScript ist relativ einfach zu handhaben. Glücklicherweise hilft jQuery, indem es viele Codezeilen abschneidet, die für das Targeting und die Bearbeitung von DOM-Objekten erforderlich sind.
Wir beginnen mit unserer standardmäßigen Ereignisprüfung, damit das Dokument vollständig geladen werden kann. Dies ist eine präzisere Methode für die gezielte Skriptentwicklung, da wir nur ein vollständig geladenes Dokumentobjektmodell benötigen, um in Bewegung zu kommen. Viele kleinere Assets auf der Seite werden weiterhin geladen, aber anstatt zu warten, ist unser Skript sofort ausführbar.
Innerhalb unserer Ready-Funktionsparameter übergeben wir eine neue Funktion() entworfen, um Ereignis-Hörer zu handhaben. Diese prüfen, ob ein bestimmtes Ereignis auftritt. Wenn dies der Fall ist, wird Code in einer neuen Funktion ausgeführt.
Dies wird mit einem Beispiel sinnvoller. Beginnen wir mit dem ersten Eingabefeld.
Die erste Zeile überprüft unser Dokument auf Elemente mit der Klasse "Edit-Input". und Binden eines Event-Handlers an ihn (oder sie). Das Ereignis, nach dem wir suchen, ist ein Klickereignis, dh wenn der Benutzer auf dieses Element klickt, rufen wir eine andere Funktion auf. In unserem HTML-Code .edit-Eingabe ist eine Klasse, die auf unsere Bearbeitungslinks angewendet wird.
Sobald die Funktion beginnt, ziehen wir den Klassennamen aus unserem übergeordneten Element. Wir greifen auch die aktuelle ID unseres Bearbeitungslinks an, da wir feststellen können, ob wir den Titel oder die Beschreibung der Story bearbeiten. Weiter unten haben wir Code, um die beiden Klassen auszutauschen, wodurch unser Textfeld bearbeitet werden kann.
Anschließend werden einige Codezeilen benötigt, um das Textfeld automatisch zu fokussieren und die Ergebnisse zu speichern. Wir hätten einen Ajax-Aufruf verwenden können, um die Daten mit jedem Klick in einer Datenbank zu speichern. Die Details dazu reichen jedoch über den Umfang dieses Tutorials hinaus. Wir benötigen auch Unterstützung von einer Backendsprache wie PHP oder Ruby.
Es gibt ein ähnliches Bindungsereignis, das an unsere beiden Formularfeldunterteilungen gebunden ist. Dies überprüft den Textbereich, der unsere Storybeschreibung enthält, und funktioniert auf ähnliche Weise wie oben. Beachten Sie, dass Sie auf diese Weise mehrere Ereignis-Listener verketten können, um dynamische Formularskripts innerhalb von Minuten zu erstellen.
Fazit
Dieses Tutorial bietet einen umfassenden Überblick über neuere CSS3-Techniken und die klassische jQuery-Funktionalität. Unser Endprodukt sieht dem Digg-Sendeformular sehr ähnlich, ohne Bilder von einer URL zu ziehen, für die Ajax-Techniken erforderlich sind.
Alle CSS-Stile und -Designs wurden in sehr ähnlicher Weise wie Digg v4 erstellt. Besser noch, viele der Codeblöcke wurden einfach in Ihre eigene Seite kopiert und bearbeitet.
Wie bereits erwähnt, habe ich sowohl den Live-Demo-Code aktualisiert als auch eine ZIP-Datei zum Download angeboten. Sie können meinen Digg-Demo-Code hier auf DesignShack auschecken und das Archiv für Ihre eigenen Werke herunterladen. Wenn Sie Fragen / Kommentare haben, können Sie Ihre Ideen im unten stehenden Diskussionsbereich anbieten.