Equal Height Columns v1.2.1

Совместимость с PHP 8.2.

Нравится этот плагин? Пожалуйста, рассмотрите возможность оставить 5-звездочный отзыв.

Столбцы одинаковой высоты позволяют легко выравнивать высоту различных столбцов и элементов.

Особенности

- Таргетинг на неограниченное количество элементов и групп элементов.

- Укажите простые селекторы CSS/jQuery для целевых элементов.

- Укажите точку останова, которая будет срабатывать только при определенных размерах экрана.

- Простой в использовании интерфейс администратора.

- Высоты выравниваются сразу после загрузки страницы.

- Полностью отзывчивый (автоматически обновляется при изменении размера и ориентации).

- Работает на мобильных устройствах.

- Работает во всех современных браузерах (включая IE8).

- Поставляется с настраиваемым прослушивателем событий для запуска вручную.

- Очень маленький - размер файла jQuery 8 КБ.

- Запуск специального события "equalheight" для принудительного изменения размера.

Инструкции

- Перейдите в "Настройки" > "Столбцы одинаковой высоты" в панели администратора WordPress.

- Введите селектор и точку останова для первой группы столбцов.

- Добавляйте/удаляйте группы столбцов, нажимая кнопки "+ Добавить еще" и "Удалить".

Расширенный

Хотите запустить выравнивание высот вручную? Без проблем. Вы можете не вводить селектор на странице настроек и вызвать скрипт jQuery самостоятельно, используя одну из двух функций:

jQuery(".selector").initEqualHeights();

// Или

jQuery(".selector").equalizeTheHeights();

Разница между этими двумя функциями состоит лишь в том, что initEqualHeights() настроит все события для пересчета высот при изменении размера окна или при срабатывании глобального события equalheights, аqualizeTheHeights() просто выровняет высоты без участия каких-либо событий.

Обе функции принимают три необязательных аргумента: минимальную высоту (количество пикселей), максимальную высоту и точку останова (ниже которой высоты вернутся к исходному размеру):

jQuery(".selector").initEqualHeights(minHeight, maxHeight,breakPoint);

Итак, пример может выглядеть так:

jQuery(".selector").initEqualHeights(200, 500, 768);

При вводе селектора на странице настроек или использовании метода initEqualHeights() этот плагин также добавляет в окно событие "equalheights", что позволяет вам легко запускать выравнивание вручную. Это полезно, если вы добавили новые элементы на страницу после ее загрузки через AJAX. Вы можете вызвать событие следующим образом:

jQuery(окно).trigger("equalheights");

Другой вариант контроля того, какие элементы выравниваются, - это фильтр "equal_height_columns_elements". Этот фильтр работает с массивом данных, который передается в JS непосредственно перед его передачей. Это позволяет разработчикам указывать селекторы, которые нельзя удалить со страницы настроек, а также программно создавать селекторы на основе динамических данных. Вот пример того, как можно использовать фильтр:

add_filter("equal_height_columns_elements", "custom_ehc_elements");
функция custom_ehc_elements($elements) {

$elements["element-groups"]["custom"] = массив(
"selector" => ".ehc-target", // Здесь находится селектор.
"точка останова" => "768",
);

вернуть $элементы;
}

Ключи в массиве групп элементов, используемые селекторами, введенными на странице настроек, будут иметь нумерованные индексы, поэтому, чтобы избежать коллизий, лучше всего использовать именованные ключи для любых пользовательских селекторов (в приведенном выше примере мы используем "пользовательский", но подойдет любая уникальная строка).

Этот плагин находится на Github, и запросы на включение всегда приветствуются.

НОВИНКА: несколько рядов

В версии 1.2.0 мы представляем новую функцию (на данный момент доступную только через JavaScript), которая решает распространенную проблему, если количество строк определенных элементов меняется в зависимости от точек останова при изменении количества столбцов.

Например, если у нас есть 2 столбца для планшетов и 3 столбца для настольных компьютеров, третий элемент в группе будет располагаться во второй строке для планшетов и в первой строке для настольных компьютеров.

До появления этой новой функции одинаковая высота определялась для всех элементов группы. Теперь вы можете иметь "подгруппы" для каждой строки и производить перерасчет при изменении количества столбцов в строках.

Чтобы использовать эту новую функцию, добавьте функцию один раз для каждой точки останова:

jQuery(документ).equalHeight(селектор, столбцы, minWidth, maxWidth);

селектор: селектор группы элементов, которым вы хотите применить одинаковую высоту.

столбцы: количество столбцов в строке в точке останова.

minWidth: минимальная ширина точки останова. Используйте 1 для мобильных устройств.

maxWidth: максимальная ширина точки останова. Вы можете оставить пустым для самой большой точки останова.

В следующем примере будет применена одинаковая высота для заголовков с классом .demo-heading в сетке, которая имеет 1 столбец на строку на мобильном устройстве, 2 столбца на планшете и 3 столбца на рабочем столе:

$(документ).equalHeight(".demo-heading", 1, 1, 767); // 1 столбец для 1-767 пикселей
$(документ).equalHeight(".demo-heading", 2, 768, 1024); // 2 столбца для 768-1024 пикселей
$(документ).equalHeight(".demo-heading", 3, 1025); // 3 столбца для 1025 пикселей (и выше)