Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Erstellen Sie ein unglaubliches Anmeldeformular mit jQuery

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Ein Kampf, der im Webdesign noch heute besteht, besteht darin, alle redundanten Informationen auf jeder Seite anzuzeigen. Zum Beispiel ein Anmeldeformular. Was wäre, wenn es eine Möglichkeit gäbe, den Inhalt auf jeder Seite leicht zugänglich zu machen, ihn aber bis zur Verwendung versteckt zu halten? Nun, Sie können ein oberes Bedienfeld erstellen, das beim Klicken sein Selbst und seinen Inhalt anzeigt. Aber wir müssen das schön aussehen lassen, damit wir es auch animieren.




In diesem Tutorial erstellen wir ein Schiebefeld, das hineingleitet, um mehr Inhalt zu enthüllen,
wobei JQuery verwendet wird, um die Höhe des Bedienfelds zu animieren. In diesem Fall werden wir
ein hypothetisches Login für den neuen Tutsplus-Bereich erstellen, der in Kürze verfügbar sein wird.


Schritt 1 - Photoshop-Layout

Zuerst müssen wir unser Layout planen und es mit Photoshop cool aussehen lassen. Vielen Dank
an Collis und seine erstaunlichen Photoshop-Fähigkeiten haben wir ein schickes Layout, mit dem wir arbeiten können.
Sie können die Vorher- und Nachher-PSD-Datei zur weiteren Überprüfung in der Quelle zip-Datei abrufen.
Aber es ist ziemlich selbstverständlich. Es hat also auch keine Farbverläufe,
also wir sollten in der Lage sein, dies ziemlich einfach nur mit CSS zu machen.

BeforeBeforeBefore width="600" height="400">

Hier können Sie sehen, wie die Demo im Normalzustand aussehen wird.

AfterAfterAfter width="600" height="400">

So sieht die Demo aus, wenn das Bedienfeld nach unten geschoben wird.


Schritt 2 - Planung der Struktur

