Сворачиваем списки с помощью jQuery

Владимир | | CSS, HTML, JavaScript, Web разработка.

jquery collapsorz

Сегодня я хочу рассказать о небольшом плагине для jQuery под названием Collapsorz. Его можно использовать для уменьшения длины html списков или других вложенных структур тегов.

Чтобы лучше представлять, о чем идет речь, взгляните на демонстрационную страничку.

Применений для этого плагина можно найти множество. Например:

1) Выравнивать высоту блоков в сайдбаре. Тут лучше сильно не увлекаться. Вряд ли будет удачным решением свернуть блок со списком разделов сайта. Но если вы свернете блоки типа «Последние посетители» или «Топ комментаторов», то вреда большого не будет.

2) Прятать редко используемые пункты в меню. Предварительно, конечно, нужно отсортировать список с этими пунктами и разместить наиболее популярные в начале.

3) Использовать вместе с облаком тегов, разбитым на кластеры. Подобные решения часто применяются на сервисах социальных закладок.

4) Использовать для SEO. Часто оптимизаторы делают очень большие блоки ссылок на внутренние страницы сайта. Это даёт возможность получить много страниц 2-ого уровня. Но выглядят такие блоки далеко не лучшим образом (много мелкого текста).

Примечание. Часто эти блоки вообще убирают подальше от глаз посетителей. Например, во вложенные табы.

Принцип работы плагина.

1) Определяет (в зависимости от настроек) элементы, которые необходимо спрятать.

2) Присваивает им стиль style="display: none;"

3) Добавляет ссылку с помощью которой можно сворачивать / разворачивать список.

Рассмотрим приведенный в начале статьи пример.

HTML разметка имеет вид

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <title>Тестирование плагина collapsorz</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="listWrapper"> <ul id="my_list"> <li>Пункт 111</li> <li>Пункт 222</li> <li>Пункт 333</li> <li>Пункт 444</li> <li>Пункт 555</li> <li>Пункт 666</li> <li>Пункт 777</li> <li>Пункт 888</li> <li>Пункт 999</li> <li>Пункт 000</li> </ul> </div> <div id="divWrapper"> <div id="my_div"> <a href="#">Ссылка 1</a> <a href="#">Ссылка 2</a> <a href="#">Ссылка 3</a> <a href="#">Ссылка 4</a> <a href="#">Ссылка 5</a> </div> </div> <script type="text/javascript" src="jquery-1.3.1.min.js"></script> <script type="text/javascript" src="jquery.collapsorz_1.1.min.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>

Как видите, на странице есть ненумерованный список (строки 18-29) и блок со ссылками (строки 33-39).

В конце страницы подключены: библиотека jQuery, плагин Collapsorz (jquery.collapsorz_1.1.min.js) и файл main.js в котором находится наш скрипт.

Обратите внимание. Для этого плагина не важно что именно вы хотите свернуть. Главное правильно указать родительский и дочерние элементы. Подробнее об этом чуть ниже.

Теперь рассмотрим main.js

$(function() {
    $("#my_list").collapsorz({
        minimum: 3
        , showText: "Развернуть список >>>"
        , hideText: "Свернуть список <<<"
    });
    
    $("#my_div").collapsorz({
        minimum: 3
        , showText: "Другие ссылки >>>"
        , hideText: "Скрыть <<<"
        , toggle: "a"
    });
});

Как видите, вся работа сводится к вызову одного метода collapsorz (строки 2 и 8). В параметрах которого мы указываем настройки плагина.

minimum – количество видимых пунктов, когда список свернут.

showText, hideText – текст ссылок сворачивающих / разворачивающих список.

toggle – в этом параметре нужно указать jQuery селектор, определяющий какие элементы нужно прятать. В данном случае значение этого параметра равно "a". Это означает, что плагин будет искать все ссылки внутри блока #my_div и сворачивать их.

Таким образом, можно организовать сворачивание блоков со сложной разметкой.

Оформление.

Плагин добавляет только один элемент – ссылку свернуть/развернуть. Этой ссылке присваивается 2 CSS класса.

Первый (toggler) — остаётся у ссылки постоянно.

Второй (collapsed/expanded) – изменяется в зависимости от того свернут или развернут список.

Кроме того, с помощью параметра wrapLink можно указать произвольную HTML разметку, которая будет добавлена к ссылке.

А параметр linkLocation указывает где разместить ссылку, над или под списком.

Как видите, использование плагина не представляет особой сложности. На официальном сайте вы найдете ещё несколько интересных примеров.

Если есть желание, можете скачать архив или поэкспериментировать с плагином.

