jQuery плагин для выравнивания элементов по высоте
For english scroll below
Часто при отображении информации в несколько колонок нужно выровнять кнопки и картинки по одной линии. Плагин делает одинаковой высоту у тех элементов, высота которых непредсказуема.
Было:
Стало:
- Скачайте или клонируйте этот репозиторий:
git clone git@github.com:nukinuki/sameheight.git
-
Положите файл
jquery.sameheight.jsиз папкиdistв ваш проект. -
Подключите скрипт в вашем html после подключения jQuery:
<script src="/your-path-to-js/jquery.sameheight.js" />
или
Подключите его через CDN:
<script src="https://cdn.jsdelivr.net/gh/nukinuki/sameheight@0.1/dist/jquery.sameheight.js" />
- Укажите аттрибут
data-height-group="название_группы"у всех элементов, высота которых должна быть одинаковой.
Скрипт работает автоматически, обновляет высоту после ресайза и не мешает адаптиву.
https://jsfiddle.net/Nukinuki/gywLf7ca/
Все команды запускаются через $.sameheight('команда');. Например $.sameheight('update');.
Принудительное обновление высоты, например при нажатии на кнопку "Показать ещё".
Также скрипт слушает событие: $(document).trigger('sameheightupdaterequired');
Cнимает установленные ранее высоты элементов. Скрипт перестаёт слушать события.
Делает update, включает события.
jQuery plugin for aligning elements
It aligns images, texts and buttons on the same line in multi-column layout. Actually it just makes height of marked elements equal.
Before:
After:
- Download or clone this repository:
git clone git@github.com:nukinuki/sameheight.git
-
Copy
jquery.sameheight.jsfromdistfolder to your project. -
Add the script in your HTML markup after jQuery:
<script src="/your-path-to-js/jquery.sameheight.js" />
or
Use the CDN link:
<script src="https://cdn.jsdelivr.net/gh/nukinuki/sameheight@0.1/dist/jquery.sameheight.js" />
- Set attribute
data-height-group="name_of_the_group"of all elements, that require to be of same height.
Nothing else required, script just works. It updates heights after every window resize and doesn't mess with responsiveness.
https://jsfiddle.net/Nukinuki/gywLf7ca/
All actions are executed through $.sameheight('action');. Like $.sameheight('update');.
Updates heights, for example after clicking on "Show more" button.
Another way is to trigger the event on document: $(document).trigger('sameheightupdaterequired');
Removes all height overrides from elements, stops listen to events.
Do update action, starts to listen to events again.