Equal Height Columns

Нравится этот плагин? Пожалуйста, оставьте 5-звездочный отзыв. Столбцы с одинаковой высотой позволяют легко выравнивать высоту различных столбцов и элементов. Возможности Целевые неограниченные элементы и группы элементов Укажите простые селекторы CSS / jQuery для целевых элементов Укажите точку останова для включения только при определенных размерах экрана Простой в использовании интерфейс администратора Высота выравнивается сразу после загрузки страницы Полностью реагирует (автоматически обновляется при изменении размера и изменении ориентации) ) Работает на мобильных устройствах Работает во всех современных браузерах (включая IE8) Поставляется с настраиваемым прослушивателем событий для ручного запуска Super small - размер файла jQuery 8 КБ Запускайте настраиваемое событие «equalheight» для принудительного изменения размера. . Введите селектор и точку останова для первой группы столбцов. Добавьте / удалите группы столбцов, нажав кнопки «+ Добавить еще» и «Удалить». Advanced Хотите запустить выравнивание высот вручную? Без проблем. Вы можете пропустить ввод селектора на странице настроек и самостоятельно вызвать скрипт jQuery, используя одну из двух функций: jQuery ('.selector') .initEqualHeights (); // Или jQuery ('.selector') .equalizeTheHeights (); Разница между этими двумя функциями просто в том, что initEqualHeights () настроит все события для перерасчета высот при изменении размера окна или срабатывании глобального события equalheights, но equalizeTheHeights () просто уравняет высоту без участия каких-либо событий. Обе функции принимают три необязательных аргумента: минимальную высоту (количество пикселей), максимальную высоту и точку останова (ниже которой высоты вернутся к исходному размеру): jQuery ('.selector') .initEqualHeights (minHeight, maxHeight, breakPoint ); Пример может выглядеть так: jQuery ('.selector') .initEqualHeights (200, 500, 768); При вводе селектора на странице настроек или использовании метода initEqualHeights () этот плагин также добавляет в окно событие «equalheights», что позволяет легко запускать выравнивание вручную. Это полезно, если вы добавляли новые элементы на страницу после ее загрузки через AJAX. Вы можете вызвать событие следующим образом: jQuery (window) .trigger ('equalheights'); Другой вариант управления выравниванием элементов - это фильтр equal_height_columns_elements. Этот фильтр работает с массивом данных, который передается в JS прямо перед передачей. Это позволяет разработчикам указывать селекторы, которые нельзя удалить со страницы настроек, а также программно создавать селекторы на основе динамических данных. Вот пример того, как можно использовать фильтр: add_filter ('equal_height_columns_elements', 'custom_ehc_elements'); function custom_ehc_elements ($ elements) {$ elements ['element-groups'] ['custom'] = array ('selector' => '.ehc-target', // Селектор идет сюда. 'breakpoint' => '768' ,); return $ elements; } Ключи в массиве элементов-групп, используемые селекторами, введенными на странице настроек, будут представлены в виде пронумерованных индексов, поэтому во избежание конфликтов лучше всего использовать именованные ключи для любых пользовательских селекторов (в приведенном выше примере мы используем «custom» , но подойдет любая уникальная строка). Этот плагин находится на Github, и запросы на включение всегда приветствуются.

Автор: MIGHTYminnow, Mickey Kay, Braad Martin

Версия: 1.1.3