anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

jQuery jKit: A revolução no Front-End

jQuery jKit

jquery

Hoje eu venho falar de um plug-in incrível do Jquery: o super útil JKit!!

Funcionalidades

Quando falamos de plugins jQuery, a primeira coisa que perguntamos é: para que serve? Pois bem, esse plugin que estamos citando não é algo focado em uma só coisa como o “masked input”, “jarallax”, “Stellar” e assim por diante.

O plugin em questão trata-se de um elemento que facilita a criação de diversos itens para a Interface do Usuário. Dentre as possibilidades podemos citar por exemplo:

  • Parallax
  • Lightbox
  • Zoom
  • Animações
  • Carousel
  • SlideShow
  • Elementos Randômicos
  • e muito mais

Como usar?

Para inseri-lo em suas páginas é extremamente simples, basta primeiramente baixar o jKit no site oficial: http://jquery-jkit.com/

Ligue os arquivos na sua página, incluindo posteriormente uma função:

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.jkit.1.2.16.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('body').jKit();
});
</script>

Pronto!!! Após ter feito isso você pode ver os exemplos das opções disponíveis no site da JKit. Selecionei alguns para vocês:

Exemplos de JKit

Zoom ao passar o mouse na imagem

http://jquery-jkit.com/commands/zoom.html

Parallax

http://jquery-jkit.com/commands/parallax.html

Efeito Ticker (Texto aparecendo letra por letra e etc…)

http://jquery-jkit.com/commands/ticker.html

Criação de Elementos Radômicos

http://jquery-jkit.com/commands/random.html

Gráficos

http://jquery-jkit.com/commands/chart.html

Criação de Guias/Abas

http://jquery-jkit.com/commands/tabs.html

Menus com Drop-down

http://jquery-jkit.com/commands/menu.html

 

Considerações Gerais sobre o uso

Se você clicou no link de alguns dos exemplos que listei anteriormente deve ter percebido que praticamente tudo se baseia naquela propriedade “data-jkit”. Claro que para fazer coisas como as guias/abas, menu ou parallax será necessário seguir um padrãozinho de organização dos elementos, porém acaba sendo muito mais rápido criar algo com ele do que partir do zero.

Para fazer aquele efeito de zoom nas imagens que é frequentemente usado em lojas virtuais bastou acrescentar na tag da imagem a propriedade do data-jkit:

data-jkit="[zoom:scale=2]"

Em um atributo já resolvemos a questão do zoom, na hora do desenvolvimento isso nos dá mais tempo para nos preocuparmos com o desenvolvimento de outras coisas mais complexas.


Prof. Kaio

Bom galera, meu nome é Kaio Souza, sou instrutor de Web Design em Mogi das Cruzes e hoje vim trazer para vocês um pouco sobre o jKit. Até a próxima postagem!

Próximo

Postado por

Postagem Relacionada

A arte do design front-end
 O que é Front-End? Segundo o Wikipédia: Em ciência da computação, Ambos são termos generalizados que