Обзор краткий такого же небольшого плагина Smooth Scroll, написанного под библиотеку jQuery.
Этот скрипт предназначен только для одной цели - плавного скроллинга (прокрутки) страницы. Благодаря этому улучшается юзабилити страницы и сайта в целом, так как нет резких скачков при переходе по ссылкам.
Подключение плагина Smooth Scroll
Подключение Smooth Scroll к HTML-странице производится как обычно:
… где первая строка - это библиотека jQuery, вторая строка - плагин Smooth Scroll, третья строка - файл инициализации плагина Smooth Scroll.
Инициализация Smooth Scroll
Для того, чтобы заработал плагин Smooth Scroll и на странице появилась плавная прокрутка, нужно в js-файле скрипта прописать строки:
… то есть - всем ссылкам страницы присвоить метод
1
smoothScroll()
, что дает плавный скроллинг. В принципе, этого достаточно - больше ничего и не надо.
Варианты выборки в Smooth Scroll
Помимо показанной выше строчки, скрипт Smooth Scroll имеет несколько других вариантов режима работы. Другими словами, эти режимы работы - все навсего усложненный первый вариант, вариации на тему выборки HTML-элемента в библиотеке jQuery.
Примеры выборок взяты мною из файла
1
readme.md
, переводить их мне совсем не хочется; да и нет в этом необходимости - все понятно даже по коду:
Allows for easy implementation of smooth scrolling for same-page links.
Works like this:
1
$('a').smoothScroll();
Specify a containing element if you want:
1
$('#container a').smoothScroll();
Exclude links if they are within a containing element:
Люблю я разбирать новые слайдеры и пробовать с ними работать. На этот раз я столкнулся с неизвестным для себя плагином FlexSlider в одном из готовых HTML-макетов австралийского фрилансера Peter Finlan.
Домашняя страничка слайдера FlexSlider располагается здесь - FlexSlider 2. Как сказано на официальной страничке, слайдер является адаптивным, периодически.
В арсенале у плагина заготовлена возможность автоматического генерирования перемотки изображений, пагинации страниц; показ не только изображений, но и видео. А вот заголовок для данного слайдера не предусмотрен, насколько я понял (поправьте меня, если я неправ - буду только рад, ибо слайдер понравился).
Зато у FlexSlider я впервые (для себя) встретил такую удобную возможность, как управление отображением стрелок перемотки или пагинацией через опции самого слайдера. То есть, не нужно копаться в сгенерированном коде DOM-дерева с помощью Firebug, чтобы найти там блок пагинации (к примеру) и отключить его через CSS-правило
1
display: block;
. В случае с FlexSlider все делается проще - прописал одну строчку
1
controlNav: false
и пагинация отключена.
Подключение FlexSlider
Подключение плагина FlexSlider к HTML-странице производится абсолютно стандартно, как и для любого другого плагина, написанного под библиотеку jQuery (я не забыл сказать, что FlexSlider написан под jQuery?). В моем случае я использовал версию jQuery 1.11.1. Здесь есть небольшое ограничение - FlexSlider 2.3.0 требует для своей работы как минимум jQuery 1.4.2. Кнопка для скачивания FlexSlider находиться там же, где вся остальная информация - FlexSlider Download.
Подключение FlexSlider в HTML:
HTML-разметка для FlexSlider
Разметка для слайдера на странице выполняется в виде блока-обертки и маркированного списка:
Пример взят с официальной странички и в нем оставлены имена классов для обоих блоков, как есть. Плагин при своей инициализации генерирует два дополнительных блока:
ol class=”flex-control-nav” - для пагинации изображений
ul class=”flex-direction-nav” - для стрелок перемотки изображений
… а также создает блок-обертку
1
div class="flex-viewport"
для списка
1
ul class="slides"
. То есть, разметка получается прозрачной и ясной.
Инициализация FlexSlider
Для инициализации плагина FlexSlider нужно в конфигурационном js-файле для случая самого простого вида написать такие строки:
В принципе, уже этого достаточно для создания слайдера FlexSlider - он уже работает. Можно стилизовать его самому с помощью CSS, или же подключить уже готовые CSS-стили и отредактировать их - кому как удобно. Я попробую отредактировать внешний вид слайдера сам:
slideshowSpeed: 7000, //Integer: Скорость слайдшоу в мс
animationSpeed: 600, //Integer: Скорость анимации в мс
initDelay: 0, //{Новое} Integer: Задержка инициализации в мс
-randomize: false, //Boolean: Случайный порядок слайдов
Использование функций
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{Новое} Boolean: Slider will use CSS3 transitions if available
touch: true, //{Новое} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{Новое} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
Первичное управление
controlNav: true, //Boolean: Создание навигации для постраничного управления каждым слайдом. Замечание: оставьте true для использования manualControls
directionNav: true, //Boolean: Создание навигации для кнопок назад/вперед (true/false)
prevText: “Previous”, //String: Тест для кнопки “previous” пункта directionNav
nextText: “Next”, //String: Тест для кнопки “next” пункта directionNav
Вторичная навигация
keyboard: true, //Boolean: Разрешает навигацию с помощью стрелок на клавиатуре (влево/вправо)
multipleKeyboard: false, //{Новое} Boolean: Разрешает управление с помощью клавиатуры по несколькими слайдерами. Поведение по умолчанию вырезает возможность управления клавиатурой при использовании более одного слайдера
mousewheel: false, //{Обновление} Boolean: Требуется плагин jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Управление навигацией по слайдам с помощью колесика мыши
pausePlay: false, //Boolean: Создание динамического pause/play элемента
pauseText: “Pause”, //String: Текста для кнопки “pause” элемента pausePlay
playText: “Play”, //String: Текст для кнопки “play” элемента pausePlay
Специальные свойства
controlsContainer: “”, //{Обновление} jQuery Object/Selector: Объявление какой контейнер элементов навигации будет применен. По умолчанию это FlexSlider. Например, можно использовать так $(“.flexslider-container”). Свойство игнорируется если элемент не найден.
manualControls: “”, //{Обновление} jQuery Object/Selector: Объявление пользовательской панели управления навигацией. Примером может быть $(“.flex-control-nav li”) или “#tabs-nav li img”, и т.п.. Количество элементов в вашей controlNav должно совпадать с количеством слайдов/табов.
sync: “”, //{Новое} Selector: Зеркало действий выполняемых над этим слайдером с помощью другого слайдера. Используйте с осторожностью.
asNavFor: “”, //{Новое} Selector: Внутренние свойства направленные на превращение слайдера в миниатюры с возможностью навигации для другого слайдера
Опции карусели
itemWidth: 0, //{Новое} Integer: Ширина Box-model отдельных элементов карусели, включая горизонтальные границы и отступы (padding)
itemMargin: 0, //{Новое} Integer: Отступ между элементами карусели
minItems: 0, //{Новое} Integer: Минимальное количество элементов карусели, которые будут видимы. Элементы будут плавно изменять размер при значении ниже заданного
maxItems: 0, //{Новое} Integer: Максимальное количество элментов карусели, которые будут видимы. Элементы будут плавно изменять размер при превышении этого лимита.
move: 0, //{Новое} Integer: Количество элментов в карусели, которые должны двигаться по анимации. Если 0, то слайдер будет двигать все видимые элементы
Callback API
start: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер загружает первый слайд
before: function(){}, //Callback: function(slider) - Срабатывает асинхронно с каждой анимацией слайдера
after: function(){}, //Callback: function(slider) - Срабатывает после каждой завершенной анимацией слайдера
end: function(){}, //Callback: function(slider) - Срабатывает, когда слайдер доходит до последнего элемента (асинхронный)
added: function(){}, //{Новое} Callback: function(slider) - Срабатывает после того, как слайд добавлен
removed: function(){} //{Новое} Callback: function(slider) - Срабатывает после того, когда слайд удален
Варианты слайдера FlexSlider
На официальной страничке плагина в прекрасно оформленном виде представлены [различные варианты][6] создания слайдера. Все они реализуются с помощью опций этого плагина и дополнительной HTML-разметки.
Например, чтобы создать слайдер с thumbnail-пагинацией, нужно прописать в js-файле настроек:
… а HTML-разметку изменить таким образом:
Но, в принципе, в этом случае рассказывать о возможных вариантах слайдера достаточно глупо - можно и нужно посетить официальную страничку и там смотреть примеры создания.
В готовом шаблоне одного фрилансера встретил использование Animate.css - библиотеки CSS3-эффектов, созданной на самом же CSS3.
Ранее я уже встречал упоминание об этой библиотеке - Easy CSS3 Animation with Animate.css. Вот теперь пришла пора познакомиться с нею детально, что называется - на практике.
Кстати, официальная страница этого проекта расположена здесь - Animate.css. На ней можно посмотреть все возможные для этой библиотеки эффекты и подобрать подходящий в выпадающем списке.
Откровенно говоря, я приготовился к обстоятельному изучению этой библиотеки, но все оказалось предельно просто. Все, что нужно для подключения Animate.css - это скачать полную версию по ссылке Download Animate.css. Или же перейти на GitHub - View on GitHub, чтобы выбрать сжатую (
1
animate.min.css
) или несжатую (
1
animate.css
) версию библиотеки.
Подключение Animate.css
Для подключения библиотеки Animate.css в готовый HTML-проект, достаточно подключить в “шапке” документа скачанный CSS-файл
1
animate.css
:
И это все! Больше никаких действий не потребуется - все остальные манипуляции нужно выполнять в HTML-коде, добавляя необходимые CSS-классы из библиотеки Animate.css к нужным HTML-элементам.
Добавление CSS-классов из Animate.css
Первое, что нужно помнить - для нужного HTML-элемента необходимо добавить обязательный класс
1
.animated
. CSS-расшифровка этого класса также предельно проста:
Второе - на странице проекта подбираем для себя нужный\понравившийся эффект, запоминаем имя (пусть в данном случае это будет
1
bounceIn
) этого эффекта и добавляем его в качестве имени класса к HTML-элементу, у которого уже есть класс
1
.animated
(вспоминаем основы CSS - такая конструкция называется мультиклассовостью):
Все - можно проверять работу библиотеки Animate.css.
Использование jQuery c Animate.css
Если в проекте используется библиотека jQuery (а она применяется почти всегда), то применение библиотеки Animate.css еще больше упрощается, а HTML-разметка делается семантичной. Для этого подключаю библиотеку jQuery:
… и прописываю в скрипте инициализации
1
animate_me.js
:
Вуаля - все отлично работает!
Можно немного усложнить задачу и добавить с помощью Jquery событие
1
hover
к элементу
1
img
, затем “повесить” на него класс анимации
1
rotateIn
и
1
animated
из библиотеки Animate.css:
Управление задержкой анимации
Можно управлять задержкой анимации и скоростью анимации, изменив значения в классе
1
.animated
. Например, с
1
animation-duration: 1s
на
1
animation-duration: .4s;
:
Полный код примера на Animate.css
Полный код рассмотренного в этой статье примера привожу ниже.
Короткая статья, посвященная вопросу кросс-браузерности такого HTML5-атрибута для формы, как
1
placeholder
.
Недавно столкнулся в подобным вопросом, решение не смог найти. Однако, в книге “Недостающее руководство по HTML5” случайно столкнулся с подробным описанием решения этой маленькой проблемы. Проблема и вправду маленькая - вопрос поддержки или не поддержки браузерами данного атрибута на сегодняшний день - это мелочь. Ну правда, разве пострадает функциональность верстаемого сайта от того, что в поле поиска не будет отображаться подстановочный текст? Конечно, нет!
Еще один момент - говоря о кросс-браузерной поддержке атрибута
1
placeholder
, почти всегда подразумевается на самом деле поддержка этого атрибута только одним браузером. Конечно, это многострадальный Internet Explorer версии 7 или 8. О версии Internet Explorer 6 можно уже забыть. Остальные браузеры нормально справляются со своей задачей и понимают, что такое
1
placeholder
.
Автор статьи обладает некоторой долей перфекционизма - для него и такая мелочь является принципиальной мелочью, камнем преткновения. И вот, этот камень можно отодвинуть в сторону.
Кросс-браузерные заплатки для HTML5
Начну с того, что решение вопроса кросс-браузерного
1
placeholder
было создано уже давно. Это для меня данный факт был открытием! Более того, существует большое количество способов, решающих данную проблему. Все они собраны воедино по одному адресу на GitHub - HTML5 Cross Browser Polyfills . Вся эта коллекция называется “Кросс-браузерные заплатки для HTML5”, но в нашем случае нужен только один раздел этой коллекции - Web Forms : input placeholder.
Ого - там не одно решение, а целых одиннадцать! Причем, все они реализованы на JavaScript, поэтому и кросс-браузерные. Выбирать можно любой, какой понравиться - принцип работы и способ подключения к HTML-странице у них всех почти одинаков. Я возьму для себя способ jquery.placeholder.js, просто потому, что название понравилось.
Плагин
1
jquery.placeholder.js
может реализовать поддержку атрибута
1
placeholder
как в Internet Explorer 7 или 8, так и в Internet Explorer 6. Ну, Internet Explorer 6 - это уже слишком! На момент написания статьи многие верстальщики (конечно, не все) имеют тенденцию “забывать” о существовании даже Internet Explorer 8.
Подключение плагина jquery.placeholder.js
Подключение плагина
1
jquery.placeholder.js
абсолютно стандартное для такого рода скриптов. Ниже привожу пример такого подключения в HTML-коде:
Затем идет скрипт инициализации для данного плагина. Общая картина будет выглядеть таким образом:
Плагин
1
jquery.placeholder.js
делает в HTML-документе выборку по двум HTML-элементам -
1
input
и
1
textarea
. А затем применяет к ним метод
1
placeholder()
- все просто.
HTML-форма с placeholder
Ниже привожу пример HTML5-формы, в которой применен атрибут
1
placeholder
в полях ввода, реализованных через элемент
1
input
. А также в элементе
1
textarea
:
Проверка поддержки placeholder в IE8
JS-скрипты подключены и создана HTML-разметка. Для тестирования работы плагина
1
jquery.placeholder.js
воспользуюсь браузером, в котором заведомо не реализована поддержка атрибута
1
placeholder
- это Internet Explorer 8. Открываю созданную HTML-страничку в этом браузере (связка Windows XP + IE8) и вижу результат:
Галочками отмечены поля, в которых сработал плагин
1
jquery.placeholder.js
- если бы не он, там было бы пусто. Отлично - плагин работает и его можно применять в деле, на готовом проекте!
Библиотека миксинов (mixin) под препроцессор Sass под названием Bourbon - вот о чем будет сегодняшний краткий обзор.
Данная статья не могла не появиться по нескольким причинам. Первая - я являюсь большим поклонником препроцессора Sass и библиотеки миксинов Compass под него. Библиотека Bourbon является аналогом Compass, просто она меньше по размеру и возможностям. Но это не значит, что она хуже - она обладает некоторыми возможностями, которых нет в Compass.
Помимо этого, существует прекрасная сравнительная статья Sass-гуру Hugo Giraudel, посвященная этим двум библиотекам под один препроцессор. Оригинал статьи находиться здесь - Sass Frameworks: Compass or Bourbon?, а посильный перевод этой статьи размещен здесь - Что выбрать - Compass или Bourbon?. В этой статье Юг Жиродель (Hugo Giraudel) приводит преимущества использования библиотеки Bourbon и сопутствующих ему пакетов, таких как Neat для создания адаптивной CSS-сетки (grid).
Однако, после прочтения вышеназванной статьи один вопрос остается открытым - а как установить библиотеку Bourbon? Что можно в ней делать и как это делать? На эти вопросы я постараюсь ответить самому себе (и возможно - вам, уважаемый читатель).
Установка библиотеки Bourbon
Инсталляцию библиотеки миксинов Bourbon я буду производить под операционной системой Linux Mint 17 Cinnamon, просто потому что мне так интереснее. Под OS Windows процесс ничем не отличается от того, который будет описан здесь. Единственное условие - на момент установки Bourbon в системе уже должны стоять и нормально работать Ruby + Sass.
Установка библиотеки сводиться к одной вещи - установке пакета
1
bourbon
под Ruby. Выполняется это одной командой:
Проверяю, какая версия этой библиотеки “попала” ко мне:
Отлично! Теперь можно приступать к разворачиванию проекта с поддержкой Bourbon.
Создание проекта Bourbon
Перехожу в директорию с опытными (подопытными?) образцами всего разного и создаю там папку с именем
1
bourbon
:
… и запускаю там команду:
Не знаю, как вы, а я сразу после этого задал себе вопрос - “А что это было?” Что это за команда и зачем она нужна? Все оказалось просто.
В библиотеке Compass в таблице стилей конкретно указывается, какой модуль необходимо подключить к проекту. К примеру, таким образом:
В результате Compass выборочно подгружает по сети только указанные модули. И ничего больше.
Библиотека Bourbon поступает прямо противоположно - она устанавливает локально, в отдельную папку проекта (имя этой папки всегда -
1
bourbon
) все миксины сразу, на все случаи жизни. Если посмотреть на содержимое папки
1
bourbon
, то увидим такую картину:
Видим, что все миксины “расфасованы” по папкам в зависимости от их назначения. Давайте “заглянем” в одну из этих подпапок - пусть это будет
1
css3
:
Видим здесь готовые миксины для создания самых различных CSS3-эффектов -
1
border-radius
,
1
gradient
,
1
transform
,
1
transition
и так далее. Ну, теперь все понятно, не правда ли?
Включение библиотеки Bourbon в проект
Дело осталось за малым - включить поддержку миксинов библиотеки в таблицу стилей. Выполняется это обычно, директивой
1
@import
. Для этого создаю структуру папок и файлов будущего проекта (однако, Compass это может делать одной командой!):
… и помещаю одну строку в таблице стилей
1
style.scss
:
Мониторинг изменений в проекте Bourbon
Чтобы автоматически отслеживать изменения в файле таблиц стилей
1
style.scss
и выполнять компиляцию в CSS-стили, запускаю команду мониторинга:
Использование библиотеки Bourbon
Ну и что, скажете вы? Что дальше? А ничего - дальше только пользоваться библиотекой Bourbon. Для этого с главной страницы проекта Bourbon переходим на страницу документации, нажав кнопочку Bourbon Documentation. В правом верхнем углу есть две ссылки, одна из которых “View Spec” - ведет на страницу CSS-документации MDN, а вторая “View Source” - на страницу GitHub c рабочими примерами миксинов.
Также видим, что миксинов здесь даже на беглый взгляд значительно меньше, чем в библиотеке Compass. Ну это ничего.
Bourbon - создаем кнопки
Давайте для начала создадим на Bourbon что-нибудь простенькое. Пусть это будут кнопки. Для этого перейдем на страницу документации по созданию кнопок - Button.
Видим, что в библиотеке Bourbon есть три готовых миксина для создания кнопок:
1
simple
1
pill
1
shiny
Поэтому в HTML-коде создаю кнопку:
… и прописываю для нее миксин в таблице стилей
1
style.scss
:
Смотрим результат в браузере - готовая красивая синенькая кнопочка! Точно также можно создать еще две другие кнопки, с помощью миксинов
1
pill
и
1
shiny
. При этом можно передать в качестве аргумента фоновый цвет создаваемой кнопки:
Ради любопытства посмотрите на скомпилированный CSS-код этих кнопок в файле
1
style.css
- вы будете поражены однозначно!
Bourbon - создаем треугольники
Кто из внимательных читателей может на память создать треугольник на чистом CSS? Конечно, там нет ничего сложного, но уверен - время у вас все равно уйдет на то, чтобы вспомнить все тонкости этого процесса - обнулить ширину и высоту, задать ширину и цвет границы, убрать ее с трех остальных сторон и так далее.
А вот в библиотеке Bourbon эта задача выполняется в одну строку, для этого достаточно миксину
1
triangle
передать всего лишь три аргумента - ширину границы, цвет границы, направление треугольник’а:
Все - треугольник готов! Самые разные варианты создания теругольников хорошо описаны на странице документации - Triangle.
Заключение
На этом задачу ознакомления с библиотекой Bourbon считаю законченной. Читайте документацию - там все хорошо описано!