21 de agosto de 2013

Plugin jQuery

Neste tutorial vamos aprender como usar um Plugin jQuery.

A maioria dos Plugins jQuery seguem a mesma linha de configuração usando requisitos similares, depois que se aprende a configurar um, fica mais fácil entender todos os outros.

Para começar vamos aprender a configuração de um Plugin jQuery muito útil e simples chamado Cycle. Com este plugin é possível criar um banner rotativo de imagens de forma fácil e rápida.

A primeira coisa que sempre iremos inserir é a própria biblioteca jQuery, existem algumas formas de usá-la como por exemplo apontando para um caminho específico onde a biblioteca se encontra, mas na forma que vou ensinar aqui, será necessário baixar o arquivo no site jQuery e copiá-lo para uma pasta, normalmente o nome da pasta é "js". Você também irá notar que existem versões diferentes do arquivo pois a equipe de desenvolvimento sempre está lançando atualizações e também irá encontrar dois tipos básicos de arquivo, o compressed (compactado) e o uncompressed (descompactado), você pode baixar os dois e ver a diferença, embora a função seja exatamente a mesma, o compressed é escrito de uma forma bem resumida o que torna o arquivo reduzido, economizando assim espaço.

O segundo passo será baixar o Plugin jQuery que no nosso caso é o Cycle. Ele também deve ser copiado na mesma pasta "js", pois é lá que ficarão todos os seus Plugins jQuery.

O terceiro e último passo é "inicializar" o plugin. Nesta inicialização iremos inserir algumas configurações necessárias do nosso plugin.

Agora que já esclarecemos a teoria vamos à prática:

Acesse o site jQuery, baixe a última versão da biblioteca e copie para a pasta "js" dentro do seu site.
Acesse o site Cycle, baixe a última versão da biblioteca e copie para a pasta "js" dentro do seu site.

Dentro das tags Head inclua as seguintes linhas:

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.cycle.lite.js"></script>

Embora o código a seguir possa ser inserido em qualquer parte da página, por questões de organização do código insira também dentro da tag Head, logo após as linhas anteriores. Segue a inicialização:
```
<script>
    $(document).ready(function() {
        $('.slideshow').cycle({ 
            fx: 'fade' 
        }); 
    });
</script>
```

Agora vamos criar a estrutura de imagens da nossa página, levando em conta que você já tenha uma pasta chamada "images" com as três fotos dentro:

<div class="slideshow">
    <img src="images/foto1.jpg" alt="Foto 1">
    <img src="images/foto2.jpg" alt="Foto 2">
    <img src="images/foto3.jpg" alt="Foto 3">
</div>

A estrutura final do seu arquivo deve ficar como o exemplo:

<!doctype html>
<html>
    <head>
      <title>jQuery Cycle Plugin</title>
      <!-- Scripts -->
      <script src="js/jquery-1.10.2.min.js"></script>
      <script src="js/jquery.cycle.lite.js"></script>
      <script>
        $(document).ready(function() {
          $('.slideshow').cycle({
            fx: 'fade'
          });
        });
      </script>
    </head>

    <body>
      <div class="slideshow">
        <img src="images/foto1.jpg" alt="Foto 1">
        <img src="images/foto2.jpg" alt="Foto 2">
        <img src="images/foto3.jpg" alt="Foto 3">
      </div>
    </body>
</html>

Se tudo correu bem o banner rotativo deve estar funcionando. Se não funcionar, verifique os nomes e caminhos dos arquivos novamente.

Note que na inicialização estamos usando o efeito Fade, troque por scrollDown e veja a diferença.

Existem diversos efeitos no site da Cycle, faça as alterações e veja o resultado.

Também há outras opções mais avançadas deste plugin, mas para nosso tutorial já está bom.

JavaScript

20 de março de 2019

Plugin jQuery

JavaScript

Populando select com JavaScript dinamicamente

Accordion com jQuery

Galeria com Miniatura jQuery

Tutoriais

Últimos Artigos