В этой статье мы разберём простую, но интересную JavaScript библиотеку для автоматического изменения размера элемента, называется она Stretchy и иногда она может быть полезной.
Также если вас интересуют различные JS библиотеки, то почитайте статью «Обзор RxJS, библиотека для реактивного программирования», как понятно из названия, в ней рассказывается про библиотеку RxJS.
Работа с JavaScript библиотекой Stretchy:
Тут как обычно, перед тем как начать работать с этой библиотекой, нужно её скачать, но к сожалению её нельзя установить через NPM, придётся скачать в ручную файл, для этого зайдите на официальный сайт, и на верху нажмите «Download».
Дальше подключаем скрипт в ваш HTML файл:
1 | <script src="stretchy.min.js" async></script> |
По умолчанию он применяется ко всем элементам <textarea>, <select> но которые без атрибута размера, и элементам <input>, которые являются текстовыми полями (например, без атрибута type или равным text, tel, email, url).
Чтобы дополнительно ограничить этот набор, вы можете использовать атрибут data-stretch-filter для любого элемента. Обратите внимание, что это означает, что вы можете использовать атрибут в элементе <script>, который вызывает сам Stretchy, и в этом случае вы также можете сократить его имя до data-filter.
Например, чтобы ограничить его доступными элементами, которые либо имеют класс foo, либо находятся внутри этого элемента, для этого вы можете использовать data-stretch-filter = ". Foo, .foo *" для элемента или вызвать Stretchy следующим образом:
1 | <script src="stretchy.min.js" data-filter=".foo, .foo *" async></script> |
Если вы укажете атрибут data-stretch-filter для нескольких элементов, победит последнее значение (в исходном порядке). data-filter непосредственно в элементе <script> Stretchy имеет приоритет над любым объявлением data-stretch-filter.
Если вы не хотите изменять разметку, вы можете вместо этого использовать JavaScript:
1 | Stretchy.selectors.filter = ".foo, .foo *"; |
Обратите внимание, что для предотвращения применения Stretchy к элементам, которые вообще не соответствуют селектору, вам нужно будет запустить эту строку до срабатывания DOMContentLoaded.
JavaScript API:
У Stretchy есть спартанский API, так как в большинстве случаев вам вообще не нужно его вызывать. Stretchy работает через делегирование событий и обнаруживает новые элементы с помощью наблюдателей мутаций, поэтому вам не нужно вызывать какие-либо методы API для добавления новых элементов с помощью сценариев (например, AJAX).
При необходимости вот методы API Stretchy:
- Stretchy.resize(element) — Автоматическое изменение размера одного элемента в зависимости от его содержимого. Обратите внимание, что при этом не настраиваются какие-либо прослушиватели событий, он просто вычисляет и устанавливает правильное измерение (ширину или высоту, в зависимости от типа элемента управления) один раз;
- Stretchy.resizeAll(elements) — Примените Stretchy.resize () к коллекции элементов или для всех Stretchy установлено применение, если аргумент не указан;
- Stretchy.resizes() — Можно ли использовать Stretchy для этого конкретного элемента? (проверяет, находится ли элемент в DOM, имеет ли он правильный тип и соответствует ли он фильтру селектора, предоставленному data-stretch-selector, если атрибут установлен;
- Stretchy.active — Boolean. Установите значение false, чтобы временно отключить Stretchy;
Это основное что вам нужно знать.
Вывод:
В этой статье вы прочитали про JavaScript библиотеку Stretchy, для автоматического изменения размера элемента, думаю вам было интересно, но по сути это перевод официальной документации, которую вы сможете посмотреть по ссылке.
Подписываетесь на соц-сети:
Оценка:
Загрузка...