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

Теги: Библиотеки, Веб-разработка, JavaScript

Числовой input

Скрипт преобразует указанные элементы input, блокируя ввод в них не числовых символов. Для активации скрипта необходимо вызвать метод init объекта «numInput», передав в него jQuery-объект контейнера, содержащего требуемый input. Все элементы input внутри контейнера будут преобразованы. Если параметр не передан, контейнером считается тег body. Пример вызова:

Код на языке javaScript:
numInput.init(jQuery('div'));

Элементы, которые необходимо преобразовать, должны быть помечены специальным классом: numinput. Также, скрипт удобно настраивается посредством специальных атрибутов преобразуемого элемента:

  • data-min: минимальное значение
  • data-max: максимальное значение
  • data-inc: шаг изменения значения

Скрипт поддерживает изменение значения элемента при помощи стрелок; при этом, учитываются минимальная и максимальная границы, заданные соответствующими атрибутами. Пример разметки:

Код на языке html:
<div>
...<input class = "numinput" data-min = "0" data-max = "1000" data-inc = "5"/>
</div>
numInput.zip (1.6kb) Демонстрация работы скрипта, а также, его несжатая версия в архиве.
numInput.min.js (1.1kb) Сжатая версия скрипта.

Стилизация выпадающего списка

Скрипт стилизует выпадающий список, созданный на основе обычных списков «ul» (не «select», как это принято). Причины такого выбора лежат в реализации редактируемого списка, сделать который на основе обычного тега «select» было затруднительно.

Итак, «Perfect Sulect» превращает тег «ul» в список, создает невидимый input с заданным именем (для правильной отправки данных на сервер) и дает возможность активировать ручной ввод значения. Для преобразования, указанный тег должен быть помечен классом sulect. Инициализация вызывается при помощи функции sulect.init:

Код на языке javaScript:
sulect.init(jQuery('div'));//Контейнер, по умолчанию - 'body'

Параметры для настройки компонента должны передаваться в виде JSON-строки в атрибуте «data-sulect» тега. Пример разметки:

Код на языке html:
<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 для ручного редактирования.
sulect.js (4.2kb) Демонстрация работы скрипта, а также, его несжатая версия в архиве.
sulect.min.js (2.4kb) Сжатая версия скрипта.

Стилизация Checkbox

Жаль, что средствами чистого css элемент checkbox стилизовать не получится. Этот простой скрипт исправляет проблему, и больше о нем сказать нечего. Скрипт для тех, кому не нужны многокилобайтные библиотеки, стилизующие все элементы формы.

Инициализируется все так же вызовом функции checkbox.init(container);. Пример разметки:

Код на языке html:
<input type = "checkbox" class = "checkbox" data-label = "Текст описания" autocomplete = "off" checked/>
checkbox.zip (1.6kb) Демонстрация работы скрипта, а также, его несжатая версия в архиве.
checkbox.min.js (600b) Сжатая версия скрипта.

Стилизация всплывающих подсказок

Еще маленький скрипт, выводящий всплывающую подсказку для элементов с заданным атрибутом data-hint. Инициализируется функцией hint.init(container);.

После инициализации, элементы, имеющие непустой атрибут подсказки помечаются классом «hint», что позволяет в дальнейшем работать с ними на стороне css. Например, изменить вид курсора, как в демонстрационном примере. Есть возможность установки подсказки с разметкой.

Пример разметки:

Код на языке html:
<a href = "#" data-hint = "Текст подсказки.">Ссылка</a>
hint.zip (2.16kb) Демонстрация работы скрипта, а также, его несжатая версия в архиве.
hint.min.js (400b) Сжатая версия скрипта.

Спойлер

Универсальный скрипт реализации разворачивающегося контента на сайте, больше о нем нечего сказать. Думаю, все знают, что такое «спойлер». Сразу приведу пример разметки:

Код на языке html:
<div class = "spoiler">
...<span class = "open" data-alttext = "Закрыть">Открыть</span>
...<div class = "content">Контент спойлера</div>
</div>

Основной блок должен быть помечен классом spoiler, инициализация производится по этому классу вызовом функции spoiler.init(container);.

Внутри основного элемента обязательно должны присутствовать два управляющих:

  • Элемент с классом open, использующийся для открытия/закрытия спойлера. Атрибут «data-alttext» этого элемента используется для подмены текста в альтернативном состоянии.
  • Элемент с классом content, внутри которого и находится весь контент спойлера.
spoiler.zip (2.5kb) Демонстрация работы скрипта, а также, его несжатая версия в архиве.
spoiler.min.js (1.1kb) Сжатая версия скрипта.

Боковое меню для лендингов

Скрипт организации меню для лендингов, позволяющий связать пункты меню с якорями на странице. Для создания меню необходимо сделать разметку списка его пунктов и установить класс terminalMenu для этого списка:

Код на языке html:
<ul class = "terminalMenu">
...<li data-link = "ch1">Глава 1</li>
......
</ul>

Каждый элемент списка должен содержать атрибут data-link с именем ссылки. Якорь, соответствующий этому пункту меню, - любой элемент на странице, которому присвоен атрибут data-anchor с таким же именем ссылки, как и у самого пункта меню:

Код на языке html:
<h1 data-anchor = "ch1">Глава 1</h1>

С помощью класса terminalLink можно указать на странице элементы, нажатие на которые, подобно пунктам меню, будет прокручивать страницу к якорю. У каждой такой ссылки должен быть задан атрибут data-link.

Код на языке html:
<span class = "terminalLink" data-link = "ch1">Глава 1</span>

Меню инициализируется с помощью функции terminalMenu.init(). Во время прокрутки страницы, скрипт отслеживает положение якорей относительно экрана и назначает класс active текущему пункту меню.

terminalMenu.zip (1.9kb) Демонстрация работы скрипта, а также, его несжатая версия в архиве.
terminalMenu.min.js (1.5kb) Сжатая версия скрипта.

Имитация «ленивой» загрузки

Простой скрипт для организации плавного появления элементов на странице при прокрутке к ним.

Для указания элементов, к которым необходимо применить эффект плавного появления, нужно воспользоваться функцией plLagoon.add(...), передав в нее jQuery-объекты, начальное и конечное состояния стилей:

Код на языке javaScript:
plLagoon.add(jQuery('h1'),
{
...'opacity': '0',
...'margin-top': '-50px'
},
{
...'opacity': '1',
...'margin-top': '10px'
});

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

plLagoon.zip (1.4kb) Демонстрация работы скрипта, а также, его несжатая версия в архиве.
plLagoon.min.js (650b) Сжатая версия скрипта.
Авторы: SpectreZ, SaiLight Работа над проектом: 2017 год
+
Фильтрация по тегам
Выбранные теги отобразятся в этой области...
Найти
Программирование 9 , Игры 7 , Программы 1 , Delphi 6 , Библиотеки 4 Веб-разработка 6 , Сайты под ключ 1 , Дизайн 4 , JavaScript 3 , PHP 0 , Laravel 0 , Joomla 0 Графика 7 , Обработка фото 0 , Логотипы 1 , Иллюстрации 3 , Рисунки 1 , Печатная продукция 0 Видео 3 , Трейлеры 1 , Анимация 0 Музыка 1 , Персонажи 2 , Статьи 5 , Литература 2 , Рассказы 2 , Стихи 0 , 2D 2 , 3D 6 , На заказ 2
Используйте среднюю кнопку для быстрого фильтра по тегу...
Календарь проектов
2015 7 , 2016 6 , 2014 3 , 2010 4 , 2011 1 , 2013 2 , 2012 1 , 2009 3 , 2017 2 , 2018 1