Пишем аккордеон-плагин в 618 байт

[soltpain]

Вы уж извините, но зачем писать плагин в полкило к куче кода ~50Кб? Наболело. Предложите лучше аккордеон в чистом виде…

[XaocCPS]

к какой куче?
посмотрите через firebug, сколько весит ВСЯ страница с примером: 25кб вместе с картинками, html, css и двумя плагинами

иногда лучше промолчать

[soltpain]

Виноват, на страницу с демо не заходил, файлы не мерил. 50кб упомянуто как типичный размер jquery-файла встречаемого мною в сторонних проекта. Для того чтобы потом по клику взять и спрятать/показать див. Наболело, потому что устал смотреть ЯС-код так называемых JQuery-kiddies. Подключат библиотеку, нагородят быдлокод такой, что диву даешься… Сядешь, перепишешь на чистый ЯС — даже меньше получается.

За свой предыдущий пост прошу прощения, выстрелило, к вам это не имеет прямого отношения.

[XaocCPS]

ничего страшного
дело в том, что мы находимся в блоге jQuery и просить написать не jQuery «аккордеон» тут — по меньшей мере странно :)

а быдлокод — он языконезависим, имхо, и тут jQuery скорее средство, нежели причина

[soltpain]

С Вами трудно не согласиться, все фреймворки подобного рода популярны именно из-за непохожести браузеров. Но моя личная паранойя — не использовать чужого. Либо возьми, раскрути, пойми как что делается и напиши свое. Но на последнее все меньше и меньше времени остается, так что и я когда-нибудь примкну в какой-нибудь стан пользователей фреймворков ((-8

[PSHKGRZN]

Тогда почему вы используете для своих нужд HTML язык? Не вы же его придумали!

[konfuze]

Круто и, безусловно, очень увлекательно писать на голом js когда у тебя куча времени. Но зачастую в процессе активной конвейерной разработки сайтов некогда этим заниматься.

Вот тогда фреймворки (js, css, php etc) и приходят на помощь.

[PSHKGRZN]

Лично мой девиз по отношению к размерам страниц: «Чем меньше, — тем быстрее!»
— И не стоит рассуждать по поводу стоило писать плагин или нет! Стоило!

Автор — спасибо! Только маленький советик: сделай пожалуйста комментарии к каждой важной строке кода чтоб новички могли разобраться!

[XaocCPS]

вроде, постарался после кода расписать что да как…

если есть у кого вопросы, прошу задавать в комментах, имхо, код простой и для тех кто немного знает jQuery труда не составляет

[denver]

По юзабилити немного: аккордеон это когда что-то сужается, другое расширяется. А у вас вместо сужения скачок, так что теряешься «ой, куда вдруг делась предыдущая форма».

[XaocCPS]

сделал .hide(300);
лучше?

[denver]

Пёрфект :)

[deerua]

Я уж голову начал ломать, что такой за бойан вы хотите показать ;)
Спасибо за работу и идею ;)

[XaocCPS]

в каком-то смысле, действительно, бойан :)

[pepelsbey]

А обязательно использовать ID'шники и писать CSS внутри JS?
Мне кажется, что по коллекции можно ходить и так.

И, кстати, особенность настоящего аккордеона состоит в том, что его общая высота не меняется — это соблюдено только на сайте Apple, но, к сожалению, при помощи фиксированной высоты.

www.apple.com/downloads/
www.livejournal.ru/

…попробую написать свою версию.

[XaocCPS]

идешники использую для создания одного jQuery запроса, вместо последовательной выборки — не знаю, может быть это неправильно, но мне показалось, что так лучше

css внутри js? вы про курсор мыши? это сделано для того, чтобы курсор становился pointer всегда и без создания css файла специально для контрола. Хотя конечно, можно убрать и вынести в отдельный css-файл.

Про не изменяющуюся высоту не согласен, по моему странное требование, ничем не оправданное. Ну если нужно — сделайте.

PS: по вашей ссылке на ЖЖ высота меняется

[pepelsbey]

для создания одного jQuery запроса, вместо последовательной выборки

Мне кажется, что настоящий самурайский JS должен работать именно с пустым HTML-кодом, с привязкой только к корневому элементу + поддежкой в виде классов, которые описаны в CSS. Вот это будет настоящее разделение данных от представления и динамики.

