PHP | Jquery | Css | Codeigniter | Unity3D


Jquery ile aç kapa tarzı işlemleriniz için jquery slidetoggle() tam buna göredir. Normalde bir butona tıklayınca div açılsın diğer butona tıklayınca kapansın deriz ya da kendimiz kurgulayıp tek butonla hallederiz ama yine bir kurgu oluştururuz aynı buton hem gizleyip hem göstericekse. Normalde bir boolean değişken tanımlayıp bir başlangıç değeri veririrz 1 ya da 0, true ya da false deriz. Daha sonra butona tıklandığında önce gizle sonra sonra true olan değeri false yap ve başta da kontrol ederiz eğer false ise buraya gir yani gizlidir. False ise göster ve değeri tekrar true yap. Aslında jquery toggle() mantığı böyle işler. Ama biz göster gizle olayında hem açılış kapanış efekti vermiş oluruz hem de bu olaya süre tanımlayabiliriz. Örnek koda bakalım. Javascript kodundan önce jquery kütüphanesini import etmeyi unutmayalım.

$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideToggle("800"); // 800 ms sürede.

  });
});


#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}


Paneli Aç - Kapa
Hello world!
Bu kodları nasıl kullanıcaz derseniz öncelikle jquery kütüphanesini içe aktaralımsonra ilk olan script etiketleri arasına, ikinci sıradaki css kodu style etiketi arasına son kod bloğu ise body tagları arasına yazabilirsiniz.Jquery dersleri serisine devam ediyoruz.

Google


Soru ve Tartışma Konularınız için;

Yayınlayan
comments powered by Disqus
Yazar: Windofelm
Description: Jquery ile elementlerin gizlenme ve görünme özelliğini tek bir düğmeye atayabilirsiniz.