Сегодня я хочу рассказать о небольшом плагине для 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 указывает где разместить ссылку, над или под списком.
Как видите, использование плагина не представляет особой сложности. На официальном сайте вы найдете ещё несколько интересных примеров.
Если есть желание, можете скачать архив или поэкспериментировать с плагином.
До встречи!
