Quick Tabs
Crea bloques de contenido con pestañas combinando views, nodes, blocks u otras instancias de QuickTabs como contenido de pestañas con múltiples estilos de renderizado.
quicktabs
Install
composer require 'drupal/quicktabs:^4.0'
Overview
Quick Tabs proporciona un sistema flexible para crear bloques de contenido con pestañas en Drupal. Los administradores pueden crear fácilmente bloques de contenido con pestañas seleccionando varias fuentes de contenido para cada pestaña, incluyendo Views, nodes, blocks o incluso instancias anidadas de QuickTabs.
El módulo incluye múltiples estilos de renderizado listos para usar: un renderizador clásico de quicktabs ligero con temas CSS integrados (Pamela, On the Gray, Tabs Bar, Material Tabs), jQuery UI Tabs y jQuery UI Accordion. El contenido puede cargarse mediante AJAX para mejorar el rendimiento de carga inicial de la página, y el módulo incluye funcionalidad de memoria de pestañas usando cookies para recordar la última pestaña seleccionada por el usuario.
Para desarrolladores, Quick Tabs ofrece una arquitectura de plugins robusta que permite extender tanto los tipos de contenido que se pueden mostrar en las pestañas (plugins TabType) como la forma en que se renderizan las pestañas (plugins TabRenderer). El módulo también incluye un plugin de estilo para Views que puede renderizar los resultados de una vista como contenido con pestañas, agrupando filas por un campo especificado.
Features
- Crear bloques de contenido con pestañas combinando múltiples fuentes de contenido (Views, nodes, blocks, otros QuickTabs)
- Tres opciones de renderizado: Classic QuickTabs, jQuery UI Tabs y jQuery UI Accordion
- Opción de carga AJAX - carga el contenido de las pestañas bajo demanda para cargas de página iniciales más rápidas
- Cuatro temas CSS integrados: Pamela, On the Gray, Tabs Bar y Material Tabs
- Memoria de pestañas usando cookies para recordar la última pestaña seleccionada del usuario entre cargas de página
- Opción de ocultar pestañas vacías para ocultar automáticamente las pestañas sin contenido
- Plugin de estilo para Views que renderiza filas de vistas como pestañas agrupadas por un campo
- Funcionalidad de duplicar para crear copias rápidamente de instancias QuickTabs existentes
- Interfaz de pestañas accesible con soporte de navegación por teclado (teclas de flecha)
- Arquitectura de plugins extensible para tipos de pestañas y renderizadores personalizados
- Soporte de QuickTabs anidados - incrustar una instancia de QuickTabs dentro de otra
- Soporte de clases CSS personalizadas para pestañas individuales
Use Cases
Pestañas de información de producto
Crear un bloque con pestañas para diferentes secciones de información de producto: Descripción, Especificaciones, Reseñas y Productos relacionados. Cada pestaña puede obtener datos de diferentes Views o campos de node, presentando información de producto organizada sin abrumar la página.
Panel de usuario con carga Ajax
Construir un panel de usuario con pestañas para Configuración de cuenta, Historial de pedidos, Elementos guardados y Notificaciones. Habilitar la carga Ajax para que solo se cargue el contenido de la pestaña activa, mejorando el rendimiento para páginas con contenido pesado.
Visualización de datos multi-vista
Usar el plugin de estilo de Views para mostrar los resultados de una sola vista agrupados por categoría, fecha o cualquier campo. Cada grupo automáticamente se convierte en una pestaña, útil para mostrar eventos por mes o artículos por tema.
Sección de preguntas frecuentes en acordeón
Crear una sección de FAQ usando el renderizador de acordeón donde cada pregunta es un panel colapsable. Habilitar la opción colapsable para que los usuarios puedan expandir múltiples preguntas o colapsar todas para un escaneo más fácil.
Bloques de contenido regional
Mostrar contenido específico de ubicación en pestañas, con cada pestaña mostrando contenido filtrado por región usando Views. Los usuarios pueden cambiar rápidamente entre información regional sin recargas de página.
Navegación con pestañas anidadas
Crear una estructura de navegación compleja anidando instancias de QuickTabs. Un QuickTabs principal puede contener otros QuickTabs como contenido de pestaña, habilitando organización con pestañas de múltiples niveles para jerarquías de contenido detalladas.
Tips
- Use el nombre de máquina sabiamente ya que se convierte en parte del ID CSS y no puede cambiarse después de la creación. Elija nombres descriptivos y semánticos.
- Para mejor rendimiento con pestañas con mucho contenido, habilite la carga Ajax para diferir la carga hasta que los usuarios hagan clic en cada pestaña.
- El plugin de estilo de Views es poderoso para contenido de pestañas dinámico - agrupe por cualquier campo para crear pestañas automáticamente desde sus datos.
- Las clases CSS personalizadas pueden agregarse por pestaña a través de la opción Clase de pestaña personalizada, útil para aplicar estilos específicos a pestañas individuales.
- Al usar QuickTabs anidados, asegure estrategias de caché apropiadas ya que el anidamiento complejo puede impactar el rendimiento.
- Los títulos de pestañas soportan HTML limitado (img, em, strong, h2-h6, small, span, i, br) para agregar iconos o formato a las etiquetas de pestañas.
Technical Details
Admin Pages 5
/admin/structure/quicktabs
Página principal de administración que lista todas las instancias de QuickTabs. Desde aquí puede ver, editar, eliminar o duplicar instancias existentes, y crear nuevas. Cada fila muestra el nombre de la instancia y el tipo de almacenamiento con las operaciones disponibles.
/admin/structure/quicktabs/add
Formulario para crear una nueva instancia de QuickTabs. Configure el nombre, estilo de renderizado, contenido de pestañas y varias opciones. Cada instancia crea un bloque correspondiente para su colocación.
/admin/structure/quicktabs/{quicktabs_instance}/edit
Editar una instancia de QuickTabs existente. El mismo formulario que el de agregar pero prellenado con la configuración existente.
/admin/structure/quicktabs/{quicktabs_instance}/delete
Formulario de confirmación para eliminar una instancia de QuickTabs. Esto también eliminará el bloque asociado.
/admin/structure/quicktabs/{quicktabs_instance}/duplicate
Crea una copia de una instancia de QuickTabs existente con un nuevo nombre de máquina.
Permissions 1
Hooks 3
hook_quicktabs_tab_type_info_alter
Modifica las definiciones de plugins de tipo de pestaña. Permite a los módulos modificar o extender los tipos de contenido de pestañas disponibles.
hook_quicktabs_tab_renderer_info_alter
Modifica las definiciones de plugins de renderizador de pestañas. Permite a los módulos modificar o extender las opciones de renderizado disponibles.
hook_quicktabs_instance_alter
Modifica una instancia de QuickTabs antes de renderizarla. Permite modificar pestañas, opciones u otras propiedades en tiempo de renderizado.
Troubleshooting 5
Cuando el modo Ajax está habilitado, el contenido se carga a través de un callback de menú que solo verifica el permiso básico 'access content'. Para contenido sensible, deshabilite el modo Ajax o asegúrese de que los controles de acceso a nivel de campo estén configurados correctamente en la configuración de visualización del tipo de contenido.
Asegúrese de que el módulo js_cookie esté instalado y habilitado. Verifique que JavaScript se esté cargando correctamente y que no aparezcan errores de JS en la consola del navegador. La cookie se establece por instancia de QuickTabs basándose en su nombre de máquina.
La opción 'Ocultar pestañas vacías' no funciona en modo Ajax porque el contenido se carga dinámicamente. Para ocultar pestañas vacías con Ajax, el contenido debe verificarse del lado del servidor antes del renderizado, o deshabilite el modo Ajax.
Use el formato %0, %1, %2, etc. para referenciar segmentos de ruta de URL en el campo de argumentos. %0 es el primer segmento después del dominio. Asegúrese de que la estructura de URL coincida con sus marcadores de argumentos.
Verifique que el submódulo correspondiente (quicktabs_accordion o quicktabs_jqueryui) esté habilitado, y que el módulo de dependencia requerido (jquery_ui_accordion o jquery_ui_tabs) también esté instalado y habilitado.
Security Notes 3
- Advertencia de seguridad del modo Ajax: Cuando Ajax está habilitado, el contenido de las pestañas es accesible a través de un callback de menú (/quicktabs/ajax/...) para cualquier usuario con permiso 'access content', independientemente de las restricciones de acceso a nivel de bloque. No use el modo Ajax para bloques que contengan información sensible.
- El contenido de node cargado vía Ajax usa verificaciones estándar de node_access, pero las restricciones a nivel de campo de módulos como Panels pueden no aplicarse. Configure la visibilidad de campos en la configuración de visualización del tipo de contenido.
- El módulo sanitiza los títulos de pestañas usando Xss::filter() con una lista blanca de etiquetas HTML permitidas para prevenir ataques XSS.