Crie widgets com guias responsivos com o GridTab

É sempre mais fácil criar sites usando ferramentas de código aberto em vez de reinventar a roda. Essas ferramentas variam de bibliotecas a plugins menores, mas você pode encontrar uma solução para basicamente qualquer coisa.

O fenomenal jQuery GridTab plugin é um bom exemplo. Ele permite que você configurar uma grade personalizada, definir os pontos de interrupção, e criar um widget com guias responsivo que se adapte a qualquer website.

Você pode adicionar suas próprias classes CSS ou trabalhar com as existentes para criar um recurso de guia adequado ao seu design. Este plugin também suporta elementos de navegação para os controles next / prev e alternando entre guias.

Instalação é uma brisa e só requer o biblioteca jQuery como uma dependência. Uma vez instalado, você pode pegar o GridTab do npm ou baixá-lo diretamente do GitHub.

Tenha em mente que este plugin de widget com guias tem um estilo padrão, por isso tem um folha de estilo CSS separada na parte superior do arquivo de plug-in do JS. Mas você sempre pode mesclar esse CSS no seu para reduzir as solicitações HTTP.

Para inicializar o plugin, você simplesmente passa o tamanho total da grade junto com qualquer parâmetro opcional (todos listados no GitHub).

Aqui está um simples script de inicialização:

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

Configurações incluem seletores personalizados, estilos responsivos, configurações de borda / preenchimento / cor, e claro, um função de retorno de chamada.

Você pode estar curioso para ver como tudo isso funciona e como fica no seu navegador. Confira a “Demos” seção para ver um alguns exemplos, Incluindo código-fonte em bruto você pode copiar.

A maioria das pessoas pensa em guias como recursos para widgets de perfil pequeno. Contudo, sites de portfólio também pode fazer uso de grades com recursos com guias e o plugin GridTab é o melhor recurso para capturar este efeito.

Tudo o que você precisa saber, incluindo documentação completa, pode ser encontrado na página principal do GridTab. Isso também inclui um link para o repositório do GitHub para que você possa navegar pela origem e começar a personalizar suas próprias grades com guias responsivas.