Twitter Bootstrap javascript
Что же это такое – Twitter Bootstrap? Решили как-то ребята из команды Twitter сделать удобный js + css + html framework, который включает в себя множество разнообразных инструментов, и облегчает верстку как обычной, так и мобильной версии сайта. В помощь нам обещают многоколоночную сетку html макета со множеством готовых позиций, множество готовых решений для оформления различных элементов при помощи css, единообразный вид сайта как в новых, так и в старых браузерах (например: IE7), заявляют о поддержке мобильных устройств, смартфонов и планшетов, предлагают огромное количество различных javascript эффектов, так как Twitter Bootstrap содержит в себе 13 различных jQuery плагинов и поддерживает jQuery. При этом на самом сайте twitter bootstrap приводят примеры, дают посмотреть на сайты, где уже внедрен Twitter Bootstrap, расписывают документацию (даже частично на русском) по применению Twitter Bootstrap. О возрастающей популярности этого framework говорит то, что команда разработчиков Joomla 3.0 (3.5) включила в свои шаблоны данный framework, и это в свою очередь говорит о его широких возможностях и большом потенциале.
Идея навигации для статьи на Twitter Bootstrap
Давайте рассмотрим работу с javascript плагинами из инструментария Twitter Bootstrap на примере создания дополнительной навигации в статьях, основанной на разделах содержимого. Допустим, мы хотим расположить на сайте широкий обзор или очень длинную статью. А вначале материала добавить меню содержания разделов. Пункты содержания можно привязать к частям статьи. Например, одноименным заголовкам, обозначающим соответствующий раздел, для того, чтобы наш с Вами посетитель мог при помощи меню содержания статьи перейти к любой ее части одним щелчком мыши. Все элементарное просто. Остается только расставить ссылки и назначить соответственные анкоры. Но вот, прочитав часть статьи, посетитель хочет вернуться к содержанию, и ему опять придется воспользоваться scroll колесиком мышки или клавиатуры, чтобы вернуться в начало? Неудобно.
Возникает идея, а что если сделать наше содержание разделов статьи в виде частично плавающего меню? Всегда под рукою? Чтобы при переходе в начало статьи оно становилось на свое место, а при активной прокрутке фиксировалось в видимой области экрана, всегда позволяя перемещаться между пунктами навигации в один щелчок. Удобно? Вот было бы еще здорово подсветить тот раздел, который мы сейчас читаем. Задать ему оформление, которое бросается в глаза.
Меню навигации по содержимому на Twitter Bootstrap.
Итак, для начала определимся, какие плагины из javascript из twitter bootstrap нам понадобятся?
- affix – плагин для частичной фиксации меню. Плагин отслеживает положение scroll bar на странице во время прокрутки и в зависимости от настроек меняет для указанных элементов три класса: .affix- top – когда элемент находится в самом верху до начала прокрутки, .affix – во время активной прокрутки по странице или элементу, .affix- bottom – в самом низу при окончании прокрутки. При этом, имея все три класса на руках, можно настроить поведение нашего меню разделов, например, задав ему до начала прокрутки affix- top {position: static; left: auto; right: auto; bottom: auto; top: auto;} – когда мы находимся в шапке сайта, и наше меню разделов расположено на своем месте. Во время прокрутки и при окончании прокрутки – .affix, .affix- bottom {position: fixed; top: 10px;} – когда мы прокручиваем страницу и наше меню скрывается из виду, делаем его фиксированным, также данный плагин отслеживает прокрутку как по горизонтали, так и по вертикали, и можно задать расстояние от верхнего угла экрана, или от левого угла экрана, по прокрутке которого изменять класс с . affix- top на . affix.
- scrollspy — для отслеживания текущего раздела и выделения связанного с ним пункта меню используем плагин scrollspy. Данный плагин позволяет связать меню с анкорами на странице, и когда мы находимся в области анкора при прокрутке содержимого, класс связанного с анкором меню меняется на .active. В данном случае под анкором подразумевается область div с определенным id, связанная с пунктом меню. То есть мы можем подсказать посетителю, какой именно раздел он сейчас читает, подсветив текущий связанный раздел в меню при чтении его содержимого.