Головна » Інструментарій » Створюйте елементи автоматичної зміни розміру за допомогою Scalable.js

    Створюйте елементи автоматичної зміни розміру за допомогою Scalable.js

    Якщо потрібно роблять гнучкі елементи, які автоматично заповнюють свої контейнери Я дуже рекомендую Scalable. Цей безкоштовний JS скрипт з відкритим вихідним кодом ідеально підходить для створення дизайну рідини без особливого стресу.

    Все в бібліотеці Scalable.js є податливим, тому ви можете змінювати стиль, розмір, положення та внутрішній вміст кожного контейнера. Потрібні елементи, вирівняні у верхній або нижній частині сторінки? Масштабується має варіанти для цього.

    Загляньте в репо GitHub, щоб дізнатися більше про те, як це працює.

    У самому основному вигляді цей сценарій приймає елемент цільової сторінки разом з деякими варіантами налаштування дисплея. Ось приклад коду, взятого безпосередньо з GitHub:

    var scalable = new Масштабується (containerEl, варіанти);

    Природно, що першим параметром є будь-який контейнерний елемент, на який ви націлюєте (в ідеалі a

    або щось подібне).

    Параметр options повинен приймати масив пар ключів => значення. Ці варіанти включають значення висоти контейнера, мінімальна та максимальна ширини, поряд з мін (тобто. скільки він може масштабуватися з внутрішніми елементами).

    Перегляньте головну сторінку проекту для користувальницької демо-версії. Можна перетягнути кути контейнера для автоматичного зміни розміру гнучкого елемента всередині. Це досить прохолодно, тому що нижче, що ви знайдете придатний код безпосередньо з сторінки.

    Існують способи обробки гнучких елементів за допомогою чистого CSS. Однак ці методи можуть відчувати себе відтоді, і вони не пропонують стільки контролю, скільки JavaScript.

    Якщо ви хочете спробувати це просто схопіть копію з GitHub і подивитися, що ви думаєте.

    Масштабованість все ще перебуває в активному розвитку, але це простий скрипт для редагування для ваших потреб.