bem-snippets

Our BEM-based html/css/js library

##List of bem-snippets

b-accordion

Независимый аккордион блок, реализует отображение/скрытие блока <div class="b-accordion__content"> по клику на <h3 class="b-accordion__header">. Для реализации данного аккордиона подключаем библиотеку jquery-ui.custom.min.js

b-btn

Реализация кнопки для сайта по умолчанию class="b-btn", и реализация кнопки с модификатором class="b-btn -ico_play".

b-controls

Реализация расположения элементов формы и их групировка.

b-event

Пример использования разметки microdata форматов (microdataOrganization, microdataEvent)

b-faq

Html-разметка для независимого блока FAQ, реализована списком dl, dt, dd

b-findFormInputbtn

Html-разметка для поля поиска по сайту, с использованием иконки поиска

b-form__result

Html-разметка для блока получения результата в результате какого-нибудь запроса, с использованием картинки подгрузки .

b-googleMap

HTML-разметка для google карты с использованием блока <div id="map-canvas"></div> и подключением необходимой библиотеки для отображения карты. А также инициализация карты(в файле main.js) по заданным координатам.

b-hoverHint

HTML-разметка для независимого блока с подсказкой при наведении, используются также необходимое стилевое оформление.

b-langFlags

Независимый блок выбора страны и соответствующий к выбраной стране флаг, используя картинку спрайт.

b-menuScrollTo

Блок навигации для одностраничного сайта. Используется фиксированое меню прижатое к верху страницы, при переходе к нужному разделу на странице подсвечивается соответствующий пункт меню.

b-moreButton

Реализован js код для ссылки <a class="j-eventNewsMore" href="">Подробнее</a>. При клике на ссылку "Подробнее", необходимый блок розворачивается на всю свою высоту.

b-blog

Лента блога с Microdata + Microformats-1 + Microformats-2

b-popup

HTML-разметка для попапа с затемнением заднего фона.

b-questions

HTML-разметка для блока вопросов.

b-scheduleFormBtnGroup

HTML-разметка и стилевое оформление для блока рассписания авиарейсов: Туда и обратно , В одну сторону

b-scrollSidebar

Реализация прокрутки страницы к заданому хешу.

b-siteSearch

HTML-разметка независимого блока-формы "Поиск по сайту" <div class="l-siteSearch">.

b-slider

HTML-разметка независимого блока-слайдера, с использованием js плагинов cycle2 и иницыализации слайдера в файле main.js

b-socialButtons

HTML-разметка независимого блока социального шаринга с отображением блока подсчета, используя плагин share42.js

b-table-AFL

HTML-разметка таблицы бронирования авиабилетов и стилевое оформление данной таблицы.

fancyboxHash

Пример использования fancyboxHash, с использованием плагина historyhelperFancybox.js и инициализация history fancybox в файле main.js

input-extended

В данном примере можно выбрать направление откуда/куда. При клике на иконку самолета подгружается попап с направлениями из которого можно выбрать город, или же при написании названия города автоматически подгружается попап со списком городов.

j-datepicker

HTML-разметка для блока datepicker, используя библиотеку jquery-ui.custom.min.js и инициализацию datapicker $('.j-datepicker').datepicker();

j-floatingBlock

js-код позволяющий зафиксировать сайдбар, и при прокрутке страницы вниз сайдбар всегда остается в зоне видимости и плывет по странице, достигая футера или хедера.

j-inputNumbStep

Кроссбраузерная реализация <input class="b-number" type="number" min="0" max="20" step="1" /> с использованием для инпута стрелочек при клике на которые число внутри инпута увеличивается или уменьшается. Здесь применяется плагин jquery.fs.stepper.js и инициализируем таким образом $("input[type='number']").stepper();.

j-outDate

js-код делает не активными даты в datepicker. Даты берутся из массива, можно удалять даты которые из массива, а можно оставлять даты только из массива в календаре.

j-radioCheckboxCustom

Пример простой кастомизации чекбоксов и радиобатонов, реализованый в файле j-radioCheckboxCustom.js.

j-selectCustom

Пример простой кастомизации <select name="">...</select>, реализованый в файле js-selectCustom.js.

j-simpleJQueryPager

js-код создает постраничную пагинацию не перегружая страницу. Мы указываем сколько элементов должно отображатся на одной странице, в результате функция берет все количество элементов списка и создает нужное количество страниц.

j-zoomProduct

HTML-разметка для галереи продуктов, при клике на продукт, всплывает попап с увеличеным изображение данного продукта. Используется плагин jquery.elevatezoom.js и его инициализация в файле main.js

jq-validate

HTML-разметка формы и валидации элементов формы. Использется плагин jquery.validate.js и обязательно additional-methods.js, инициализация плагина валидации происходит в файле main.js, так же там дописываем дополнительные методы, или же задаем правила для появления блока с ошибкой.

microdataOrganization

HTML-разметка для блока с полным набором микроформатов для тега <address></address>.

microdataPlace

Разметка фикроформатов для google карты.

scrollToHash

js-код позволяющий проскролить страницу к заданому хешу, используется плагин jquery.smooth-scroll.js, инициализация данного плагина происходит в main.js

table

HTML-разметка таблпицы и ее стилевое оформление.

l-siteAccess

HTML-разметка для независимого блока логина на сайт. Также стилизация данного блока и js-реализация. При клике на кнопку попап с формой логина отображается/скрывается. Также попап логина скрывается при клике в любой точке сайта.