Amacım kendi köşemde kendi düşüncelerimi yazmak, Yazarken edebi kaygılar taşımam, sadece derdimi yazarım.

jQuery ile Login Panel Örneği

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:

[code lang=”js”]<!– 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> [/code]

xHTML kodları

[php]<!– 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> [/php]

CSS kodları

[code]<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> [/code]

jQuery Login Panel Örneğinin Demosuna Buradan Bakabilirsiniz.
jQuery Login Panel Örneğinin Kodlarını Buradan İndirebilirsiniz.

Yorum Ekleme Alanı


Henüz yorum yapılmamış