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;
İsmail Mercan
1988 Çankırı Ilgaz doğumlu olan yazar, liseyi Ankara Aydınlık Evler Ticaret Meslek Lisesi / Bilgisayar Programcılığı bölümünde bitirdi. Daha sonra Akınsoft Ankara Bölge Müdürlüğünde stajyer olarak görev aldı. <p>2006 yılında halen devam etmekte olduğu Sakarya Üniversitesi Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Bölümüne yerleşerek öğrenimine devam etmektedir. <p>Web Programlama(PHP-MYSQL, ASP, AJAX,CSS, Javascript ) ve Web Tasarım(Photoshop, Fireworks, Dreamweaver,Flash) ile yakından ilgilenen yazar kendi çapında birçok küçük kapsamlı projeye imza atmıştır.
Yorum Yaz

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

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

Yukarı Git