Bir önceki yazımda jQuery ile accordion menü hazırlamayı anlatmıştım.  Şimdi ise o functionun plugin halini sizlerle paylaşıyorum.

Pluginin asıl amacı accordion menüler oluşturmak. Ancak ayarlardan daha değişik işlemler için kullanılabilir hale getirebilirsiniz.

Kullanım şekli :

$('div.accordion1').accordion();

İsterseniz kullanabileceğiniz 6 tane ayar barındırıyor içerisinde. Ayarlarının kullanım şekli :

$('div.accordion1').accordion({
acik:1,
baslik:'<div class="menuTitle">Fade - ul </div>',
hiz:150,
etiket:'ul',
effect:'fade',
style:'menu'
});

Ayarlarımızı tek tek açıklayalım :

acik:

Menüdeki maddelerden hangisinin açık geleceğini seçebiliyorsunuz. Dikkat edilmesi gereken bir nokta var. Tabii ki saymaya 1 değil 0‘dan başlıyoruz. Eğer tamamının kapalı gelmesini istiyorsak ya hiç yazmıyoruz yada değeri -1 olarak belirliyoruz.

varsayılan değeri : -1

baslik:

Menümüzün başlığını oluşturuyoruz. Tamamen isteğe bağlı olup html tagları kullanabiliyoruz.

varsayılan değeri : yok

hiz :

Menü efektlerinin hızını belirler. 1000 değeri 1 saniyeye eşittir.

varsayılan değeri : -1

etiket :

Belirtmiş olduğumuz etiketin altında yer alan elementlerden hangilerinin menünün maddelerini oluşturacağını belirler.

Örn : etiket : ‘span’,

varsayılan değeri : ul

effect :

Menü maddelerinin efektini belirlememize yarar.

Alabileceği Değerler :

  • slide
  • show
  • bounce
  • none

varsayılan değeri : ‘none’

style :

Oluşturulan menümüzün başlıkları ve maddelerin stillerini belirlememize yarar.Vermiş olduğumuz style değişkeninin sonuna başlıklar için Baslik, maddeler için Div ekler.

varsayılan değeri : accordion

varsayılan stiller : accordionBaslik, accordionDiv

Önemli olan bir nokta daha var. etiket ile belirlediğimiz maddelerin başlıklarını etiket‘in title özelliği oluşturuyor.

    <script type="text/javascript">
        $(document).ready(function(){
            $('div.accordion1').accordion({
                acik:1,
                baslik:'<div class="menuTitle">Fade - ul </div>',
                hiz:150,
                etiket:'ul',
                effect:'fade',
                style:'menu'
            });
        });
    </script>
      <div class="accordion1">
        <ul title="Baslık bir">
            <li><a href="#">Madde 1</a></li>
            <li><a href="#">Madde 2</a></li>
            <li><a href="#">Madde 3</a></li>
        </ul>

        <ul title="Baslık İki">
            <li><a href="#">Madde 2-1</a></li>
            <li><a href="#">Madde 2-2</a></li>
            <li><a href="#">Madde 2-3</a></li>
        </ul>

        <ul title="Baslık Üç">
            <li><a href="#">Madde 3-1</a></li>
            <li><a href="#">Madde 3-2</a></li>
            <li><a href="#">Madde 3-3</a></li>
        </ul>
    </div>

Bu HTML kodlarının çıktısı aşağıdaki gibi olacak :

Diğer Örnekler için buraya tıklayınız.

Kodları indirmek için buraya tıklayınız.