25 Şubat 2011 Cuma

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.

Hiç yorum yok:

Yorum Gönder