Tutorials
[ Zurück ]


Aufklappbare Login-Box mit rückkehrendem Login-Scr


Im Folgenden erkläre ich, wie ihr eine simple, aufklappbare Loginbox mit Login-Script, das den User zur angesehenen Seite zurückbringt, erstellt.

Als erstes benötigt man hierzu zwei simple Javascript-Funktionen:
function show(id) {
id.style.visibility = 'visible' }
        
function hide(id) {
id.style.visibility = 'hidden' }
Wie der Name schon verraten sollte, zeigen bzw. verbergen diese Funktionen bestimmte Elemente, wobei die Variable id deren id angibt.

Als Nächstes benötigen wir narürlich auch eine Schaltfläche, die die Loginbox letztendlich zum Vorschein bringt. Diese wird in einen beliebigen div-Container mit relativer Positionierung eingebunden, der Grund hierfür später.
<div style="position:relative">
<span onClick="show(loginbox)" class="link">[Einloggen]</span>
</div>
Anstatt einem <span> könnten wir hier auch jedes andere Element verwenden, beispielsweise einen Button oder ein Bild. Wichtig ist lediglich, dass das Element mit onClick kompatibel und versehen ist. Die zugewiesene Klasse "link" dient hier nur einigen optischen Einstellungen, die den Text wie einen Link wirken lassen, was beispielsweise so aussehen kann:
span.link { color:#6DFFCC; text-decoration:none; }
span.link:visited { color:#3EEFB1; text-decoration:none; }
span.link:focus { color:#D8FFF0; text-decoration:underline; }
span.link:hover { color:#D8FFF0; text-decoration:underline;cursor:pointer; }
span.link:active { color:#19FFAE; text-decoration:underline; }
Damit wäre der Link zu der Loginbox bereits fertig, nun ergänzen wir den HTML-Teil um die eigentliche box mit dem Loginformular und zwei weiteren Javascript-Funktionen, die den Mauszeiger zu einer Hand wandeln (pointer()) bzw. dies rückgängig machen (returncursor())
function returncursor() {
document.body.style.cursor = 'default'; }
   
function pointer() {
document.body.style.cursor = 'pointer'; }
<div style="position:relative">
<span onClick="show(loginbox)" class="link">[Einloggen]</span>
  <div id="loginbox">
    <form method="post" action="login.php">
    <table>
      <tr>
        <td colspan="2">
        </td>
        <td onClick="hide(loginbox);" onMouseOver="pointer();" onMouseOut="returncursor();">
          x
        </td>
      </tr>
      <tr>
        <td>
          Username
        </td>
        <td>
          <input type="Text" name="user">
        </td>
        <td></td>
      </tr>
      <tr>
        <td>
          Passwort
        </td>
        <td>
          <input type="password" name="passwort">
        </td>
        <td></td>
      </tr>
      <tr>
        <td>
        </td>
        <td>
          <input class="button" type="submit" value="Einloggen">
          </form>
        </td>
        <td>
        </td>
     </tr>
   </table>
  </div>
</div>
Der HTML-Teil sieht zwar nach viel aus, aber im Grunde genommen ist er lediglich eine blinde Tabelle mit einigen Textfeldern und oben  rechts in der Ecke einem x, das die Loginbox schließt, wenn man es anklickt (siehe onClick="hide(loginbox)")

Natürlich braucht auch unsere Loginbox noch ein Aussehen, vor allem muss visibility auf hide gesetzt werden, da die Box sonst beim Laden erscheinen würde. Das Ganze könnte so aussehen:
#loginbox {
 position:absolute;
 top:49px;right:-20px;
 background-color:#376D91;
 border:2px solid #2B5672;
 visibility:hidden;
 padding-left:5px;
 padding-right:5px;
 z-index:2;
}
Hier ist auch der Grund verborgen, warum wir den ersten div-Container auf position:relative gesetzt haben: Dadurch orientiert sich nämlich nun wegen position:absolute die Loginbox an diesem. Dazu muss evtl gesagt werden, dass ein Element, das durch position:absolute definiert ist, sich immer am Elternelement orientiert, sofern dieses ebenfalls durch position definiert ist, in diesem Fall durch position:relative und ohne weitere Angaben, damit der Container bleibt wo er ist.
Damit wäre die Loginbox fertig, fehlt lediglich noch das Loginscript. Das ganze Geheimnis hier liegt in einem einzigen Javascript-Befehl und dessen Einbindung: window.back
Wichtig ist nur, dass hier erstmal kein <body>-Bereich definiert wird, sondern dies erst nach einer Kontrolle des Users und des Passwortes getan wird, weil onLoad nur in <body> und <frame> gesetzt werden kann! Ist das Passwort korrekt, wird ein <body> mit onLoad="window.back()" gesetzt, ist es nicht korrekt wird zu einer Fehlerseite weitergeleitet. Das Script könnte etwa so aussehen:
<?php
session_start();
?>
<SCRIPT LANGUAGE="JavaScript">
function load()
    { location.href="error.html?login=failed"; }
</SCRIPT>
<?php

// Laden der Benutzerdaten des Users

// richtiges Passwort?
if($row->passwort == $pass) {
 //weitere Angaben
?>
<html><body onLoad="window.back()"></body></html>
<?php
}
else {
 ?>
 <html><body onLoad="load()"></body></html>
 <?php
}
?>
Thats it :-)
Eine simple Technik für einen netten Login!


Erstellt:24.03.10 14:37
Autor: avion

Letzte Änderung:
Geändert von:

Bewertungen:0
Bewertung:

Freigeschaltet: Ja
Views 5739

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 275] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE