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

Son Yorumlar

  • Hüsnü Güneşdoğdu:

    Tamam yani 2020 kötü geçer diyordum da bu kadarı da biraz fazla mı oldu ne ...

  • Hüsnü Güneşdoğdu:

    Bu nasıl bir analiz bu nasıl bir öngörü be kardeşim :) 2015 sönük kaldı...

  • Selman Gün:

    Böylesi bir güzelliği illa da Batı'lı bir şahsiyet tanınmlayan zihniyet z...

  • Selman:

    Bu aslında biraz da çocukların toplumsal hayatın merkezine yerleşmesi ile i...

  • Hüsnü Güneşdoğdu:

    Ulan gündemi belirliyorum resmen, herifi tekrar tutukladılar :D...

  • 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

    Yorum Ekleme Alanı


    Henüz yorum yapılmamış