Dynamisches JavaScript Login Formular

Um ein wenig mehr Interaktion in die Seite zu bekommen, habe ich beschlossen im Falle von aktivierten JavaScript auf eine eigenständige Login/Registrierungsseite zu verzichten und eine dynamische Alternative anzubieten.

Hierbei ist es wichtig, dass für den Fall, daß JavaScript deaktiviert ist, die Seite trotzdem noch funktionstüchtig ist.

In diesem Tutorial möchte ich mein Vorgehen kurz beschreiben und den nötigen Quellcode dafür angeben. Die Idee stammt ursprünglich von http://www.visual-blast.com/javascript/sliding-login-panel-with-jquery/ und wurde hier angepasst.

1. Link zum Login-Formular

Für den Fall, dass JavaScript deaktiviert ist, benötigen wir einen Link <a id=”openpanel” href=”login.php”>log in / register</a> der zum klassischen Login-Formular führt.

2. Login-Panel

Wir nutzen ein div als panel am oberen Rand der Seite. Enthalten sind zwei weitere divs. Ein div enthält das Login-Formular und das zweite div enthält den oben beschriebenen Link und einen weiteren zum Schliessen des Panels.

<div id="login_panel">
  <div id="login_form">
    <h1>log in</h1>
    <form action="login.php" method="post">
      <ul>
        <li><label for="username">Benutzername</label><input type="text" name="username" id="username"/></li>
        <li><label for="password">Passwort</label><input type="password" name="password" id="password"/></li>
        <li><input type="submit" class="submit" value="Anmelden" /></li>
      </ul>
    </form>
  </div>
  <div id="login_panel_trigger">
    <a id="openpanel" href="login.php" >log in / register</a>
    <a id="closepanel" style="display: none;" href="#" >close panel</a>
  </div>

Dazu gehört dann folgendes CSS

/* some basic layout styles */
#login_form ul { list-style-type: none; }
#login_form label { display: inline-block; width: 150px; }
#login_form input { width: 150px; }
#login_panel { background-color: #ccc; }
/* hide the login form */
#login_form {
  display: none;
  height: 300px;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

Wichtig ist hierbei, dass nur der Teil #login_form versteckt wird, so dass das div #login_panel_trigger zu sehen ist.

3. JavaScript-Funktionalität injizieren

Als erstes benötigen wir unser jQuery ready Methode.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript"><!--
   jQuery(document).ready(function() {
    ...
  });
// --></script>

Aus dem Formular benötigen wir drei Elemente, die wir uns am besten in entsprechenden Variablen merken.

// login injection
var open = jQuery("#openpanel");
var close = jQuery("#closepanel");
var panel = jQuery("#login_form");

Nun müssen wir nur noch die Eventlistener an die beiden Links hängen und wechselseitig an- bzw. ausschalten.
Und je nachdem welcher Link gerade aktiv ist, das Formular ein- bzw. ausblenden.
Wichtig ist, dass beide click-Handler return false; zurückgeben, damit der Link nicht vom Browser abgesandt wird!

// Expand Panel
open.click(function(){
  panel.slideDown("fast");
  open.hide();
  close.show();
  // prevent the link execution which is for non javascript
  return false;
});
// Collapse Panel
close.click(function(){
  panel.slideUp("fast");
  close.hide();
  open.show();
  // prevent the link execution which is for non javascript
  return false;
});

Beispiel

0 Comments

Leave a reply