До встречи!

  • спасибо офигенная вещь, все хотел спросить, а что есть jquery? какой-то js-фреймворк? просто думаю взяться за него, но после php…стоит ли?

    • Да, так и есть, это js библиотека. После php, кхм, это совершенно разные вещи. Если вам приходится сталкиваться с js на практике, то стоит. Вы удивитесь, на сколько быстрой может быть разработка, казалось бы невероятных вещей. Желаю удачи 😉

      • спасибо разъяснения 🙂

    • Big_Shark

      PHP — серверая часть
      jquery(js-фреймворк) — клиентская часть.
      Их стоит изучать одновременно.

  • спасибо офигенная вещь, все хотел спросить, а что есть jquery? какой-то js-фреймворк? просто думаю взяться за него, но после php…стоит ли?

    • Да, так и есть, это js библиотека. После php, кхм, это совершенно разные вещи. Если вам приходится сталкиваться с js на практике, то стоит. Вы удивитесь, на сколько быстрой может быть разработка, казалось бы невероятных вещей. Желаю удачи 😉

      • спасибо разъяснения 🙂

    • Big_Shark

      PHP — серверая часть
      jquery(js-фреймворк) — клиентская часть.
      Их стоит изучать одновременно.

  • Пробовал приспособить таким образом

    $(function() {
    $ ( » # NewLay » ) . collapsorz ( {
    minimum : 0
    , showText : » Развернуть >>> »
    , hideText : » Свернуть <<< »
    , toggle : » div »
    } ) ;
    } ) ;

    Имеется слой внутри которого также несколько слоёв, что нужно свернуть. IE съедает и работает, а OPERA отказывается, также, при изменении в вашем промере (из архива) параметр MINIMUM на меньшее значение, то опера также отказывается работать с этим скриптом…
    Есть пути решения?
    P.S. Пробелы стоят везде, так как иначе код не отправляется.

    • Аномалия какая-то 🙂
      На их сайте есть пример с minimum:0 и он отлично работает и в Opera и в FF.
      Но когда я скопировал их пример себе он не заработал.
      Причем нормально начинает работать только если изменить параметр minimum.
      Буду экспериментировать дальше.

  • Пробовал приспособить таким образом

    $(function() {
    $ ( » # NewLay » ) . collapsorz ( {
    minimum : 0
    , showText : » Развернуть >>> »
    , hideText : » Свернуть <<< »
    , toggle : » div »
    } ) ;
    } ) ;

    Имеется слой внутри которого также несколько слоёв, что нужно свернуть. IE съедает и работает, а OPERA отказывается, также, при изменении в вашем промере (из архива) параметр MINIMUM на меньшее значение, то опера также отказывается работать с этим скриптом…
    Есть пути решения?
    P.S. Пробелы стоят везде, так как иначе код не отправляется.

    • Аномалия какая-то 🙂
      На их сайте есть пример с minimum:0 и он отлично работает и в Opera и в FF.
      Но когда я скопировал их пример себе он не заработал.
      Причем нормально начинает работать только если изменить параметр minimum.
      Буду экспериментировать дальше.

  • 2AngelOfFate

    Если действительно заинтересовались jQuery могу прислать пару книг (на английском).

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

  • 2AngelOfFate

    Если действительно заинтересовались jQuery могу прислать пару книг (на английском).

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

  • Спасибо, буду эксперементировать)

  • Спасибо, буду эксперементировать)

  • Владимир :

    если Вам не сложно,то вышлите и мне книги пожалуйста!
    Адрес почты в комментарии указаны. Спасибо заранее.

  • Владимир :

    если Вам не сложно,то вышлите и мне книги пожалуйста!
    Адрес почты в комментарии указаны. Спасибо заранее.

  • scratcher

    Здравствуйте Владимир, спасибо за статью! У меня остался один вопрос — не встречали ли Вы настроек для указания какие элементы списка надо сворачивать: начальные или конечные? У меня задача как раз свернуть N начальных пунктов.
    На оф. сайте ответа не нашёл, хотя возможность расположить ссылку «Свернуть/развернуть» перед списком (как если бы список рос вверх) внушает оптимизм.

    • scratcher

      Забыл сказать, что не хочется добавлять какие-нибудь новые атрибуты к скрываемым элементам списка, чтобы облегчить плагину работу. С ними, в принципе, достаточно просто сделать и без Collapsorz.

      • Нет, по-моему эта функция не поддерживается. Положение ссылки «Свернуть/развернуть» не влияет на работу плагина.
        Наверное, проще будет самостоятельно сделать. Или плагин доработать.

  • scratcher

    Здравствуйте Владимир, спасибо за статью! У меня остался один вопрос — не встречали ли Вы настроек для указания какие элементы списка надо сворачивать: начальные или конечные? У меня задача как раз свернуть N начальных пунктов.
    На оф. сайте ответа не нашёл, хотя возможность расположить ссылку «Свернуть/развернуть» перед списком (как если бы список рос вверх) внушает оптимизм.

    • scratcher

      Забыл сказать, что не хочется добавлять какие-нибудь новые атрибуты к скрываемым элементам списка, чтобы облегчить плагину работу. С ними, в принципе, достаточно просто сделать и без Collapsorz.

      • Нет, по-моему эта функция не поддерживается. Положение ссылки «Свернуть/развернуть» не влияет на работу плагина.
        Наверное, проще будет самостоятельно сделать. Или плагин доработать.

  • Виталий

    Спасибо.

  • Виталий

    Спасибо.

  • Есть ли другая возможность осуществления этих списков (без использования jQuery)? Причём универсальная или практически…

    • Без использования jQuery сделать можно, но без JavaScript вообще — нельзя.
      Т.е. можно написать свою JavaScript функцию, которая будет делать тоже самое. При этом можно использовать другие библиотеки, хотя, наверняка для них существуют подобные плагины.

  • Есть ли другая возможность осуществления этих списков (без использования jQuery)? Причём универсальная или практически…

    • Без использования jQuery сделать можно, но без JavaScript вообще — нельзя.
      Т.е. можно написать свою JavaScript функцию, которая будет делать тоже самое. При этом можно использовать другие библиотеки, хотя, наверняка для них существуют подобные плагины.

  • здравствуйте Владимир у меня возникла проблемка с использованием данного скрипта.когда я добавил его на свою страничку чтобы он не показывал ссылки не зарегестрированым пользователям я столкнулся с тем что когда страница начинает загружаться ссылки все равно видны ,и только по окончанию загрузки они скрываються.я уже задал defaultState: «collapsed »
    все равно не помогло.если не трудно помогите.

    • Это нормальное поведение. Скрипт начинает выполнение только после загрузки страница, иначе может оказаться, что списка, который нужно скрыть, просто не существует.

      Но решить проблему можно. Сделайте список невидимым с помощью CSS (display:none). Страница загрузится, списка видно не будет. Дальше подключаете плагин и делаете список видимым (изменяете с помощью js свойство display).

      • попробовал ссылки убрал но после загрузки плагина ссылки все равно не видны.в css через div id display :none cылки заключил в этот div; его взял div id через который работает плагин js.подскажите пожалуйста что я сделал не так?очень нужно чтобы ссыло до загрузки плагина видно не было.

        • После того, как плагин подключен, нужно сделать ссылки видимыми, т.е. установить display:block.

  • здравствуйте Владимир у меня возникла проблемка с использованием данного скрипта.когда я добавил его на свою страничку чтобы он не показывал ссылки не зарегестрированым пользователям я столкнулся с тем что когда страница начинает загружаться ссылки все равно видны ,и только по окончанию загрузки они скрываються.я уже задал defaultState: «collapsed »
    все равно не помогло.если не трудно помогите.

    • Это нормальное поведение. Скрипт начинает выполнение только после загрузки страница, иначе может оказаться, что списка, который нужно скрыть, просто не существует.

      Но решить проблему можно. Сделайте список невидимым с помощью CSS (display:none). Страница загрузится, списка видно не будет. Дальше подключаете плагин и делаете список видимым (изменяете с помощью js свойство display).

      • попробовал ссылки убрал но после загрузки плагина ссылки все равно не видны.в css через div id display :none cылки заключил в этот div; его взял div id через который работает плагин js.подскажите пожалуйста что я сделал не так?очень нужно чтобы ссыло до загрузки плагина видно не было.

        • После того, как плагин подключен, нужно сделать ссылки видимыми, т.е. установить display:block.

  • Владимир Новицкий

    Спасибо за скрипт.
    Вопрос. Что нужно добавить в скрипт, чтобы раскрытие и закрытие происходило плавно?

    • Этот пример довольно старый и, похоже, плагин Collapsorz уже не поддерживается.

      Поэтому я написал новый пример и выложил его на jsFiddle — http://jsfiddle.net/vladimir_s/3sEQE/3/ Тут используются функции show и hide, но вместо них можно использовать другие эффекты — http://api.jquery.com/category/effects/

      • Владимир Новицкий

        Спасибо. Но по анимации получается, что пункты, как бы растягиваются по вертикали. А есть возможность, чтобы они просто съезжали вниз? Или это особенность скрипта?