Jquery ile Kayan Üye Girişi Alanı Yapıyoruz.

Bu dersimizi de web sayfamıza ayrı bir renk katacak açılır kapanır bir üye girişi alanı örneği yapmaya çalışacağız.Bu örneği yaparken javascript kütüphnelerinden jquery kütüphanesini kullanıcağız.

Merhaba arkadaşlar,

Bu dersimizi de web sayfamıza ayrı bir renk katacak açılır kapanır bir üye girişi alanı örneği yapmaya çalışacağız. Bu örneği yaparken javascript kütüphnelerinden jquery kütüphanesini kullanıcağız.

Uygulamayı buraya tıklayark test edebilirsiniz.

Uygulamayı yaptığımız sayfanın kaynak kodları şu şekilde


<head><script src="jquery.js" type="text/javascript"></script> <!-- JQUEY kütüphanemizi sayfaya dahil ediyoruz-->



<script type="text/javascript">

 $(document).ready(function(){ // sayfa yüklendiğinde çalıştırılacak fonksiyon



                $("#uyebtn").click(function(){ // uyebtn id değerine sahip div'e tıklandığında çalışaçak fonksiyon

                    if ($("#Uyeform").is(":hidden")){  // Eğer Uyeform id'li div display:none (gizli) ise..

                        $("#Uyeform").slideDown("slow");  //Uyeform id'li div'i  slide şekline görünür hale getirir.

                    }

                    else{ 

                        $("#Uyeform").slideUp("slow"); // Uyeform id'li div gizli değilse slide şekline gizlenmesini sağlar

                    }

                });

                

            });



</script>

<!-- UyeForm  Alanımızın ve UYE GİRİŞİ butonumuzun CSS kodları-->

<style type="text/css">



            #Uyeform  

            {





    height:150px;

    width:250px;

    background-color:#99CCFF;

    display:block;

    border: 1px solid #333333;

        display:none;

        padding:12px;  



  }

            

       #uyebtn 

            {

            

    height:40px;

    text-align:center;

    font-size:12px;

    font-family:Tahoma;

    width:250px;

    background-color:#FF9900;

    display:block;

    cursor:pointer;

    font-style: normal;

    font-weight: bolder;

    color: #003333;

    border: 1px solid #333333;

            }





</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />



</head>





         <div id="Uyeform">

                Kullanıcı Adı<br />

                <input type="text" name="kadi"/><br />

                   Parola<br />

                <input type="text" name="kadi"/><br />

                <input type="submit" value="Gönder" />

                </div>

                <div id="uyebtn"><br />

                ÜYE GİRİŞİ</div>



İyi çalışmalar, kolay gelsin
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 10 yıl önce
harici kısımlara link veriyorsunuz, ancak inşallah silinmez. :)
• 10 yıl önce
örnek dosyaları atıp link verecek bir yer bulamadım.Ders ekle bölümdünde böyle bir özellik var mı ?

Yukarı Git