Да, кстати — эффект инициализации (прыжка при загрузке) может нормально исправить описание в CSS, но только с обратной совместимостью.

document.documentElement.id = 'js';

#js DD { display:none; }

[DmitryBaranovskiy]

Присоединяюсь к Вадиму по поводу CSS и id. Крому того можно слегка оптимизировать код:

jQuery.fn.accordion = function() {
    function update(dl) {
        $("dt:not(.active)", dl).css("cursor", "pointer");
        $("dt.active", dl).css("cursor", "");

        $("dd div", dl).hide();
        $("dd span.remark", dl).show();

        $("dt.active", dl).next().children("div").show(300);
        $("dt.active", dl).next().children("span.remark").hide();
    }

    return this.each(function() {
        var dl = $(this), active = $("dt.active", dl);
        update(dl);

        $("dt", dl).click(function() {
            if (!$(this).hasClass("active")) {
                active && active.removeClass("active");
                active = $(this).addClass("active");
                update(dl);
            }
        });
    });
};

В данном случае вы не зависите от id плюс это выполняется чуть-чуть быстрее.

[XaocCPS]

спасибо, отличная работа

[XaocCPS]

благодаря вашим изменениям размер minified-версии уменьшился до 508 байт :)
кто меньше?

[sil]

а как сделать так, что бы можно было бы выделять блоки, которые должны сворачиваться в зависимости от нажатия на элемент из этого блока, а элементы другого блока не изменяли своё состояние? :)

[amorphis]

А, если использовать slideUp() и slideDown() для пока и скрытия блоков, то на «аккордеон» больше похоже… Но, как говорится, на вкус и цвет… :-)

Примерно вот так будет выглядеть :-)

www.leonidknyazev.ru/_test/serialer.htm

[XaocCPS]

хорошо, что в jQuery и в jQuery UI десяток, а то и больше анимаций
есть где поэкспериментировать всем и каждому :)

[Joric]

Сначала упорно жал на «password recovery». Вы учтите на будущее, что ссылки, подчеркнутые пунктиром, не должны уводить со страницы.

[XaocCPS]

сначала стоило прочитать заметку внимательно: "… ссылки и кнопки в примере не работают..."

[svistiboshka]

А как бы избавица от этого эффекта «инициализации»? (прыжка при загрузке)

[Grady]

супер, вот можно ли еще экзампл работы данного кода добавить в статью??

[XaocCPS]

а его там нет?

[Grady]

ой, блин, сорри, после выходных тормажу......)) тогда просто спасиб

[EugeneDest]

у вас Понедельник и Вторник выходные O_o?

[Kolan]

Такой элемент управления обладает существенным недостатком. Он содержит невидимые функции. Что это такое рассказывает Джеф Раскин.

[sshz]

До такого вида можно легко доработать своими руками

[xintrea]

Хорошо бы заголовок активного (раскрытого) элемента помещать на более другой фон, чем заголовки неактивных элементов. А то так как сейчас — сразу непонятно что происходит.

[BonySoft]

небольшое замечание: в демке не прописан цвет фона страницы; у меня в браузере выставлен «серый» и на нем подсказки практически не читаются

реализация очень понравилась: красиво и лаконично
спасибо

… вариант анимации, предложенный хабраюзером amorphis мне тоже кажется более жизненным :)

[silentroach]

мне кажется, лучше слайдом содержимое показывать.
и предыдущую открытую часть тоже закрывать плавно, а не рывком.

[blaberus]

Технология офигенная, но надо продумать поведение — пока что мозги сворачиваются в трубочку после этих рывков. И у уважаемого amorphis вышло, увы, не лучше…

Анимация это классно, но… её надо к чему-то другому применить…

Друзья, не сердитесь, но если я куда-то щёлкнул — не надо передвигать это место! Всё должно появляться здесь же, в районе щелчка!

[blaberus]

Похоже, можно попробовать сделать так:
При нажатии на заголовок свёрнуого блока, его разворачивать —
но НЕ сворачивать блоки, находящиеся сверху его. Тогда то, на что я щёлкнул, не будет выскакивать из-под мышки.

…Коллеги тут послушали меня и сказали, что я вообще против аккордеонов. Боюсь, что да, это неудобно.
Не согласны?