Columnas de igual altura

Descripción

¿Te gusta este plugin? Por favor, considere dejar una revisión de 5 estrellas.

Columnas de igual altura le permite igualar fácilmente la altura de varias columnas y elementos.

Caracteristicas

• Destino a elementos ilimitados y grupos de elementos.
• Especifique los selectores CSS / jQuery simples para los elementos de destino
• Especifique el punto de interrupción para activarse solo en ciertos tamaños de pantalla
• Interfaz de administración fácil de usar
• Las alturas se igualan inmediatamente después de que la página se haya cargado
• Totalmente sensible (se actualiza automáticamente en eventos de cambio de tamaño y orientación)
• Funciona en dispositivos móviles.
• Funciona en todos los navegadores modernos (incluido IE8)
• Viene con un detector de eventos personalizado para activar manualmente
• Súper pequeño – Tamaño de archivo jQuery de 8kB
• Desencadenar el evento personalizado 'equalheight' para forzar el cambio de tamaño

Instrucciones

1. Navegar a Configuraciones> Columnas de igual altura en el administrador de WordPress.
2. Entrar a selector y punto de quiebre Por el primero grupo de columnas.
3. Agregar / eliminar grupos de columnas haciendo clic en los botones “+ Agregar más” y “Eliminar”.

Avanzado

¿Quieres activar la igualación de las alturas manualmente? No hay problema. Puede omitir el ingreso de un selector en la página de configuración y llamar al script jQuery usted mismo usando una de dos funciones:

jQuery ('.selector') .initEqualHeights ();

// o

jQuery ('.selector') .equalizeTheHeights ();

La diferencia entre estas dos funciones es simplemente que initEqualHeights () configurará todos los eventos para recalcular las alturas cuando se cambie el tamaño de la ventana o el global igual altura se desencadena el evento, pero igualar las alturas () simplemente igualará las alturas sin involucrar ningún evento.

Ambas funciones toman tres argumentos opcionales, la altura mínima (número de píxeles), la altura máxima y el punto de interrupción (debajo de los cuales las alturas volverán a su tamaño original):

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

Así que un ejemplo podría verse así:

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

Cuando ingrese un selector en la página de configuración o use el initEqualHeights () El método de este complemento también agrega un evento “igualaciones iguales” a la ventana, lo que le permite activar fácilmente la ecualización manualmente. Esto es útil si ha agregado nuevos elementos a la página después de que se cargue a través de AJAX. Puedes desencadenar el evento así:

jQuery (window) .trigger ('equalheights');

Otra opción para controlar qué elementos se igualan es la equal_height_columns_elements filtrar. Este filtro opera en la matriz de datos que se pasan al JS justo antes de que se pase. Esto permite a los desarrolladores especificar selectores que no se pueden eliminar de la página de configuración y para construir selectores mediante programación basados ​​en datos dinámicos. Aquí hay un ejemplo de cómo se puede usar el filtro:

add_filter ('equal_height_columns_elements', 'custom_ehc_elements');
función custom_ehc_elements ($ elements) {

    $ elementos['element-groups']['custom']    = array (
        'selector' => '.ehc-target', // Selector va aquí.
        'punto de interrupción' => '768',
    );

    devuelve $ elementos;
}

Las llaves en el grupos de elementos la matriz utilizada por los selectores ingresados ​​en la página de configuración entrará como índices numerados, por lo que para evitar colisiones es mejor usar claves con nombre para cualquier selector personalizado (estamos usando 'personalizado' en el ejemplo anterior, pero cualquier cadena única funcionará) .

Este complemento está en Github y las solicitudes de extracción siempre son bienvenidas.