jQuery ile Login Panel Örneği
Salı, 05 Eki 2010
Web Tasarımda jQuery ve CSS‘in etkileri tartışılmaz. Bir çok büyük yazılım şirketlerinin yanı sıra amatör web sayfaları da hergün yenilenmek zorunda kalıyor.
Artık bende çeşitli jQuery örneklerini sizlerle paylaşacağım. Bu sayede daha görsel ve işlevsel sayfalar yapabilirsiniz.
Bu Login Panel ( Kullanıcı Girişi ) örneğinde jQuery ve CSS ile hazırlanmış çok kolay ve görünüm olarakta şık bir örnek.
head tagına ekleyeceğinizkodlar:
<!-- Call jQuery in <head></head> tags of the document -->
<script type="text/javascript" src="jquery.js"></script>
<!-- jQuery to apply actions to the link -->
<script type="text/javascript">
$(document).ready(function(){
$("#login-link").click(function(){
$("#login-panel").slideToggle(200);
})
})
<!-- jQuery to apply actions to the ESC key -->
$(document).keydown(function(e) {
if (e.keyCode == 27) {
$("#login-panel").hide(0);
}
});
</script>
xHTML kodları
<!-- xHTML Code --> <div id="demo-header"> <!-- Code for Login Link --> <a id="login-link" href="#login" title="Login">Clients Area</a> <!-- Code for login panel --> <div id="login-panel"> <form action="" method="post"> <label>Username: <input name="username" type="text" value=""> </label> <label>Password: <input name="password" type="password" value=""> </label> <input type="submit" name="submit" value="Sign In"> <small>Press ESC to close</small> </form> <!-- login-panel ends here --> </div> <!-- demo-header ends here --> </div>
CSS kodları
<style type="text/css">
#demo-header{
width: 980px;
margin: 0 auto;
position: relative;
}
#login-link{
position: absolute;
top: 0px;
rightright: 0px;
display: block;
background: #2a2a2a;
padding: 5px 15px 5px 15px;
color: #FFF;
}
#login-panel{
position: absolute;
top: 26px;
rightright: 0px;
width: 190px;
padding: 10px 15px 5px 15px;
background: #2a2a2a;
font-size: 8pt;
font-weight: bold;
color: #FFF;
display: none;
}
label{
line-height: 1.8;
}
</style>
jQuery Login Panel Örneğinin Demosuna Buradan Bakabilirsiniz.
jQuery Login Panel Örneğinin Kodlarını Buradan İndirebilirsiniz.
Son Yorumlar