Cree widgets con pestañas sensibles con GridTab

Siempre es más fácil construir sitios web usando herramientas de código abierto En lugar de reinventar la rueda. Estas herramientas van desde bibliotecas hasta complementos más pequeños, pero puede encontrar una solución para prácticamente cualquier cosa..

Lo fenomenal plugin jQuery GridTab Es un buen ejemplo. Te permite configurar una cuadrícula personalizada, definir los puntos de ruptura, y crear un widget con pestañas de respuesta que se adapte a cualquier sitio web.

Puede agregar sus propias clases de CSS o trabajar con las existentes para crear una característica de pestaña que se ajuste a su diseño. Este plugin también soporta Elementos de navegación para los controles siguiente / anterior. y cambiando entre pestañas.

La instalación es muy sencilla y solo requiere la La biblioteca jQuery como dependencia. Una vez que esté instalado, puede tomar GridTab desde npm o descargarlo directamente desde GitHub.

Tenga en cuenta que este complemento de widget con pestañas tiene un Estilo por Defecto, así que tiene una hoja de estilos CSS separada en la parte superior del archivo de plugin JS. Pero, siempre puede combinar este CSS con el suyo para reducir las solicitudes HTTP.

Para inicializar el plugin, simplemente pasa el tamaño total de la rejilla junto con cualquier parámetro opcional (todos listados en GitHub).

Aquí hay un simple script de inicialización:

 $ (document) .ready (function () $ ('# gridtab-1'). gridtab (grid: 3);); 

Los ajustes incluyen selectores personalizados, estilos de respuesta, configuración de borde / relleno / color, y por supuesto, un función de devolución de llamada.

Es posible que tenga curiosidad por ver cómo funciona todo esto y cómo se ve en su navegador. Revisar la “Población” sección para ver un algunos ejemplos, incluso código fuente en bruto puedes copiar.

La mayoría de la gente piensa en las pestañas como características para widgets de perfil pequeño. sin embargo, sitios web de cartera También puede hacer uso de cuadrículas con características tabuladas y el complemento GridTab es el mejor recurso para eliminar este efecto.

Todo lo que necesitas saber, incluyendo documentación completa, Se puede encontrar en la página principal de GridTab. Esto también incluye un enlace al repositorio de GitHub para que pueda navegar a través de la fuente y comenzar a personalizar sus propias grillas con pestañas sensibles..