Erstellen Sie ein unglaubliches Anmeldeformular mit jQuery

() translation by (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.

width="600" height="400">

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

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:

<div></div>  <!--Header-->

<hr>  <!--Header Stripe-->


  <div>                  <!--Contains the button and panel-->
    <div>                <!--Contains the panel itself-->

      <div> This div will serve as the background of the panel</div>
    
    </div>
    <div><a>Login Here</a></div>  <!--Will be the button to slide the panel down-->

    <div><a>Hide</a></div>        <!--Toggles to this when the panel is slid down-->
  </div>
</div>


<div>

  All of the Content will go here
</div>

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.

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:


<div id="header">
</div>

<hr id="header_stripe"/>

<div id="wrapper">
  <div id="toppanel">

    <div id="panel">
      <div id="panel_contents"> </div>
    </div>
    <div class="panel_button"><a href="#">Login Here</a></div>

    <div class="panel_button"><a href="#">Hide</a></div>
  </div>
</div>
<div id="content">

</div>

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:

<head>
<title>Nettuts JQuery Sliding Panel</title>
<style type="text/css">
@import url(style.css);
</style>
<script src="jquery.js" type="text/javascript"></
<wbr>
    script> <script src="javascript.js" type="text/javascript"></<wbr>script>
</head>

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:

body {
    background: #202020;
    text-align: center;
    margin: 0px;
}

#header {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 135px;
    background: #3f3f3f url(images/header.png) no-repeat center ;
    position: relative;
    border-bottom: 1px solid #4a4a4a;
}

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:

#header h1{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
position: relative;
top: 30px;
font-size: 40px;
color: white;
}

#header h2{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #7e7e7e;
}

Und dann ändern Sie den Header wie folgt:

<div id="header">

  <h1>Sliding Panel</h1>
  <br />
  <h2>jQuery Sliding Panel Demonstration for NETTUTS</h2>
</div>

Jetzt sollte die Seite also so aussehen:

Sie können Schritt 5 hier anzeigen.

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:

hr#header_stripe{
height: 12px;
position: relative;
top: -7px;
background-color: #191919;
border: none;
color: #191919;

}

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

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:

#wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    text-align: center;
}
#toppanel {
    position: absolute;
    top: 135px;
    width: 900px;
    z-index: 25;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#panel {
    width: 900px;
    position: relative;
    top: 1px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    overflow: hidden;
    text-align: left;
}
#panel_contents {
    background: black;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    height: 100%;
    width: 904px;
    position: absolute;
    z-index: -1;
}

step7 step7 step7 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:

.border {
    border: 15px #1d1d1d solid;
}

img.border_pic {
    border: 15px #1d1d1d solid;
    position: absolute;
    top: 110px;
    float: left;
    margin-left: 150px;
    width: 250px;
    height: 150px;
    z-index: 30;
}
div#login {
    width: 240px;
    height: 150px;
    position: absolute;
    right: 150px;
    top: 110px;
    background: #46392f;
    text-align: left;
    padding-left: 10px;
}
div#login p {
    color: #CCCCCC;
    font-family: Century Gothic, Georgia, "Times New Roman", Times, serif;
    line-height: 25px;
}
div#login input#password {
    position: relative;
    right: -6px;
}
div#login input#login_btn {
    border: 1px #899690 solid;
    cursor: pointer;
    position: relative;
    top: 30px;
    left: 86px;
}

HTML:


      <img class="border_pic" src="images/tutsplus.jpg" alt="Screenshot" />
      <div class="border" id="login">

        <p>Username:
          <input type="text" size="15" name="username" id="username" />

          <br />
          Password:
          <input type="password" size="15" name="password" id="password" />

          <br />
          <input type="button" accesskey="l" id="login_btn" name="login" value="Login" />

        </p>
      </div>

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:

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:

.panel_button {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 1px;
    width: 173px;
    height: 54px;
    background: url(images/panel_button.png);
    z-index: 20;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    cursor: pointer;
}
.panel_button a {
    text-decoration: none;
    color: #545454;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: 5px;
    left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
color: #999999;
}

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:

.panel_button img{
position: relative;   
top: 10px;
border: none;
}

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:

    <div class="panel_button" style="display: visible;"><img src="images/expand.png"  alt="expand"/>
      <a href="#">Login Here</a>

      </div>
    <div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" />

      <a href="#">Hide</a>
      </div>

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.

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:

#content {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    position: relative;
    top: 90px;
    text-align: left;
    color: #545454;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-bottom: 30px;
}

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:

$(document).ready(function() {
});

Now we write the code that goes inside there:

$(document).ready(function() {
    $("div.panel_button").click(
<wbr>
        function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()<wbr>;
            }); $("div#hide_button").click(<wbr>function(){
        $("div#panel").animate({
            height: "0px"
        });
   });       
});

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:

$(document).ready(function() {
    $("div.panel_button").click(
<wbr>
        function(){ $("div#panel").animate({ height: "500px" }) .animate({
        height: "400px" }, "fast"); $("div.panel_button").toggle()<wbr>;
            }); $("div#hide_button").click(<wbr>function(){
        $("div#panel").animate({
            height: "0px"

        }, "fast"); 
      });       
});

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.!