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.



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



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?
bis wir die JQuery einfügen.
Wir werden durch ein horizontales Lineal (h) erreichen.
Okay, das Layout der Seite ist also ziemlich einfach. Hier ist es:
1 |
<div></div> <!--Header--> |
2 |
|
3 |
<hr> <!--Header Stripe--> |
4 |
|
5 |
|
6 |
<div> <!--Contains the button and panel--> |
7 |
<div> <!--Contains the panel itself--> |
8 |
|
9 |
<div> This div will serve as the background of the panel</div> |
10 |
|
11 |
</div>
|
12 |
<div><a>Login Here</a></div> <!--Will be the button to slide the panel down--> |
13 |
|
14 |
<div><a>Hide</a></div> <!--Toggles to this when the panel is slid down--> |
15 |
</div>
|
16 |
</div>
|
17 |
|
18 |
|
19 |
<div>
|
20 |
|
21 |
All of the Content will go here |
22 |
</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.



Hinweis: Ich plane, das normale nicht hervorgehobene Bild beim Schweben zu haben.
Hier ist die Seite mit den hinzugefügten Klassen und IDs:
1 |
|
2 |
<div id="header"> |
3 |
</div>
|
4 |
|
5 |
<hr id="header_stripe"/> |
6 |
|
7 |
<div id="wrapper"> |
8 |
<div id="toppanel"> |
9 |
|
10 |
<div id="panel"> |
11 |
<div id="panel_contents"> </div> |
12 |
</div>
|
13 |
<div class="panel_button"><a href="#">Login Here</a></div> |
14 |
|
15 |
<div class="panel_button"><a href="#">Hide</a></div> |
16 |
</div>
|
17 |
</div>
|
18 |
<div id="content"> |
19 |
|
20 |
</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:
1 |
<head>
|
2 |
<title>Nettuts JQuery Sliding Panel</title> |
3 |
<style type="text/css"> |
4 |
@import url(style.css); |
5 |
</style>
|
6 |
<script src="jquery.js" type="text/javascript"></ |
7 |
<wbr> |
8 |
script> <script src="javascript.js" type="text/javascript"></<wbr>script> |
9 |
</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:
1 |
body { |
2 |
background: #202020; |
3 |
text-align: center; |
4 |
margin: 0px; |
5 |
}
|
6 |
|
7 |
#header { |
8 |
margin-left: auto; |
9 |
margin-right: auto; |
10 |
width: 100%; |
11 |
height: 135px; |
12 |
background: #3f3f3f url(images/header.png) no-repeat center ; |
13 |
position: relative; |
14 |
border-bottom: 1px solid #4a4a4a; |
15 |
}
|
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:
1 |
#header h1{ |
2 |
font-family: Arial, Helvetica, sans-serif; |
3 |
font-weight: bold; |
4 |
position: relative; |
5 |
top: 30px; |
6 |
font-size: 40px; |
7 |
color: white; |
8 |
}
|
9 |
|
10 |
#header h2{ |
11 |
font-family: Arial, Helvetica, sans-serif; |
12 |
font-weight: bold; |
13 |
font-size: 16px; |
14 |
color: #7e7e7e; |
15 |
}
|
Und dann ändern Sie den Header wie folgt:
1 |
<div id="header"> |
2 |
|
3 |
<h1>Sliding Panel</h1> |
4 |
<br /> |
5 |
<h2>jQuery Sliding Panel Demonstration for NETTUTS</h2> |
6 |
</div>
|
Jetzt sollte die Seite also so aussehen:
Sie können Schritt 5 hier anzeigen.



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:
1 |
hr#header_stripe{ |
2 |
height: 12px; |
3 |
position: relative; |
4 |
top: -7px; |
5 |
background-color: #191919; |
6 |
border: none; |
7 |
color: #191919; |
8 |
|
9 |
}
|
Wir haben jetzt eine dickere Trennung, die wir dem 1px-Rand hinzufügen können:



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:
1 |
#wrapper{ |
2 |
margin-left: auto; |
3 |
margin-right: auto; |
4 |
width: 900px; |
5 |
text-align: center; |
6 |
}
|
7 |
#toppanel { |
8 |
position: absolute; |
9 |
top: 135px; |
10 |
width: 900px; |
11 |
z-index: 25; |
12 |
text-align: center; |
13 |
margin-left: auto; |
14 |
margin-right: auto; |
15 |
}
|
16 |
#panel { |
17 |
width: 900px; |
18 |
position: relative; |
19 |
top: 1px; |
20 |
height: 400px; |
21 |
margin-left: auto; |
22 |
margin-right: auto; |
23 |
z-index: 10; |
24 |
overflow: hidden; |
25 |
text-align: left; |
26 |
}
|
27 |
#panel_contents { |
28 |
background: black; |
29 |
filter:alpha(opacity=70); |
30 |
-moz-opacity:0.70; |
31 |
-khtml-opacity: 0.70; |
32 |
opacity: 0.70; |
33 |
height: 100%; |
34 |
width: 904px; |
35 |
position: absolute; |
36 |
z-index: -1; |
37 |
}
|
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.
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.
die Bedienfeldtasten.
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.
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:
1 |
.border { |
2 |
border: 15px #1d1d1d solid; |
3 |
}
|
4 |
|
5 |
img.border_pic { |
6 |
border: 15px #1d1d1d solid; |
7 |
position: absolute; |
8 |
top: 110px; |
9 |
float: left; |
10 |
margin-left: 150px; |
11 |
width: 250px; |
12 |
height: 150px; |
13 |
z-index: 30; |
14 |
}
|
15 |
div#login { |
16 |
width: 240px; |
17 |
height: 150px; |
18 |
position: absolute; |
19 |
right: 150px; |
20 |
top: 110px; |
21 |
background: #46392f; |
22 |
text-align: left; |
23 |
padding-left: 10px; |
24 |
}
|
25 |
div#login p { |
26 |
color: #CCCCCC; |
27 |
font-family: Century Gothic, Georgia, "Times New Roman", Times, serif; |
28 |
line-height: 25px; |
29 |
}
|
30 |
div#login input#password { |
31 |
position: relative; |
32 |
right: -6px; |
33 |
}
|
34 |
div#login input#login_btn { |
35 |
border: 1px #899690 solid; |
36 |
cursor: pointer; |
37 |
position: relative; |
38 |
top: 30px; |
39 |
left: 86px; |
40 |
}
|
HTML:
1 |
|
2 |
<img class="border_pic" src="images/tutsplus.jpg" alt="Screenshot" /> |
3 |
<div class="border" id="login"> |
4 |
|
5 |
<p>Username:
|
6 |
<input type="text" size="15" name="username" id="username" /> |
7 |
|
8 |
<br /> |
9 |
Password: |
10 |
<input type="password" size="15" name="password" id="password" /> |
11 |
|
12 |
<br /> |
13 |
<input type="button" accesskey="l" id="login_btn" name="login" value="Login" /> |
14 |
|
15 |
</p>
|
16 |
</div>
|



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:



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



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:
1 |
.panel_button { |
2 |
margin-left: auto; |
3 |
margin-right: auto; |
4 |
position: relative; |
5 |
top: 1px; |
6 |
width: 173px; |
7 |
height: 54px; |
8 |
background: url(images/panel_button.png); |
9 |
z-index: 20; |
10 |
filter:alpha(opacity=70); |
11 |
-moz-opacity:0.70; |
12 |
-khtml-opacity: 0.70; |
13 |
opacity: 0.70; |
14 |
cursor: pointer; |
15 |
}
|
16 |
.panel_button a { |
17 |
text-decoration: none; |
18 |
color: #545454; |
19 |
font-size: 20px; |
20 |
font-weight: bold; |
21 |
position: relative; |
22 |
top: 5px; |
23 |
left: 10px; |
24 |
font-family: Arial, Helvetica, sans-serif; |
25 |
}
|
26 |
.panel_button a:hover { |
27 |
color: #999999; |
28 |
}
|



