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.
5 Ekim 2010
Benzer yazılar
Henüz yorum yapılmamış
Son Yorumlar
Allah yar ve yardımcın olsun kardeşim : ) Altın-dolar'ı bırak doğalgaz-pe...
Tamam yani 2020 kötü geçer diyordum da bu kadarı da biraz fazla mı oldu ne ...
Bu nasıl bir analiz bu nasıl bir öngörü be kardeşim :) 2015 sönük kaldı...
Böylesi bir güzelliği illa da Batı'lı bir şahsiyet tanınmlayan zihniyet z...
Bu aslında biraz da çocukların toplumsal hayatın merkezine yerleşmesi ile i...