Полезные наработки по JavaScript

Числовой 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 стилизовать не получится. Этот простой скрипт исправляет проблему, и больше о нем сказать нечего. Скрипт для тех, кому не нужны многокилобайтные библиотеки, стилизующие все элементы формы.

<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'
});

Скрипт автоматически скрывает все указанные элементы, и когда страница прокручивается к ним, воспроизводится анимация их появления от начального до конечного состояния стилей.