MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
batuhanmerci avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

Jquery Toggle efekti (Göster/Gizle)


Sponsor Reklam
media venus

Çevrimdışı batuhanmerci
 Tarih: 27-07-2014, Saat:22:57
#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:
<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.
Cevapla
Bunu Beğenenler: eatik , Time Traveler , mucotr
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı eatik
 Tarih: 27-07-2014, Saat:23:22
#2
Ellerinize sağlık hocam. Konuyu arşivime aldım bolca lazım oluyor yeni nesil tasarımlarda bu özellikler.
Cevapla
Bunu Beğenenler:

Çevrimdışı usameavci
 Tarih: 28-07-2014, Saat:01:58
#3
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>
Cevapla
Bunu Beğenenler: batuhanmerci , mucotr

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Mybb Kategori Ve forum İsmi Neon Işık Efekti Keskin 1 1,756 19-05-2016, Saat:15:51
Son Yorum: Dumpces1
  Jquery Çakışması Mesaj Editörü Sorunu [Çözüm] Luca 9 3,785 26-01-2016, Saat:05:03
Son Yorum: 3sr4rk3ss27
Kod jQuery.Parallax() Eklentisi ve Kullanımı usameavci 3 1,627 25-07-2014, Saat:23:36
Son Yorum: beta



Konuyu Okuyanlar: 1 Ziyaretçi