JQuery ile Nesneleri Gizleme ve Gösterme

DMCA.com Protection Status

JQuery ile Nesneleri Gizleme ve Gösterme

JQuery kullanarak nesneleri gizlemek, gizli olan nesneleri göstermek gibi işlemler çok kolay yapılabilir. Bunun için kullanılabilecek metotlardan üçü bu sayfada açıklanmış olup, ileriki konularda farklı metotlar da anlatılmıştır.

Nesneleri gizlemek için kullanılan en temel metot hide metodudur. Gizli durumdaki nesneleri göstermek içinse show metodu kullanılır. Toggle metodu ise bu iki metodun birleşimi gibi olup, nesne gizliyse gösterir, değilse gizler. Bu metotları sırayla inceleyelim.

hide() Metodu ile Nesneleri Gizleme

Nesneleri gizleyen hide metodu parametresiz kullanılabileceği gibi isteğe bağlı olarak efekt süresi ve callback fonksiyonu da belirtilebilir.

$("#button1").click(function(){
    $("#kutu1").hide();
});

Yukarıdaki örnekte button1 nesnesine tıklandığında kutu1'in gizlenmesi sağlanmıştır. Hiç parametre kullanılmadığı için gizlenme yavaşça değil, tıklandığı anda olacaktır.

Aşağıdaki örnekte ise gizlenme işleminin 1000 ms, yani 1 sn içerisinde gerçekleşmesi sağlanmıştır. Bu yöntem ile nesnelerin yavaşça gizlenmesini sağlayabiliriz.

$("#button1").click(function(){
    $("#kutu1").hide(1000);
});

Efektin süresi milisaniye cinsinden belirtilebileceği gibi slow ya da fast değerleri de kullanılabilir.

Callback metodu kullanımı bir sonraki konuda anlatılacaktır.

$("#button1").click(function(){
    $("#kutu1").hide("slow");
});

 

show() Metodu ile Gizli Durumdaki Nesneleri Görünür Yapma

Show metodunun kullanımı hide metodu ile aynı olup, yaptığı iş gizlenmiş nesneyi göstermektir.

$("#button1").click(function(){
    $("#kutu1").show();
});

Yukarıdaki örnekte button1 nesnesine tıklandığında kutu1'in görünür yapılması sağlanmıştır. Hiç parametre kullanılmadığı için görünme yavaşça değil, tıklandığı anda olacaktır.

Aşağıdaki örnekte ise nesnenin yavaşça görünmesi sağlanmıştır. 

$("#button1").click(function(){
    $("#kutu1").show(1000);
});

 

toggle() Metodu Kullanımı

Toggle metodu, hide ve show metotlarının ikisinin de aynı tetikleyici tarafından gerçekleştirilebilmesini sağlar.

Örneğin bir butona tıklandığında nesne gizliyse göstersin, görünürse gizlensin istiyorsak, toggle metodu en iyi çözümdür.

Kullanımı hide ve show metodu ile aynıdır.

$("#button1").click(function(){
    $("#kutu1").toggle();
});

Yukarıdaki örnekte parametre kullanılmadığı için görünme veya gizlenme yavaşça değil, tıklandığı anda olacaktır.

Aşağıdaki örnekte ise nesnenin yavaşça görünmesi ve gizlenmesi sağlanmıştır. 

$("#button1").click(function(){
    $("#kutu1").toggle(1000);
});

 

jquery nesneleri gizleme yok etme ve gösterme, gizli nesneyi gösterme, nesneleri yavaşça gizleme gösterme, jquery hide kullanımı, jquery show kullanımı, query show hide examples

KONU İLE İLGİLİ ÖRNEKLER

JQuery Show, Hide, Toggle Örnekleri Kendin Dene

Kendin Dene butonuna tıklayarak örneğin kodlarını değiştirebilir ve sonucu görebilirsin.

 
JQuery Kısmı:
 
 
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#kutu1").hide();
});   
 
$("#button2").click(function(){
$("#kutu2").hide(1000);
});
 
$("#button3").click(function(){
$("#kutu3").hide("slow");
});
 
$("#button4").click(function(){
$("#kutu4").show();
});
  
$("#button5").click(function(){
$("#kutu5").show(1000);
}); 
 
$("#button6").click(function(){
$("#kutu6").show("fast");
}); 
  
$("#button7").click(function(){
$("#kutu7").toggle();
});
 
$("#button8").click(function(){
$("#kutu8").toggle(1000);
});
 
});
</script>
 
Html Kısmı:
 
<table border="0">
  <tr>
    <td colspan="2">Nesneyi hemen gizleme</td>
  </tr>
  <tr>
    <td width="100"><button id="button1">Buton 1</button></td>
    <td width="150"><div id="kutu1" class="kutu">Kutu 1</div></td>
  </tr>
  <tr>
    <td colspan="2">Nesneyi yavaşça gizleme (1 sn)</td>
  </tr>
  <tr>
    <td><button id="button2">Buton 2</button></td>
    <td><div id="kutu2" class="kutu">Kutu 2</div></td>
  </tr>
  <tr>
    <td colspan="2">Nesneyi yavaşça gizleme (slow)</td>
  </tr>
  <tr>
    <td><button id="button3">Buton 3</button></td>
    <td><div id="kutu3" class="kutu">Kutu 3</div></td>
  </tr>
  <tr>
    <td colspan="2">Gizli nesneyi görünür yapma</td>
  </tr>
  <tr>
    <td><button id="button4">Buton 4</button></td>
    <td><div id="kutu4" class="kutu">Kutu 4</div></td>
  </tr>
  <tr>
    <td colspan="2">Nesneyi yavaşça gösterme (1 sn)</td>
  </tr>
  <tr>
    <td><button id="button5">Buton 5</button></td>
    <td><div id="kutu5" class="kutu">Kutu 5</div></td>
  </tr>
  <tr>
    <td colspan="2">Nesneyi hızlıca gösterme (fast)</td>
  </tr>
  <tr>
    <td><button id="button6">Buton 6</button></td>
    <td><div id="kutu6" class="kutu">Kutu 6</div></td>
  </tr>
  <tr>
    <td colspan="2">Toggle örneği</td>
  </tr>
  <tr>
    <td><button id="button7">Buton 7</button></td>
    <td><div id="kutu7" class="kutu">Kutu 7</div></td>
  </tr>
  <tr>
    <td colspan="2">Toggle örneği (1 sn)</td>
  </tr>
  <tr>
    <td><button id="button8">Buton 8</button></td>
    <td><div id="kutu8" class="kutu">Kutu 8</div></td>
  </tr>
</table>


YORUMLAR




15283  kez okundu.

Online Kullanıcı Sayısı 11



JQuery-ile-Nesneleri-Gizleme-ve-Gösterme