MyBB Depo Forum

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:

<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:

<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:

<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.
Anlatım tamamen bana aittir. İyi günler.

Ellerinize sağlık hocam. Konuyu arşivime aldım bolca lazım oluyor yeni nesil tasarımlarda bu özellikler.

Elinize sağlık fakat birkaç düzenleme gerekecek. Bu şekilde kullanıldığında birden fazla var ise bir sayfada hepsi birden açılıp kapanacaktır. Şu şekilde düzeltilebilir;
Headerinclude eklenecek:

Kod:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

  jQuery.noConflict();

  jQuery(document).ready(function($) {

    $(".trigger").click(function() {

      $(this).next().slideToogle(500);

    });

  });

</script>

Kullanılacak şablona eklenecek:

Kod:

<div class="trigger">Tıkla</div>

    <div class="triggerContent">

        içerik

    </div>

batuhanmerci

eatik

usameavci