Já abordámos a programação HTMLprogramação PHP anteriormente e agora é altura de iniciarmos o nosso Guia jQuery! A esta altura você provavelmente já consegue criar as suas próprias páginas HTML / CSS com alguma qualidade, mas aquilo que se pretende não é apenas alguma qualidade, mas sim a melhor qualidade. Para adicionar mais qualidade, beleza e também funcionalidade aos seus websites, deverá considerar utilizar jQuery como um complemento que o ajudará a alcançar o que pretende. jQuery não poder ser utilizado sem Javascript, pois sem Javascript você não poderá adicionar os comportamentos, sofisticadas interacções e outras funcionalidades ao seu website. Certamente deverá saber também que Javascript é considerado um “monstro” da programação, super complexo que nem todos conseguem dominar, e é aí que está o segredo jQuery guardado. Alguns dos gigantes da internet, como o Google, WordPress ou Amazon utilizam jQuery nas suas páginas. Porquê? É isso que lhe vamos dar a entender com o Guia jQuery da Escola Criatividade!

jQuery

Não perca os artigos anteriores relacionados com jQuery e Javascript:

Nesta quarta parte do Guia jQuery vamos abordar alguns truques que poderá utilizar para embelezar os seus websites e como os utilizar de forma correcta e brilhante em jQuery.

Depois de termos já entrado no campo da estilização com a utilização de jQuery, criando menus bonitos e atraentes para os visitantes, vamos agora passar a conhecer alguns truques que poderão dar ainda mais estilo ao seu website. Estes truques são efeitos visuais que podem ser aplicados aos elementos do seu website, de forma a torná-lo bonito e cativante.

1. DESTAQUE

É possível fazer o destaque de um elemento no seu website quando o mouse passar sobre ele através de pequenos trechos de código. O processo explicado passa por aplicar uma determinada classe css ao elemento em questão quando o mouse passar sobre o elemento, e retirar essa classe quando o mouse sair do elemento.

Então, o primeiro passo é criar a classe a aplicar no elemento. Neste caso vamos optar por criar uma classe CSS bastante simples, apenas para efeitos de teste:

CSS:

<style type="text/css">
.hover {background-color:red;}
</style>

Agora, sabendo que o nome da class é hover, podemos criar o script que irá aplicar a classe ao elemento:

jQuery:

$(document).ready(function(){
   $('#elemento').mouseover(function(){
      $(this).addClass('hover');
   });

   $('#elemento').mouseout(function(){
      $(this).removeClass('hover');
   });
});

2. SPOILER

A utilização de um mostrador de spoiler pode ser útil dependendo da área em que você está inserido. Este truque visual passa por esconder um determinado conjunto de texto para que só seja visto quando se clicar.

Então, neste caso vamos necessitar de texto, e utilizando CSS e jQuery vamos esconder uma porção do texto que só será revelada quando for clicado o gatilho. Vamos começar por criar o parágrafo de texto:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, libero et posuere mollis, <span class="spoiler">urna turpis luctus ante, eget dictum.</span></p>

O próximo passo é criar o script jQuery que irá tirar partido da classe criada em CSS e definir o que fazer:

$(document).ready(function() { 

	$("span.spoiler").hide();

	 $('<a class="reveal">Revelar texto &gt;&gt;</a> ').insertBefore('.spoiler');

	$("a.reveal").click(function(){
		$(this).parents("p").children("span.spoiler").fadeIn(2500);
		$(this).parents("p").children("a.reveal").fadeOut(600);
	});

});

Como poderá confirmar este processo é bastante simples e rápido de ser aplicado em qualquer página web.

3. ANIMAÇÕES EM PROPRIEDADES CSS

É possível introduzir um gênero de animações nas propriedades CSS dos seus documentos web, e neste caso estamos a falar de uma função jQuery e particular, a função animate. Este função permite-lhe animar um determinado conjunto de propriedades CSS para dar algum movimento e diferenciar conteúdos.

No exemplo a seguir, vamos introduzir a função animate em um parágrafo, alterando o padding e o fontsize do mesmo durante um determinado tempo:

