Як зробити поля з плаваючими мітками на jаvascript.

Сьогодні хотілося б розповісти вам про легке скрипті, який дозволяє зробити плаваючі мітки полів введення на jаvascript.

Бібліотека називається Floatl, а подивитися живий приклад ви можете за цим посиланням.

Особливості бібліотеки:

Сумісна зі звичайним jаvascript
немає залежностей
Мала вага
Підтримує текстові поля і текстову область
Кастомізіруйте за допомогою CSS стилів
Підтримка всіх браузерів і IE до 8 версії

установка

скачайте jаvascript і css файли і підключіть їх в свій проект.

Ви також можете використовувати NPM або Bower.

npm install floatl --save 
 
# або 
 
bower install floatl --save

Використання

Переконайтеся, що скрипти підключені. Розмітьте сторінку текстовими полями або областю, мітками і виставте потрібні класи.

class="Floatl"gt; 
class="Floatl__label"gt;First name 
class="Floatl__input"placeholder="First name"type="Text"gt;

створіть екземпляр Floatl, додавши його в DOM

var element = document.querySelectorAll(`Js-floatl`) [0] - 
 
// Модульний підхід 
var floatl =require(`Float`) - 
new floatl(element) - 
 
// Звичайний підхід з глобальної Floatl функцією 
newFloatl(element) - 
 
// Якщо ви використовуєте JQuery, можете додати в jquery об`єкт 
newFloatl($(`.js-floatl`))

стилізація

Всі стилі (включаючи переходи) в основному зроблені за допомогою перемикання CSS класів. Тому ви легко можете додати свої. Подивіться на базові стилі, щоб зрозуміти, як це зробити. Або гляньте за цим посиланням. Ось так просто можна зробити поля введення з плаваючими мітками!

Дякую за увагу!

Поділися в соціальних мережах:

Схожі