Zunächst müssen wir die Struktur der Seite erstellen. Um das obige Layout zu erstellen,
Was brauchen wir alle strukturell im HTML?

  • Zunächst benötigen wir eine Kopfzeile, die sich über die gesamte Breite der Seite erstreckt.
  • Wir werden auch ein oberes Panel brauchen, das wir vorerst so tun, als wäre es permanent erweitert
    bis wir die JQuery einfügen.
  • Wir benötigen einen Bereich für den normalen Seiteninhalt.
  • Schließlich brauchen wir eine visuelle Pause zwischen dem Header und dem Seiteninhalt, die
    Wir werden durch ein horizontales Lineal (h) erreichen.
  • Okay, das Layout der Seite ist also ziemlich einfach. Hier ist es:

    Wow... ohne Klassen oder Inhalte sieht es aus wie viele sinnlose Divs,
    aber Für CSS und JQuery wird später jedoch alles erforderlich sein. Jetzt werden wir anfangen
    Klassen zur Vorbereitung auf das CSS hinzuzufügen.


    Schritt 3 - CSS-Vorbereitung: Klassen und IDs

    Jetzt müssen wir das Skelett mit CSS in eine tatsächliche Site verwandeln. Wir
    beginnen mit dem Hinzufügen von Klassen und IDs zu all diesen Divs! Sie können dies leicht tun
    indem Sie das Photoshop-Layout ausdrucken und dann die Bereiche und die zugehörigen Bereiche markieren
    Klassen mit einem Filzstift. Für diese Demonstration werde ich dasselbe nur in Photoshop tun.
    Obwohl es extrem hässlich sein mag, zeigt es Ihnen hoffentlich die verschiedenen Regionen
    der Seite.

    AreasAreasAreas width="600" height="400">

    Hinweis: Ich plane, das normale nicht hervorgehobene Bild beim Schweben zu haben.

    Hier ist die Seite mit den hinzugefügten Klassen und IDs:

    Im Moment würde ich Ihnen einen Screenshot von dem zeigen, was wir bisher haben, aber wir haben nichts außer
    einem horizontalen Lineal und zwei nicht gestalteten Links. Sie haben die Idee.
    Jetzt können wir die Seite stylen.


    Schritt 4 - Verknüpfen der Dateien

    Bevor wir jedoch weiter gehen, müssen wir die CSS-Datei in das Skelett einführen.
    Ich habe ein Stylesheet mit dem Titel "style.css" erstellt. Während wir Code
    zum Kopf hinzufügen, können wir auch Javascript und jQuery hinzufügen. Hier ist der
    Kopf der Seite:


    Schritt 5 - Styling des Skeletts: Header

    Jetzt müssen wir das Skelett der Divs stylen. Beginnen wir von oben nach unten. Zuerst
    müssen wir sowohl den Header als auch das Body-Tag formatieren:

    Zum Glück müssen wir uns hier keine Sorgen machen. Aber wir haben noch ein Hintergrundbild.
    Ich habe auch einen 1px-Rand am unteren Rand der Kopfzeile für eine visuelle Unterbrechung hinzugefügt.

    Das Hintergrundbild ist optional. Ich mochte die Bell Gothic BT-Schrift so sehr, dass ich mich entschied,
    daraus ein Bild zu machen. Alternativ können Sie auch nur einfachen Text
    durch Hinzufügen von Styling zu h1- und h2-Tags formatieren:

    Und dann ändern Sie den Header wie folgt:

    Jetzt sollte die Seite also so aussehen:

    Sie können Schritt 5 hier anzeigen.

    step 5step 5step 5 width="472" height="269">

    Schritt 6 - Gestalten des horizontalen Lineals

    Obwohl wir den unteren Rand der Kopfzeile haben, um die Abschnitte visuell zu trennen,
    brauchen wir auch einen dickeren visuellen Rand. Da können wir nicht zwei unten anwenden,
    um die Kopfzeile zu begrenzen, können wir einfach das horizontale Lineal (Std.) stilisieren:

    Wir haben jetzt eine dickere Trennung, die wir dem 1px-Rand hinzufügen können:

    step6step6step6 width="438" height="233">

    Sie können Schritt 6 hier anzeigen.


    Schritt 7 - Styling des Panels

    Jetzt müssen wir das Panel stilisieren. Bis wir die JQuery hinzufügen, werden wir
    das Panel stilisieren, wie es wurde erweitert. Wenn wir mit dem CSS fertig sind, gehen wir
    die Höhe des Panels auf Null zu animieren und dann wieder auf die volle Höhe zurückzukehren; also müssen wir
    sicherstellen, dass die Höhe beim Ändern gleich bleibt.

    Hier ist der CSS-Code, den ich später erläutern werde:

    step7step7step7 width="600" height="399" />

    Ok, das ist viel Code für eine Box. Nun, es ist mehr als das. Versuchen Sie
    es entweder mit Firefox Extension Firebug oder Web Developer zu inspizieren, und Sie werden sehen
    alles, was CSS tut.

    Sehen Sie sich an, wie Schritt 7
    derzeit aussieht.

  • Zunächst muss das Panel absolut positioniert werden, oder wenn es erweitert wird,
    der gesamte Inhalt darunter wird nach unten gedrückt. Also fügen wir einen Wrapper hinzu, der verpackt wird,
    um alles andere und dann zentriert. Wenn wir den Wrapper weggelassen haben, das Panel,
    was absolut positioniert ist, könnte nicht so leicht zentriert werden.
  • Als Nächstes fügen wir die Stilinformationen für das gesamte Topanel hinzu. Wie Sie sehen können, schließt dies
    die Bedienfeldtasten.
  • Danach fügen wir die Stilinformationen nur für das Bedienfeld hinzu, das normalerweise ausgeblendet ist. Dies
    ist die Box, die Sie jetzt erweitert sehen. Ich habe die Höhe 100% gemacht, damit wenn wir uns erhöhen
    oder verringern Sie die Höhe von #toppanel, dann ist die Höhe des #panels gleich.
    Außerdem ist der Überlauf ausgeblendet, sodass, wenn die Höhe des #toppanels verringert wird,
    der Inhalt des Panels wird abgeschnitten.
  • Wenn Sie den früheren HTML-Code untersuchen, sehen Sie das div mit der ID von panel_contents.
    Obwohl dieses div leer ist, können wir den Hintergrund noch transparent machen,
    halten Sie den Inhalt im Inneren undurchsichtig.

  • Schritt 8 - Hinzufügen von Inhalten zum Panel

    Bevor wir das Panel testen, müssen wir einige Inhalte hinzufügen, um zu sehen, ob sie es
    richtig verbergen. In diesem Beispiel erstellen wir einen Anmeldebereich, daher müssen wir ein Formular hinzufügen.
    und wir fügen auch ein Bild hinzu, um es auszugleichen. Dieser Schritt dient nur zum Hinzufügen von Inhalten
    für die Demo. Es ist weniger wichtig und grundlegender, daher werde ich es nicht als
    viel anderes erklären. Hier ist der Code:

    CSS:

    HTML:

    step8step8step8 width="600" height="409">

    Schritt 8 ist hier verfügbar.


    Schritt 9 - Testen Sie das CSS

    Wir müssen jetzt sicherstellen, dass, wenn wir jQuery verwenden, um die Höhe des oberen Bedienfelds zu animieren,
    es reibungslos funktioniert. Jetzt, wo wir Inhalt haben, werden wir die Höhe
    von #panel auf 200 ändern und sehen, was passiert:

    height="269">

    Wunderbar. Sie können Schritt 9 hier anzeigen.
    Jetzt werden wir es auf 0 ändern:

    step9step9step9 width="600" height="241">

    Perfekt. Jetzt wissen wir, dass das Design mit JQuery funktioniert.


    Schritt 10 - Stylen des Buttons

    Wenn Sie das fertige Produkt untersuchen, können Sie sehen, dass die Schaltfläche, die das Panel
    nach unten Panel, ändert sich, sobald Sie einmal darauf klicken. Dies bedeutet, dass es umschaltet. Daher benötigen wir
    zwei Schaltflächen, und wir werden ihre Sichtbarkeit umschalten. Bevor wir jedoch einen von ihnen ausblenden,
    müssen wir ihnen CSS hinzufügen.

    Wenn Sie sich erinnern, haben wir ihnen die Klasse ".panel_button" hinzugefügt. Hier ist der
    Stilinformationen. Ich werde es nachher erklären:

    101010 width="414" height="247">

    Schritt 10 Bedienfeldtasten

  • Zuerst zentrieren wir die Schaltfläche mit der Auto-Rand-Technik. Dann positionieren wir es
    und fügen einen Hintergrund der Schaltfläche hinzu. Wir fügen auch all diese Styling-Informationen hinzu
    um alle Einstellungen des verschiedenen Browsers zu berücksichtigen. Und lassen Sie die Schaltfläche
    anklickbar erscheinen, indem Sie den Cursor als Zeiger verwenden, wenn Sie den Mauszeiger darüber halten. Dies
    verbessert nur die Benutzerfreundlichkeit.
  • Wir werden den Text auch in einen Link einschließen, um einen On-Hover-Effekt sowie Positionierung
    zu erzielen.

  • Schritt 11 - Schaltfläche HTML

    In Vorbereitung auf die JQuery müssen wir nun die Schaltflächen mit ihrem HTML-Code einrichten.
    Zunächst fügen wir jeder Schaltfläche ein Bild hinzu und positionieren es mit CSS.
    Sie sehen den HTML-Code in einer Sekunde:

    Jetzt müssen wir auch die Schaltfläche Ausblenden vorerst ausblenden. So sehr ich es hasse, Inline-Styling,
    ich denke, es ist einfach einfacher, dieses CSS inline hinzuzufügen. Hier ist der neue HTML-Code für
    die Schaltflächen mit den Bildern:

    Ok, beachten Sie, dass die Schaltfläche zum Ausblenden jetzt im Inline-Stil ausgeblendet ist. Dies wird
    später mit jQuery umgeschaltet. Beachten Sie, dass ich der zweiten Schaltfläche auch eine ID hinzugefügt habe,
    damit wir sie später problemlos als Ziel festlegen können.

    111111 width="381" height="313">

    Schritt 11 Bedienfeldtaste


    Schritt 12 - Hinzufügen des Inhalts

    Dies ist ein schneller, aber notwendiger Schritt zum Hinzufügen von Inhalten. Ich schrieb einen Satz und fügte
    ein Absatz von Dummy-Text hinzu. Ich habe es mit der Auto-Margin-Technik zentriert und
    färbte es eine graue Farbe:

    121212 width="498" height="257">

    Sehen Sie den Text hinter dem Bedienfeld in Schritt 12.


    Schritt 13 - JQuery Time!

    Ok, jetzt zum letzten Teil des Tutorials, JQuery! Sie können die neueste JQuery
    bei jQuery.com herunterladen. Wenn Sie gerade erst damit anfangen, sollten Sie sich diesen anderen
    Nettuts-Tutorial von Jeffrey Way für großartige JQuery-Ressourcen ansehen. Ich habe schon
    eine Kopie von JQuery.com gepackt und haben sie bereits in Schritt 4 mit der Seite verknüpft.


    Schritt 14 - Überlegen Sie, was wir brauchen

    Überlegen wir uns zunächst, was die JQuery tun muss, bevor wir den Code schreiben.

  • Wir möchten die Animation beim Klicken auf 'div.panel_button' aktivieren.
  • Wir wollen dann die Höhe des Panels auf 400px animieren.
  • Wir wollen dann den Knopf umschalten.
  • Dann wollen wir die umgekehrte Animation beim Klicken auf 'div # hide_button' aktivieren.
  • Dann wollen wir die Höhe wieder auf 0px animieren

  • Schritt 15 - Schreiben Sie den Code

    Zunächst bereiten wir das Skript mit der folgenden JQuery vor:

    BeforeBeforeBefore width="600" height="300">

    Panel in Bewegung in Schritt 15.

    Wenn Sie den vorherigen Code untersuchen, fragen sich einige von Ihnen vielleicht zuerst, warum muss ich nur
    in der ersten Aktion umschalten. Nun, Sie müssen sich daran erinnern, dass die Schaltfläche
    auch eine Klasse von panel_button ausblenden hat. Wenn Sie daher auf "Ausblenden"-
    Schaltfläche klicken, Sie wenden tatsächlich beide Aktionen an.


    Schritt 16 - Die Animation "echt" aussehen lassen

    Jetzt sieht es ziemlich gut aus, aber wir können noch mehr tun, wie die Animation
    besser aussehen zu machen. Beim Animieren ist es normalerweise wichtig zu versuchen, das wirkliche Leben so gut wie möglich nachzuahmen.
    In diesem Fall stelle ich mir ein Beispiel aus dem wirklichen Leben vor, wie einen Pulldown-Projektionsbildschirm.
    Denken Sie daran, wenn Sie diese ziehen, ziehen Sie sie weiter nach unten als dann
    wird sein, dann geht es wieder ein wenig nach oben. Auf die gleiche Weise, wenn Sie es wieder hoch ausdrücken
    möchten, Sie ziehen es ein wenig runter, bevor es sehr schnell hoch geht.

    Versuchen wir das nachzuahmen:

    Beachten Sie, dass wir das Panel auf eine Höhe von 500 animieren, bevor wir auf 400 gehen. Wir haben auch
    einen Geschwindigkeitsunterschied wie im echten Leben hinzugefügt, indem wir bestimmte Teile langsamer gemacht haben.
    Wenn Sie sich die Demo ansehen, werden Sie feststellen, dass das Bedienfeld immer noch angezeigt wird, wenn Sie es
    500 zuerst ausblenden. Dies liegt wiederum daran, dass beide Schaltflächen dieselbe Klasse haben. Also wirklich wann
    Sie das Bedienfeld ausblenden, wird dieser Vorgang ausgeführt:

  • Auf 500 animieren und umschalten
  • Animieren Sie schnell auf 400 zurück
  • Animieren Sie schnell auf 0 zurück
  • Jetzt haben wir ein funktionierendes Sliding Panel mit JQuery. Ich hoffe, Sie fanden
    dieses Tutorial nützlich! Wenn ja, senden Sie es bitte an Digg, StumbleUpon, DZone usw.!

    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.