$('p').animate({
padding: '15px',
fontSize: '25px'
}, 2000);

Neste pequeno trecho de código estamos a seleccionar o elemento p, e a inserir um padding de 15px e o fontsize de 25px, durante 2 segundos. Este processo é tão simples quanto parece, bastando em primeiro lugar selecionar o elemento ao qual será aplicada a animação, definir quais as alteraçoes a efetuar e qual o tempo que irão durar. No que toca à definição do tempo, poderá também utilizar as palavras chave slow, fast ou normal.

Uma particularidade bastante interessante é que se você pretender, poderá não definir um novo valor para uma propriedade CSS ao definir que será X, e poderá apenas fazer uma adição ou subtração ao valor já existente na propriedade.

Quer isto dizer que se uma propriedade CSS tiver o valor 10 e você quiser que ela passe a ter o valor 20, apenas terá que definir que o valor será +10, ao invés de 20. Veja o exemplo abaixo:

$('p').animate({
padding: '+=15px',
fontSize: '-=25px'
}, 2000);

Neste caso estamos a fazer uma adição de 15px ao valor existente do padding, e a retirar 25px ao valor existente na propriedade fontsize.

4. ANIMAÇÃO COM CORES

A animação também se pode cingir á utilização de cores, podendo estilizar certos elementos que ache apropriados serem estilizados e animados de forma a que tenham o destaque necessário. Isto pode ser feito utilizando mais uma vez a função jQuery animate. A utilização mais comum desta técnica é em relação aos termos e condições de utilização de um serviço.

Para que este não passe despercebido a ninguém, é aplicada uma animação que fará com que salte á vista dos visitantes, fazendo com que a probabilidade de ser lido seja maior. Para aplicar este tipo de animação, basta seguir o exemplo abaixo:

$('#termos').animate({'backgroundColor':'#F20C8F'}, 2000);

Este trecho de código irá aplicar ao elemento #termos o background #F20C8F durante o período definido, que neste caso são 2 segundos.

No que toca à transição de uma cor para outra, ou do tamanho de um elemento para outro, esta poderá ser feita de forma diferente utilizando as palavras chave linear e swing. Estas duas palavras chave são inseridas no trecho de código jQuery e irão determinar como irá ser processada a transição.

A transição linear é uma transição retilinea sem alterações, ao passo que a transição swing começa de forma mais lenta e vai progredindo ao longo do tempo. Para inserir estas palavras chave, siga o exemplo abaixo:

$('p').animate({
padding: '+=15px',
fontSize: '-=25px'
}, 2000, 'linear');

$('p').animate({
padding: '+=15px',
fontSize: '-=25px'
}, 2000, 'swing');

Existem ainda outras palavras chave que poderiam ser utilizadas como no exemplo acima, mas de momento apenas iremos introduzir estas duas.

No próximo artigo iremos abordar a utilização de jQuery e AJAX em conjunto, falando sobre as melhores práticas a utilizar quando se conjugam estas duas linguagens e utilizando alguns exemplos demonstrativos.

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Mauricio Silva Teixeira de Nobrega
    17 de agosto de 2012

    Só um detalhe, no exemplo do spoiler, pode-se esconder o botao desta forma:
    $(this).fadeOut(600);



    • Diogo Espinha
      28 de agosto de 2012

      Ola Mauricio, obrigado pela sua contribuição!



  2. Bruno
    17 de agosto de 2012

    Só faltou o arquivo demo! xD
    mas o artigo está ótimo!

    adorei!



    • Diogo Espinha
      28 de agosto de 2012

      Olá Bruno, obrigado pela sua visita e comentário!



  3. jesus vieira de lima
    20 de agosto de 2012

    Muito bom as dicas, o jQuery é realmente sensacional ..



    • Diogo Espinha
      28 de agosto de 2012

      Olá Jesus Lima, jQuery é bastante poderoso e pode ser muito útil para introduzir alguns melhoramentos nos websites!

      Abraço


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz