Date Image Thursday, January 28, 2010 | Kategoriler | Javascript, Tümü

JQuery İle Akordiyon İçerik Nasıl Oluşturulur?

    Bu yazıyı 'En güzel şey kendin yazarsan olur' gibi bir söz ışığı altında hazırlıyorum :)

<script type="text/javascript">

        $(document).ready(function() {

            $(".AccordionContent").hide();

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

                $(".AccordionContent").slideUp("normal").hide();

                $(".AccordionTitle").removeClass("active");

                $(this).addClass("active");

                $(this).next(".AccordionContent").slideToggle("slow,");

            });

        });

</script>

   Akordiyon içeriğimizin, açılır kapanır bir hale getirecek olan javascript kodumuz yukarıda görüldüğü gibidir. Yapılan iş gerçekten basit, jquery 1.3.2 referans olarak eklendikten sonra buradaki metot desteğini edinmiş oluyoruz. Öncelikle AccordionContent classını kullanan tüm elementleri hide metodu ile gizliyoruz. Daha sonra AccordionTitle class ını kullanan tüm başlık alanlarının click eventlarına bir fonksiyon ekliyoruz. Fonksiyondan da anlaşılacağı üzere yaptığımız işlem; öncelikle tüm içerikleri gizlemek ki bunu isterseniz yapmayabilirsiniz (eğer yapmazsanız açtığınız tüm akordiyonlar açık kalacaktır.), daha sonra tüm başlıkların class attribute ünü siliyoruz ki sadece yeni aktif olacak olan başlık aktif görünümü alabilsin. Yeni başlığa active classını verdikten sonra içeriğimizi jquery nin bize sağladığı metotlardan olan slideToggle ile içeriğimizi görünür hale getiriyoruz.

   Burada önemli olan yerlerden bir tanesi, this ile aktif olacak başlığı yakaladıktan sonra, next ile aktif başlık elementinden sonra gelen ilk AccordionContent classına sahip olan elementi yakadığımızdır. Yani Title ve Content alt alta eklenmelidir.

  Akordiyonda kullandığım stiller ise aşağıdaki gibi;

<style>

        .AccordionTitle

        {

            background-color: LightGrey;

            color: DarkGreen;

            font-weight: bold;

            padding: 5px;

            margin-bottom: 5px;

            cursor:pointer;

        }

        .active

        {

            background-color: DarkGreen;

            color: LightGrey;

        }

        .AccordionContent

        {

            padding: 5px;

            border: solid 1px DarkGreen;

            display: block;

            margin-top: -5px;

            margin-bottom: 5px;

        }

</style>

   Daha sonra AccordionTitle için bir arkaplan resmi tanımlayıp active classı için de bir başka arkaplan tanımlayarak daha efektif bir akordiyon oluşturabilirsiniz.

   Sayfamıza ekleyceğimiz örnek akordiyon içerikleri de aaşağıdaki gibidir, kendinize göre düzenledikten sonra rahatça kullanabilirsiniz.

  

<div class="AccordionTitle">

        Lorem Ipsum Nedir?

    </div>

    <div class="AccordionContent">

        Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum,

        adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı

        galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler

        olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda

        pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları

        da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker

        gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.

    </div>

    <div class="AccordionTitle">

        Nereden Gelir

    </div>

    <div class="AccordionContent">

        Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö.

        45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi

        vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock,

        bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur'

        sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır.

        Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum

        et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden

        gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok

        popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet"

        1.10.32 sayılı bölümdeki bir satırdan gelmektedir.

    </div>

    <div class="AccordionTitle">

        Nereden Bulabilirim

    </div>

    <div class="AccordionContent">

        YLorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu

        mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir

        Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden

        emin olmanız gerekir. İnternet'teki tüm Lorem Ipsum üreteçleri önceden belirlenmiş

        metin bloklarını yineler. Bu da, bu üreteci İnternet üzerindeki gerçek Lorem Ipsum

        üreteci yapar. Bu üreteç, 200'den fazla Latince sözcük ve onlara ait cümle yapılarını

        içeren bir sözlük kullanır. Bu nedenle, üretilen Lorem Ipsum metinleri yinelemelerden,

        mizahtan ve karakteristik olmayan sözcüklerden uzaktır.

    </div>

  Not: Hazırladığım bu akordiyon örneği bu tarihe kadar, internet explorer, firefox, chrome ve safari tarayıcılarının en son versiyonlarında test edilmiş ve başarılı olmuştur.

   Demo

Etiketler : JavaScript , JQuery , Accordion