Доброго времени суток всем, кто увлекается изучением фреймворка Bootstrap. Сегодня я поведаю вам об одном очень интересном и достаточно непростом элементе под названием Bootstrap Affix Plugin.
Из этой статьи вы узнаете, для чего используют этот плагин, найдете описание всех встроенных элементов управления таких как классы, методы, опции, события и научитесь выполнять с их помощью настройку веб-страниц. А под конец прочтения публикации вы найдете классный пример программной реализации лэндинга. Ну а теперь перейдем к делу!
Для начала разложим все по полочкам
С данным плагином обычно мало кто знаком, так как им пользуются уже проскиллованные разработчики. )
Само английское наименование элемента дословно переводится как «прикрепить, приклеить». Из этого следует, что описываемый инструмент Bootstrap-а 3 позволяет прикрепить выбранные объекты веб-страницы к какой-то ее определенной области. При этом данное поведение последних переключаемое, т.е. изменяется от статического позиционирования к фиксированному и наоборот.
Плагин Аффикс часто применяется для закрепления навигационных панелей (Navbar, Sigebar и других) и блоков, важных кнопок или сообщений. В качестве примера можно привести сайт http://www.w3schools.com/bootstrap/default.asp, который достаточно часто фигурирует в моих статьях, связанных с фреймворком. Обратите внимание на изменение положения панели меню сверху страницы. Вот так работает Affix.
Куда же без теории
Начну с классов
В изучаемом плагине все строится вокруг трех классов: .affix, .affix-top и .affix-bottom. Каждый из них отвечает за конкретное состояние. При этом стоит обязательно прописывать css-правила, чтобы регулировать позиции размещения объектов.
Так, если выбранный элемент закрепляется сверху, то стоит указывать top, а если снизу – bottom. Иногда это просто значение «0», а в некоторых случаях вам придется помучатся и подобрать позиционирование в пикселах.
Тут стоит отметить, что из-за неправильной настройки отступов в коде css и js или их несовпадение может вызвать такую проблему, как blinking (flickering), что означает мерцание объекта. В этом случае код не работает корректно в основном из-за невнимательности верстальщика и неверной установкой чисел. Поэтому в первую очередь стоит проверить все размерности.
Несколько слов о важных атрибутах
Для создания приклеенного объекта нужно воспользоваться несколькими атрибутами. Во-первых, это data-spy, в котором в качестве значения стоит указать «affix». Во-вторых, часто используется такой вид атрибута, как data-offset-top/bottom, где в качестве значения указывается отступ от края в пикселах.
Доступные возможности в JavaScript
Помимо data-атрибутов, как и обычно, существуют аналогичные методы в скриптовой библиотеке jQuery. В первую очередь вызов плагина происходит через метод $.affix (). В нем можно использовать две опции: offset и target.
- Offset используется для указания количества пикселей, на которое прокрутится выбранный элемент и после закрепится. По умолчанию стоит параметр 10. Вы можете контролировать сразу два направления, добавляя размерность для шапки и «подвала». Сейчас будет кстати добавить информацию о дополнительной плюшке, встроенной в библиотеку JavaScrip-а. Это специальный метод .outerHeight (true), который функционирует вместе с navbar. С его помощью производится автоматическое закрепление навигационной панели сверху.
- Target указывает, к какому элементу применится параметр affix.
Ну а теперь мы плавно подошли к событиям. В плагине Аффикс их немного больше, чем в остальных инструментах фреймворка. Но все их можно поделить на 2 группы: события, которые срабатывают перед фиксированием позиции элемента, и события, которые вызываются уже после закрепления объекта.
Событие | Описание |
affix.bs.affix | Применяется перед фиксированием положения элемента, т.е. когда класс .affix- top должен будет замениться на .affix класс. |
affix-top.bs.affix | Вызывается перед тем, как верхний объект вернется на его начальную позицию, т.е. перед тем, как класс .affix заменится на .affix- top. |
affix-bottom.bs.affix | Применяется перед тем, как нижний элемент вернется на свою стартовую позицию. В этом случае перед изменением .affix на .affix-bottom. |
affixed.bs.affix | Срабатывает уже после установки фиксированного положения элемента, т.е. после замены классов. |
affixed-top.bs.affix | Вызывается после того, как верхний объект вернулся к начальному положению, т.е. после того, как был установлен класс .affix- top. |
affixed-bottom.bs.affix | Применяется сразу после того, как нижний элемент принял первоначальную позицию, т.е. произошла замена класса на .affix- bottom. |
Контрольная проверка знаний
Ну а теперь сгребем все полученные теоретические знания и применим их к написанию небольшого симпатичного веб-приложения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!DOCTYPE html> <html> <head> <title>Cool Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .navbar, .container-fluid {min-width:490px;} .container-fluid { text-align:center; background-color:#FFD700; text-shadow: 0 0 4px #010; color:#fff; height:179px; } .footer {height: 65px; margin-top: 15px; background-color:#8B4500;} .affix { top: 0; border-color: #010; width: 100%; background-color: #8B3A3A; transition: all .6s ease-in; -webkit-transition: all .6s ease-in; } .affix a { color: #fef !important; padding: 15px !important; -webkit-transition: all .6s ease-in; transition: all .6s ease-in; } .affix-top a { padding: 29px !important; } #page1{padding:65px; margin-top: -25px; height: 250px; background-color: #EE6363;} #page2{padding:65px; margin-top: 15px; height: 250px;background-color: #FF8247;} #page3{padding:65px; margin-top: 15px;height: 250px;background-color: #FF7F00;} </style> </head> <body> <div class="container-fluid" > <h1>Лендинг-сайт с примером</h1> <h3>Реализован плагин Аффикс!</h3> <h3>Прокрутите контент страницы, чтобы проанализировать работу data-spy="affix".</h3> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="178"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Navb"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse" id="Navb"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Главная</a></li> <li><a href="#page1">Один</a></li> <li><a href="#page2">Два</a></li> <li><a href="#page3">Три</a></li> </ul> </div> </nav> <div id="page1" class="container-fluid"> <h1>Первая страница</h1> <h2>Здесь расположена ключевая информация.</h2> </div> <div id="page2" class="container-fluid"> <h1>Вторая страница</h1> <h2>Здесь расположена интересная информация.</h2></div> <div id="page3" class="container-fluid"> <h1>Третья страница</h1> <h2>Здесь расположена контактная информация.</h2></div> <footer class="container-fluid footer"> <h3>Все права защищены</h3> </footer> </body> </html> |
Не забывайте делиться полученными знаниями с друзьями и обязательно вступайте в группу моих любознательных подписчиков. Пока-пока!
С уважением, Роман Чуешов