Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Jquery Toggle efekti (Göster/Gizle)
#1
Merhaba herkese. Bu konuda sizlere Toggle efektinin kullanışını anlatacağım. Umarım faydalı olur.

-Nedir bu Toggle efekti ?
+ Bu efekt ile sitenizde, tasarımlarınızda herhangi istediğiniz bir yere açılır/kapanır özelliği kazandırabilirsiniz.
-Peki nasıl yapılır ?
+ Hemen anlatayım. Öncellikle 2 adet alana ihtiyacımız var. Bunlardan birincisi açma/kapama komutunu vereceğimiz yer(bu bir buton olabilir, bir resim olabilir, bir yazı olabilir). İkincisi gizlenecek/gösterilecek alan. 
Örnek:

Kod:

Kod:
<div class="komutyeri">Tıkla</div>
    <div class="gizlenecekyer">
        içerik 
    </div>

Bu şekilde oluşturduk. "komutyeri" classlı alana tıkladığımızda "gizlenecekyer" classlı alan gizlenecek veya gösterilecek. Alanları oluşturduk. Şimdi de script kodlarımıza geçelim. Kullanmamız gereken script kodları aşağıda:

Kod:

Kod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  jQuery.noConflict();
  jQuery(document).ready(function($) {
    $("xxxx").click(function() {
      $("xxxx").toggle(1000);
    });
  });
</script>

Evet script kodlarımız bunlar. Şimdi bu script kodlarını inceleyelim. "$("xxxx").click(function()" burada "xxxx" olan kısıma komut verilecek alanı yazacağız. Altında yer alan "$("xxxx").toggle(1000)" kodunda ki "xxxx" kısmına da gizlenecek olan alanı yazacağız. 
Şimdi scriptimizi yukarıda oluşturduğumuz alana göre düzenleyelim :

Kod:

Kod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
   jQuery.noConflict();
    jQuery(document).ready(function($){
        $(".komutyeri").click(function(){
            $(".gizlenecekyer").toggle(1000);
        });
    });
</script>
    <div class="komutyeri">Tıkla</div>
    <div class="gizlenecekyer">
        içerik 
    </div>

Bu şekilde ayarladık. Sonuç;
"komutyeri" adlı alana tıkladığımızda "gizlenecekyer" adlı alan gizlenecek veya görünecek.
Yukarıdaki oluşturduğumuz kodları kullanarak bir demo hazırladım. Hemen demoya bakıp çalışıp çalışmadığını kontrol edelim.
Demo: http://plnkr.co/edit/QlkgmwfQxzuewOrNncfM?p=preview

Evet efektin kullanımı bu kadar. Basit, güzel ve zevkli bir efekt. Bu efekt ile yapabileceklerinize bir kaç örnek verecek olursam; açılır kapanır duyuru panelleri, açılır kapanır kullanıcı panelleri vs. 

Umarım yeterince açık olmuştur ve işinize yarar.


alıntıdır.
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping