Гармошка или скрытый контент
В этой статье я рассмотрю пример объекта на сайте представляющего собой раздвигающийся список или скрытый контент, который изначально не виден, но появляется как реакция на какое-то событие, например клик на ссылке. Такие объекты часто встречаются на сайтах при записи оглавления какого-либо крупного документа или книги. Но вариантов много. Я рассмотрю простейший пример, чтобы проиллюстрировать идею, а каждый может развить эту идею так, как ему интересно. В моем примере есть список ссылок (тег якоря <a>), но вместо адреса указана функция javascript с разными значениями параметра. При клике на любом адресе под ним появляется дополнительный список, который может представлять собой текст или новые ссылки, или картинки, кому как интересно. Текст, в свою очередь, может быть внутренне структурирован. Хотя в данном примере используется функция javascript, но ее основное назначение -- это поменять CSS форматирование, то есть это пример совместного использования CSS и javascript.
Фокус использования javascript состоит в том, что при клике на ссылке, открывающем один скрытый контент, остальные автоматически закрываются, так что всегда открыт только один кусок. Именно это и позволяет всегда иметь вместо длинного списка его укороченную часть. Как обычно, я сначала покажу полный код сайта, содержащего объект, а потом расскажу что этот код означает. Код можно скопировать в отдельный файл и посмотреть. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S.
Теперь я объясню пример. Первые теги достаточно очевидны. В теге <style> форматируется тег параграфа и еще раз с классом m, при этом меняется только поле окружения (отступы). А также все области div с классом v объявлены невидимыми. Вот и весь фокус скрытого текста. Далее стоит javascript функция, у которой единственный не универсальный элемент -- это значение переменной im. Оно должно быть равно числу скрытых областей, которые реально выписаны на сайте. У функции visib(n) есть один параметр -- это номер области, которую надо показать. Все скрытые области имеют id типа v100, v101 и так далее. Соответсвенно такие id легко сформировать зная номер области. Это и делается. Функция сначала в цикле делает все области невидимыми, а затем область с номером n делает видимой, объявляя ее блоком, n считается от нуля. Так как высота области не указана, то она автоматически определяется, чтобы вместить весь контент. А затем в теле сайта, после каждой ссылки внутри параграфа с классом m ставится div область с id из указанных выше, а в ссылке указывается вызов функции с соответствующим номером, номер и id должны быть согласованы. Внутри области могут быть обычные параграфы и вообще любой контент.
В такой технике удобно делать длинные списки ссылок на сайты, примером может служить мой список, который фактически заменяет закладки, избранное и прочие сервисы браузеров. Плюс такого списка в том, что его можно настраивать по своему вкусу. Минус в том, что надо уметь это делать и как раз научить этому призвана данная статья. Я рассмотрел совсем простой случай одноуровневой системы скрытого контента. В принципе можно сделать и более сложную систему, когда скрытый текст имеет свою систему скрытого текста. В этом случае надо использовать матрицу номеров областей и двухярусные id типа v10203, где первая цифра после единицы (2) соответствует внешней системе, а вторая (3) внутренней системе. Соответственно функция должна иметь два аргумента n и m, а id вычисляется по формуле 'v'+(10000+n*100+m). Я не буду писать пример кода, он не намного сложнее, чем указанный, но это редко необходимо. Я только скажу, что скрытый текст можно было бы делать и по другой системе, используя функцию innerHTML. При этом весь HTML контент записывается в текстовый массив txt[n] и если нужно его показать, то он передается в область, если нет, то в область передается строка, состоящая из одного пробела. О том как широко и плодотворно можно использовать функцию innerHTML я уже писал в других статьях.
Автор: Виктор Кон, 9.09.2013