Schritt 10 Bedienfeldtasten
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.
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:
1 |
.panel_button img{ |
2 |
position: relative; |
3 |
top: 10px; |
4 |
border: none; |
5 |
}
|
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:
1 |
<div class="panel_button" style="display: visible;"><img src="images/expand.png" alt="expand"/> |
2 |
<a href="#">Login Here</a> |
3 |
|
4 |
</div>
|
5 |
<div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" /> |
6 |
|
7 |
<a href="#">Hide</a> |
8 |
</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.



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:
1 |
#content { |
2 |
margin-left: auto; |
3 |
margin-right: auto; |
4 |
width: 600px; |
5 |
position: relative; |
6 |
top: 90px; |
7 |
text-align: left; |
8 |
color: #545454; |
9 |
font-family: Arial, Helvetica, sans-serif; |
10 |
font-size: 12px; |
11 |
padding-bottom: 30px; |
12 |
}
|



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.
Schritt 15 - Schreiben Sie den Code
Zunächst bereiten wir das Skript mit der folgenden JQuery vor:
1 |
$(document).ready(function() { |
2 |
});
|
3 |
|
4 |
Now we write the code that goes inside there: |
5 |
|
6 |
$(document).ready(function() { |
7 |
$("div.panel_button").click( |
8 |
<wbr> |
9 |
function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle()<wbr>; |
10 |
}); $("div#hide_button").click(<wbr>function(){ |
11 |
$("div#panel").animate({ |
12 |
height: "0px" |
13 |
});
|
14 |
});
|
15 |
});
|



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:
1 |
$(document).ready(function() { |
2 |
$("div.panel_button").click( |
3 |
<wbr> |
4 |
function(){ $("div#panel").animate({ height: "500px" }) .animate({ |
5 |
height: "400px" }, "fast"); $("div.panel_button").toggle()<wbr>; |
6 |
}); $("div#hide_button").click(<wbr>function(){ |
7 |
$("div#panel").animate({ |
8 |
height: "0px" |
9 |
|
10 |
}, "fast"); |
11 |
});
|
12 |
});
|
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:
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.!