Öne Çıkan Yayın

Uzak Masaüstü Bağlantısı ve Modem Port Ayarı

İyi günler bu konumuzda uzak masaüstü bağlantısı ve modem port ayarını anlatacağım. Normalde uzak masaüstü bağlantısı ayarını açtığımızda ye...

10 Eylül 2012 Pazartesi

Jquery .show()

       jQuery show gizlenmiş nesneleri görünür hale getirmemizi sağlar.Hide mantığıyla çalışır. Kullanım şekli aşağıdaki gibidir. id değeri hddv olan bir dive nasıl uygulayacağımıza bir bakalım.

<input id="gsbtn" value="Göster" type="button" />
<div id="hddv" style="width:65px; height:65px; background-color:#666;"></div>
$("#gsbtn").click(); 
$("#hddv").show(); 
gsbtn button una click fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz gizleme özelliğini click içinde oluşturuyoruz
$("#gsbtn").click(function(){
 // yapmak istediklerimizi bu kısımda düzenliyoruz.
  $("#hddv").show(); veya $("#hddv").show('slow'); veya $("#hddv").show('fast');
    //show özelliğimizin iki tane parametresi var slow ve fast bunlarıda örneklerde göreceğiz.
});
HTML görünüm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery - show()</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
            $("#hdbtn").click(function () {
                // eğer butona tıklanmış ise gizleme işlemini gerçekleştiriyoruz.
              $("#hddv").hide();
            });    
   
            $("#hdbtnsl").click(function () {
              $("#hddvsl").hide('slow'); //slow parametresini kullanıyoruz. yavaş yavaş gizliyoruz.
            }); 
   
            $("#hdbtnfs").click(function () {
              $("#hddvfs").hide('fast'); //fast parametresini kullanıyoruz. hızlı gizliyoruz.
            }); 

   $("#gsbtn").click(function () {
                // eğer butona tıklanmış ise gösterme işlemini gerçekleştiriyoruz.
              $("#hddv").show();
            });    
   
            $("#gsbtnsl").click(function () {
              $("#hddvsl").show('slow'); //slow parametresini kullanıyoruz. yavaş yavaş gösteriliyor.
            }); 
   
            $("#gsbtnfs").click(function () {
              $("#hddvfs").show('fast'); //fast parametresini kullanıyoruz. hızlı gösteriliyor.
            }); 
        });
    </script>
</head>
<body>

<div style="float:left;">
<input id="hdbtn" value="Gizle" type="button" />


<div id="hddv" style="width:65px; height:65px; background-color:#666;"></div>


<input id="hdbtnsl" value="Slow gizle" type="button" />


<div id="hddvsl" style="width:65px; height:65px; background-color:#666;"></div>


<input id="hdbtnfs" value="Fast gizle" type="button" />


<div id="hddvfs" style="width:65px; height:65px; background-color:#666;"></div>
</div>
<div style="float:right;">
<input id="gsbtn" value="Göster" type="button" />

<input id="gsbtnsl" value="Slow göster" type="button" />

<input id="gsbtnfs" value="Fast göster" type="button" />

</div>
<div style="clear:both; float:none;"></div>

</body> </html>

İsterseniz testlerinizi HTML editörden yapabilirsiniz.


Örnek :