Числовой input
Скрипт преобразует указанные элементы input, блокируя ввод в них не числовых символов. Для активации скрипта необходимо вызвать метод init объекта «numInput», передав в него jQuery-объект контейнера, содержащего требуемый input. Все элементы input внутри контейнера будут преобразованы. Если параметр не передан, контейнером считается тег body. Пример вызова:
numInput.init(jQuery('div'));
Элементы, которые необходимо преобразовать, должны быть помечены специальным классом: numinput. Также, скрипт удобно настраивается посредством специальных атрибутов преобразуемого элемента:
- data-min: минимальное значение
- data-max: максимальное значение
- data-inc: шаг изменения значения
Скрипт поддерживает изменение значения элемента при помощи стрелок; при этом, учитываются минимальная и максимальная границы, заданные соответствующими атрибутами. Пример разметки:
<div>
...<input class = "numinput" data-min = "0" data-max = "1000" data-inc = "5"/>
</div>
Стилизация выпадающего списка
Скрипт стилизует выпадающий список, созданный на основе обычных списков «ul» (не «select», как это принято). Причины такого выбора лежат в реализации редактируемого списка, сделать который на основе обычного тега «select» было затруднительно.
Итак, «Perfect Sulect» превращает тег «ul» в список, создает невидимый input с заданным именем (для правильной отправки данных на сервер) и дает возможность активировать ручной ввод значения. Для преобразования, указанный тег должен быть помечен классом sulect. Инициализация вызывается при помощи функции sulect.init:
sulect.init(jQuery('div'));//Контейнер, по умолчанию - 'body'
Параметры для настройки компонента должны передаваться в виде JSON-строки в атрибуте «data-sulect» тега. Пример разметки:
<ul class = "sulect" data-min = "0" data-max = "40" ...data-sulect = '{ ......"name": "count", ......"editable": "true", ......"default": "3", ......"liText": "Другое значение...", ......"inputData": "min,max", ......"inputClass": "numinput" ...}' > <li value = "1">Цифра 1</li> <li value = "2">Цифра 2</li> </ul>
Пройдемся вкратце по параметрам для настройки компонента...
- name - Имя скрытого элемента input, используемого для отправки данных на сервер.
- editable - Активация возможности ручного ввода. Если этот параметр задан, скрипт создает дополнительный элемент списка, выбор которого активирует input для ручного ввода значения.
- default - Значение по умолчанию. Если задан этот параметр, то скрипт автоматически активирует пункт, значение «value» которого совпадает с этим значением. Пункт, выбранный по умолчанию еще можно установить, присвоив ему класс «selected».
- liText - Текст дополнительного элемента, активирующего ручной ввод. По умолчанию это «Другое значение...».
- inputData - Указанные через запятую атрибуты, которые должны быть скопированы из этого тега во вложенный input для ручного редактирования. В примере используется для подключения скрипта numInput: значение «min,max» означает, что из родительского ul в input будут скопированы атрибуты data-min и data-max.
- inputClass - класс, устанавливаемый элементу input для ручного редактирования.
Стилизация Checkbox
Жаль, что средствами чистого css элемент checkbox стилизовать не получится. Этот простой скрипт исправляет проблему, и больше о нем сказать нечего. Скрипт для тех, кому не нужны многокилобайтные библиотеки, стилизующие все элементы формы.
Инициализируется все так же вызовом функции checkbox.init(container);. Пример разметки:<input type = "checkbox" class = "checkbox" data-label = "Текст описания" autocomplete = "off" checked/>
Стилизация всплывающих подсказок
Еще маленький скрипт, выводящий всплывающую подсказку для элементов с заданным атрибутом data-hint. Инициализируется функцией hint.init(container);.
После инициализации, элементы, имеющие непустой атрибут подсказки помечаются классом «hint», что позволяет в дальнейшем работать с ними на стороне css. Например, изменить вид курсора, как в демонстрационном примере. Есть возможность установки подсказки с разметкой.
Пример разметки:
<a href = "#" data-hint = "Текст подсказки.">Ссылка</a>
Спойлер
Универсальный скрипт реализации разворачивающегося контента на сайте, больше о нем нечего сказать. Думаю, все знают, что такое «спойлер». Сразу приведу пример разметки:
<div class = "spoiler"> ...<span class = "open" data-alttext = "Закрыть">Открыть</span> ...<div class = "content">Контент спойлера</div> </div>
Основной блок должен быть помечен классом spoiler, инициализация производится по этому классу вызовом функции spoiler.init(container);.
Внутри основного элемента обязательно должны присутствовать два управляющих:
- Элемент с классом open, использующийся для открытия/закрытия спойлера. Атрибут «data-alttext» этого элемента используется для подмены текста в альтернативном состоянии.
- Элемент с классом content, внутри которого и находится весь контент спойлера.
Боковое меню для лендингов
Скрипт организации меню для лендингов, позволяющий связать пункты меню с якорями на странице. Для создания меню необходимо сделать разметку списка его пунктов и установить класс terminalMenu для этого списка:
<ul class = "terminalMenu"> ...<li data-link = "ch1">Глава 1</li> ...... </ul>
Каждый элемент списка должен содержать атрибут data-link с именем ссылки. Якорь, соответствующий этому пункту меню, - любой элемент на странице, которому присвоен атрибут data-anchor с таким же именем ссылки, как и у самого пункта меню:
<h1 data-anchor = "ch1">Глава 1</h1>
С помощью класса terminalLink можно указать на странице элементы, нажатие на которые, подобно пунктам меню, будет прокручивать страницу к якорю. У каждой такой ссылки должен быть задан атрибут data-link.
<span class = "terminalLink" data-link = "ch1">Глава 1</span>
Меню инициализируется с помощью функции terminalMenu.init(). Во время прокрутки страницы, скрипт отслеживает положение якорей относительно экрана и назначает класс active текущему пункту меню.
Имитация «ленивой» загрузки
Простой скрипт для организации плавного появления элементов на странице при прокрутке к ним.
Для указания элементов, к которым необходимо применить эффект плавного появления, нужно воспользоваться функцией plLagoon.add(...), передав в нее jQuery-объекты, начальное и конечное состояния стилей:
plLagoon.add(jQuery('h1'),
{
...'opacity': '0',
...'margin-top': '-50px'
},
{
...'opacity': '1',
...'margin-top': '10px'
});
Скрипт автоматически скрывает все указанные элементы, и когда страница прокручивается к ним, воспроизводится анимация их появления от начального до конечного состояния стилей.