[jQuery] Prosty i funkcjonalny plugin jQuery Accordion

Data dodania wpisu: 18-11-2010

Przyznam szczerze, że nie zwracałem uwagi, jak wygląda funkcjonalność takich pluginów jQuery w stosunku do objętości kodu, dlatego przy okazji jednego wdrożenia opracowałem własny, prosty i funkcjonalny jQuery Accordion. Jego funkcje to m.in:

  • zwinięcie wszystkich zakładek na starcie,
  • rozwinięcie wybranej zakładki na podstawie numeru w kolejności (index),
  • pozostawienie wszystkich zakładek rozwiniętych,
  • indywidualne ostylowanie dzięki klasom nakładanym na kolejne elementy,
  • zastosowanie jednej reguły do wielu "akordeonków",
  • zwijanie elementu aktualnie rozwiniętego.

Prosty i funkcjonalny standard.

Ale żeby nie był gołosłownym, po kolei:

- plugin jQuery:

(function($){
    $.fn.simpleAccordion = function(options){
        var opts = $.extend({
            duration: 300, // domyślny czas (ro)zwijania
            collapsed: true, // domyślne ustawienie zwiniętych bloków - wszystkie po załądowaniu będą zwinięte - nie dotyczy sytuacji, jeśli został ustawiony parametr 'expanded'
            expanded: null // domyślnie żaden z bloków nie będzie rozwinięty po załadowaniu
        },options);

        var $that = $(this);

        $that.children('a').addClass('accordion-link');
        $that.children('div').addClass('accordion-content');
        if(opts.collapsed) { 
            $that.children('div').hide();
        }
        if(opts.expanded != null) {
            var $count = 0;
            $that.children('a').each(function(){
                if($count == opts.expanded) {
                    $(this).addClass('toggled').next()
                           .addClass('toggled').slideDown(opts.duration);
                }
                $count++;
            });
        }
        $('a.accordion-link').click(function(){
            if($(this).hasClass('toggled')) { // ta regułka powoduje, że możemy zwijać elementy rozwinięte, poprzez kliknięcie na nie same
                $that.children('a.toggled').removeClass('toggled');
                $that.children('div.toggled').stop(true,true)
                        .slideUp(opts.duration);
            } else {
                $that.children('a.toggled').removeClass('toggled');
                $that.children('div.toggled').stop(true,true)
                         .slideUp(opts.duration);
                $(this).addClass('toggled').next().addClass('toggled')
                       .stop(true,true).slideDown(opts.duration);
            }
            return false;
        });

    }
})(jQuery);

- wywołanie:

$(document).ready(function(){
    $('#accordion-custom-list').simpleAccordion({
        expanded: 0 // informujemy plugin, że pierwszy element ma być rozwinięty po załadowaniu strony
    });
});

- trochę CSS'a:

a.accordion-link{
    display:block;
    padding:5px;
    line-height:2.0em;
    width:100%;
    margin:10px 0;
    background:#eee;
}
div.accordion-content{
    display:block;
    padding:5px;
    line-height:2.0em;
    width:100%;
    margin:10px 0;
    border:1px solid #eee;
}

- i kawałek kodu HTML na którym odpalimy akordeonek:)

<div id="accordion-custom-list">
    <a href="#">Item 1</a>
    <div>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
    <a href="#">Item 2</a>
    <div>
        <ul>
            <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
            <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
            <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
            <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
        </ul>
    </div>
    <a href="#">Item 3</a>
    <div>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
</div>

 

Paczka do pobrania: simpleAccordion

 

Poniżej pokaz funkcjonalności pluginu:)

Item 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Item 2
  • Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
  • Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
  • Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Item 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Komentarze

Ten wpis nie posiada jeszcze komentarzy

Comments closed...