Как сделать поля с плавающими метками на javascript.
Сегодня хотелось бы рассказать вам о легком скрипте, который позволяет сделать плавающие метки полей ввода на javascript.
Библиотека называется Floatl, а посмотреть живой пример вы можете по этой ссылке.
Особенности библиотеки:
- Совместима с обычным javascript
- Нет зависимостей
- Малый вес
- Поддерживает текстовые поля и текстовую область
- Кастомизируется с помощью CSS стилей
- Поддержка всех браузеров и IE до 8 версии
Установка
Скачайте javascript и css файлы и подключите их в свой проект.
Вы также можете использовать NPM или Bower.
npm install floatl --save
# или
bower install floatl --save
Использование
Убедитесь, что скрипты подключены. Разметьте страницу текстовыми полями или областью, метками и выставьте нужные классы.
<div class="floatl">
<label class="floatl__label">First name</label>
<input class="floatl__input" placeholder="First name" type="text"></div>
</div>
Создайте экземпляр Floatl, добавив его в DOM
var element = document.querySelectorAll('js-floatl')[0];
// Модульный подход
var floatl = require('float');
new floatl(element);
// Обычный подход с глобальной Floatl функцией
new Floatl(element);
// Если вы используете JQuery, можете добавить в jquery объект
new Floatl($('.js-floatl'))
Стилизация
Все стили(включая переходы) в основном сделаны с помощью переключения CSS классов. Поэтому вы легко можете добавить свои. Посмотрите на базовые стили, чтобы понять, как это сделать. Или гляньте по этой ссылке. Вот так просто можно сделать поля ввода с плавающими метками!
Спасибо за внимание!
-
Создано 26.11.2015 22:41:22
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.