Basit jQuery Eklentileri Yazıyoruz : Akordiyon

Merhaba Arkadaşlar,

Bu makalemizde sizlere normal bir şekilde oluşturabileceğimiz akordiyon içerik alanımızı bir eklenti haline dönüştürmeyi ve kısa bir dökümantasyon ile insanlara nasıl kullanabileceği hakkında bilgi verebileceğinizi anlatacağım. Bu makale sayesinde de kendi akordiyon eklentinizi oluşturabilecek ve her projede tekrar tekrar yazarak kaybedeceğiniz zamanı bu eklentiyi geliştirmek için harcayabileceksiniz.

Bilindiği üzere akordiyon alanlar genellikle web sayfalarının sıkça sorulan sorular bölümlerinde , içerik sayfalarında olabilecek ayrı ayrı başlıklar da ( misyon , vizyon vb. ) kullanılırlar. Görüntü itibariyle küçük animasyonlar ile açılacak şekilde yaptığımızda da insanların bol bol kullanmak isteyeceği bir eklenti olur.

İşlemlerimize başlarken bir klasör açıyoruz ve içerisine ” index.html ” isimli sayfamızı oluşturuyoruz. Bu sayfamız içerisine ilk olarak ana html yapımızı kodluyoruz ve daha sonra da başlıklar ve bu başlıklara tıklandığında açılacak olan içerik alanlarını renk tonları , genişlik , yükseklik ile ilgili ayarlamalarını Css yardımı ile gerçekleştiriyoruz. Daha sonra sayfamıza son sürüm jQuery kütüphanesini de dahil ederek bu sayfadaki işlemimizi şimdilik tamamlamış oluyoruz.

Sıradaki işlem olarak ” accordion.js ” isimli bir sayfa oluşturuyoruz ve eklentimizin çalışması için gerekli olan tüm kodları bu sayfa içerisine yazıyoruz.

Tekrar index.html’ e dönerek jQuery kütüphanesini çağırdığımız satırın hemen altına accordion.js sayfamızı da dahil ediyoruz.

Son işlemimiz ise eklentimizin hangi class için nasıl bir şekilde çalıştırılacağını yazmak oluyor. Bunu da html içerisindetag’ leri arasında yapıyoruz.

Kullandığımız tüm kod yapısı şu şekilde olacaktır :

accordion.js :


(function($){
    $.fn.accordion = function(){
        return this.each(function(){
            $(".accordion .accordionContent:first").show();
            var a = $(".accordionTitle");
            var b = $(".accordionContent");
            $(a).click(function(){
                $(b).slideUp("fast");
                $(this).parents(".accordion").find(b).stop().slideDown("fast");
            });
        });
    };
})(jQuery);

index.html :


<!DOCTYPE html>
<html>
    <head>
    <title>BilgiSayaci.Org</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        .accordion{width: 400px;}
        .accordion .accordionTitle{padding: 20px; background: #ddd;border-bottom: 1px solid #aaa; cursor: pointer;}
        .accordion .accordionContent{padding: 20px; background: #ccc; display: none;}
    </style>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="accordion.js"></script>
    <script>
        $(document).ready(function(){
            $(".accordion").accordion();
        });
    </script>
</head>
<body>
    <div class="accordion">
        <div class="accordionTitle">Birinci Accordion</div>
        <div class="accordionContent">
            <p>
                1-) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
    <div class="accordion">
        <div class="accordionTitle">İkinci Accordion</div>
        <div class="accordionContent">
            <p>
                2-) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
    <div class="accordion">
        <div class="accordionTitle">Üçüncü Accordion</div>
        <div class="accordionContent">
            <p>
                3-) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</body>
</html>

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 41 No ‘lu Maddeden İndirebilirsiniz..

Reklam

Tüm Yorumlar

Leave a Reply

Your email address will not be published. Required fields are marked *