category jquery

Maak een simpele jQuery login slider

1

Aphichat
Feb 02, 2009

1 Star2 Stars3 Stars4 Stars5 Stars

Tags: , ,

Dit is een simpele voorbeeld hoe je een div kan laten animeren en er een nuttige login slider kan maken met jQuery.

Wat heb je nodig?

  • jQuery framework (voor de animatie)
  • HTML pagina (voor de weergave)
  • CSS stylesheet (voor de vormgeving)
  • jQuery code (om het te laten werken)

Ik heb op de vorige jQuery tutorial onder (01.jQuery koppelen) uitgelegd hoe je jQuery in je html pagina kan koppelen.

jquery-slide

01.javascript code (tussen de head plaatsen)

Hieronder staat de korte javascript voor de animatie.

// standaart begin lijn
$(document).ready(function(){
// als ik op een link (a) klik functie
$('a').click(function(){
// klap dan (#uitklappen) uit
$('#uitklappen').slideToggle();
// sluit de click functie
});
}); // standaart afsluit lijn

02.css code (tussen de head plaatsen)

De omschrijvingen staan in de code. Als je die kopieer en plak in je html edittor zal je de comments zien.

/*standaart reset*/
* { margin: 0; padding: 0;}
/*zet achtergrondkleur*/
body { background: #666;}
/*zet standaart paragraaf afstand*/
p { padding: 0 0 10px 0;}
/*link kleur en zonder onderlijn*/
a { text-decoration: none; color: #000;}
/*als ik eroverheen ga..*/
a:hover { text-decoration: underline;}
/*voor de inputveld*/
.input { padding: 4px;}

#login-wrap {
/*absoluut links-boven*/
position: absolute;
/*positie van absolute*/
top: 0; left: 0;
width: 200px;
background: #fff;
}

.knop {
padding: 15px;
border-bottom: 1px dotted #eee;
}
.knop a {
/*voor de klik area*/
display: block;
}

#uitklappen { /*Dit is een uitklap div*/
/*even verbergen voor jQuery*/
display: none;
}
#uitklappen div {
padding: 15px;
/*anders verspringt de animatie!*/
}

03.html code (tussen de body plaatsen)

Stukje code uit de <body>

<div id="login-wrap">
<p class="knop"><a href="#">Admin Login</a></p>
<div id="uitklappen">
<div>
<p>Login slider voor admin..</p>
<form name="loginform" id="loginform" action="#" method="post">
<p><label>Username<br />
<input type="text" class="input" value="" size="20" />
</label></p>
<p><label>Password<br />
<input type="password" class="input" value="" size="20" />
</label></p>
<p class="submit">
<input type="submit" class="submit" value="Log Me In"/></p>
</form>
</div>
</div> <!-- /uitklappen -->
</div> <!-- /login-wrap -->

Ik hoop dat dit duidelijk is en het je kan deze techniek toepassen voor verschillende doeleinde om ervoor te zorgen dat je website gebruiksvriendelijker wordt. Er komen nog meer jQuery tutorials, dus hou de website in de gaten.

DemoDownload


  1. 03/04/2009
    Dave

    Handig dit alleen kan je er ook 3 naast elkaar afzonderlijk van elkaar gebruiken want nu gaan ze tegelijk of gaan ze om de beurt?

    Groetjes,
    Dave

twitter