jQuery toggle kullanımı

jQuery animasyon özelliklerinden biri olan toggle kullanımını kısaca göstereceğiz.

Merhaba,

Bu ders ile sizlere bir listeyi animasyon vererek açıp kapamanın ne kadar kolay bir şekikde yapıldığını anlatacağım :).

Hemen anlatmaya başlayalım.

İlk önce " " taglarımızın arasına:


<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>



linkimizi ekliyoruz ki sayfamıza jQuery çalışma dosyasını çağıralım.

Arkasından ise aşağıdaki şekilde HTML kodlarımızı yazıyoruz.


<ul id="icerik">

  <li><a id="baslik" href="#">Başlık</a></li>

  <li id="detay">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </li>

</ul>



HTML kodlarımızı kısaca açıklıyorum zaten bu derse gelmiş olan birini bildiğini varsayıyorum. İlk önce bir "
    " tagı ile liste için başlangıç yaptık ve arkasından linkimizi vereceğimiz alanı yazıyoruz. Altındaki "detay class"lı olan liste ise linkimize tıkladığımız da açılacak olan içeriğimizdir.

    HTML'i kısaca anlattıktan sonra şimdi CSS kodlarımızı yazalım. CSS kodlarımızı yine "" tagları arasında "" içine yazıyoruz.


    ul#icerik{width:200px; height:100px; padding-left:0; font-size:0;}

    ul#icerik li{list-style:none; background:#606060; font:13px Tahoma;}

    ul#icerik li#detay{width:450px; height:140px; display:none; background:#666; border-top:1px solid #fff; color:#fff; padding:10px; font:12px Tahoma; line-height:18px;}

    ul#icerik li a{color:#fff; text-decoration:none; display:block; padding:7px;}



    Evet gerekli CSS kodlarımız yukarıdadır. Bunları açıklayalım. İlk önce "ul#icerik" diyerek ID verdiğimiz HTML tagının bir ul olduğunu belirtiyoruz. Arkasından süslü parantezler içinde "width:200" ve "height:100" ile toplam bize lazım olan alanın 200px genişliğinde ve 100px uzunluğunda olduğunu belirtiyoruz. Arkasından padding-left:0 ve font-size:0 ile yine sorunlar olmaması açısından bu değerleri sıfırlıyoruz.

    "ul#icerik li" kodumuz ile birlikte ID'si icerik olan ul tagının içindeki li elementini belirtiyoruz ve değerlerini veriyoruz. "list-style:none" değeri ile liste elementlerimizin başındaki dairelerimizi kaldırıyoruz. "background" değeri ile de arkaplan rengini belirliyoruz ve son olarak font bilgilerini giriyoruz.

    "ul#icerik li#detay" ile şimdi animasyona uğrayacak listemizin değerlerini veriyoruz. Width ve Height değerlerimizi belirttikten sonra "display:none" değeri ile ilk açılışta listemizin gözükmemesini istiyoruz ki animasyonumuz açılacağı zaman yoktan var olsun :). Arkasından background rengimizi ve border-top ile de linkimizin olduğu liste ile arasına 1pxlik bir border ekliyoruz. Color değerimiz ile text rengini verdikten sonra "padding:10px" ile de içerimizin sağ-sol-üst-alt kısımlardan eşit olarak boşluk bırakmasını istiyoruz. Şimdi ise içerik alanımız için font bilgilerimizi giriyoruz ve son olarakta line-height değeri ile içeriğin sıkışmaması için onları biraz rahatlatıyoruz :). "line-height" değeri ile istediğiniz gibi oynayıp tam olarak ne işe yaradığını kendiniz daha rahat görebilirsiniz.

    "ul#icerik li a" ile de linkimizin alacağı css değerlerimizi giriyoruz. Linkimizin renginin beyaz olacağını belirttikten sonra text-decoration ile altının çizili olmayacağını söylüyoruz ve "display:block" ile hem linkimize bulunduğu li elementini kapsamasını hem de linkimizden önce biraz boşluk bırakmasını belirtiyoruz ve padding değerimiz ile de linkimizin etrafından eşit değerlerde boşluk olacağını söylüyoruz.

    Evet şimdi jQuery kodumuzu yazıyoruz. jQuery kodlarımızı da yine "" taglarımızın arasına


    <script type="text/javascript"> //jQuery kodlarımız </script>



    taglarının içine yazıyoruz.


    $(function(){

            $("a#baslik").click(function(){

                $("#detay").toggle(2000);

            });

        });



    ilk önce yine "$" işareti ile jQuery'i çağırıyoruz ve bir function oluşturacağımızı söylüyoruz. Ve biz bu function içindeki işlemleri web sitemiz üzerinde yapmadığımız sürece bunları çalıştırmaması gerektiğini istiyoruz.

    Arkasından "function(){}" ile bir fonksiyon oluşturuyoruz ve yine "{}" içine $ değerimizi kullanarak HTML kodlarımızda bulunan ID'si "baslik" olan a tagını yakalamak istediğimizi ve .click ile de bu linkimize tıkladığımız zaman parantez içindeki fonksiyonu çalıştırmasını söylüyoruz. Daha sonra function içine giriyoruz ve yine $ ile ID'si "deger" olan html elementini .toggle(2000) ile animasyonu oynatıyoruz. "Toggle" jQuery içinde tanımlanmış bir animasyon özelliğidir. Yaptığı iş ise element eğer kapalıysa aç, eğer açık ise bunu kapat anlamına gelir. Parantez içindeki 2000 değeri ise milisaniye cinsinden animasyonun oynatma hızıdır. Bunu istediğiniz gibi değiştirebilir isterseniz silebilirsiniz. Eğer silerseniz animasyon sizin göremeyeceğiz kadar hızlı bir biçimde açılacağı için direkt geliyormuş ya da gidiyormuş gibi gözükür.

    Örneği görmek için buraya tıklayın.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 11 yıl önce
müthiş bir ders eline klavyene mouse na sağlık
• 11 yıl önce
$(function(){ $("a#baslik").click(function(){ $("#detay").toggle(2000); }); }); baslik ve detay atamaları parantez ile kapatılmamış.yukarıdaki gibi olması gerekiyor.burası atlanmış sanırım. Paylaşım çok güzel teşekkürler.
• 11 yıl önce
@grafikel , teşekkürler. Demo kısmında doğru ama burada parantezi kapatmayı unutmuşum.

Yukarı Git