jquery ders 3 - toggle

iyinet

jquery toggle() fonksiyonu ile bir dugmeyi acip kapama gibi efektler yapabilirsiniz. toggle() fonksiyonu uzerinde tanimlanan 2 fonksiyona gore hareket eder.

Asagidaki demoda
1. fonsiyon login ekranini fadein() yapiyor yani gosteriyor. Login ekrani style tanimlamasinda ilk hali ile gizli.
2. fonsiyon fadeout() yapiyor yani gizliyor.

Oldukca basit ve anlasilir bir demo, sorulariniz olursa lutfen bu baslik altina yaziniz.

demo : http://www.iyinet.com/jquery_dersleri/jquery_ders_03.html

GNeRaL · 25 Haziran 2009

Kod:

case "Musteri" :
echo '
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<style>
.div_ic { display:none; padding:5px; }
.div_tikla {cursor:pointer}
</style>
<div id="left">
<div class="div_tikla"><b>Sayın Müşterimiz;<p>
<p><a>Üye girişi</a> yaparak sizler için hazırlanan Müşteri Paneli\'nde rahatça işlemler yapabilirsiniz.<p>
<p>Müşteri numaranız, hesap açılışında size verilen Hesap Numarasıdır.<p>
<div class="div_ic">
<form name="giris" action="kapi-anahtar.php">
<input type=text class=search value="Müşteri Kodu"><br><br>
<input type=password password=yes class=search value="Şifre">
<input type=submit value="Giriş Yap" class="giris" /></p>
</div></div></div></script>';
	break;

Bunun içinden çıkamadım ben??

iyinet · 25 Haziran 2009

Kaynak kodun alt kismindaki javascript foksiyonu unutmussunuz sanirim:

Kod:

<script type="text/javascript">
  jQuery().ready(function() {
           jQuery(".div_tikla").toggle(
               function(){
                   jQuery(".div_ic").fadeIn("fast");
               },
               function(){
                   jQuery(".div_ic").fadeOut("fast");
               }
           );
  }); 
</script>

GNeRaL · 25 Haziran 2009

Teşekkürler, oldu

Bir anlık dalgınlık.

DeviLLe · 3 Ekim 2009

derslere devam edecekmisin sayın iyinet? özellikle bu başlıktaki örnek çok hoşuma gitti. teşekkürler elinize sağlık.

PlusBurakk · 12 Nisan 2010

Demo linki kırık.
Ayrıca biraz daha net açıklayabilir miyiz?