jQuery: Todos os artigos do TutsUP relacionados com jQuery. Tutoriais, dicas, configurações e muito mais. Venha aprender mais sobre jQuery.

Masonry é uma biblioteca JavaScript / jQuery para criar grids que se encaixam perfeitamente na vertical e horizontal. Os Itens serão alinhados como cards, em um layout parecido com o que você pode ver no Google Keep.

Este plugin deverá resolver o problema do alinhamento de itens na vertical quando utilizamos float: left;  ou  display: inline-block;, o que poderá gerar um espaço indesejado ou até mesmo mostrar itens de maneira totalmente desalinhada.

Claro, se seu layout irá foca apenas em navegadores mais novos que suportam CSS3 e as propriedades column-*, você não vai precisar de nenhuma biblioteca para atingir seu objetivo, porém, este é assunto para um próximo tutorial.

Por agora, veja um exemplo básico de como utilizar o jQuery Masonry para atingir o mesmo efeito da demonstração abaixo:

Veja abaixo os códigos HTML, CSS e jQuery utilizados:

O HTML (index.html)

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jQuery Masonry</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">

    <h1>jQuery Masonry</h1>
    <p><a href="http://masonry.desandro.com/">masonry.desandro.com</a></p>

    <div class="grid">
        <div class="grid-item height-one"></div>
        <div class="grid-item height-seven"></div>
        <div class="grid-item height-two"></div>
        <div class="grid-item height-four"></div>
        <div class="grid-item height-three"></div>
        <div class="grid-item height-five"></div>
        <div class="grid-item height-six"></div>
        <div class="grid-item height-one"></div>
        <div class="grid-item height-seven"></div>
        <div class="grid-item height-two"></div>
        <div class="grid-item height-four"></div>
        <div class="grid-item height-three"></div>
        <div class="grid-item height-five"></div>
        <div class="grid-item height-six"></div>
        <div class="grid-item height-one"></div>
        <div class="grid-item height-seven"></div>
        <div class="grid-item height-two"></div>
        <div class="grid-item height-four"></div>
        <div class="grid-item height-three"></div>
        <div class="grid-item height-five"></div>
        <div class="grid-item height-six"></div>
        <div class="grid-item height-one"></div>
        <div class="grid-item height-seven"></div>
        <div class="grid-item height-two"></div>
        <div class="grid-item height-four"></div>
        <div class="grid-item height-three"></div>
        <div class="grid-item height-five"></div>
        <div class="grid-item height-six"></div>
        <div class="grid-item height-one"></div>
        <div class="grid-item height-seven"></div>
        <div class="grid-item height-two"></div>
        <div class="grid-item height-four"></div>
        <div class="grid-item height-three"></div>
        <div class="grid-item height-five"></div>
        <div class="grid-item height-six"></div>
    </div>
    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js'></script>
    <script src="js/index.js"></script>
</body>
</html>

O CSS (css/style.css)

.container {
  max-width: 960px;
  margin: 0 auto;
}
.grid { 
  margin: 0 auto;
}
.grid-item { 
  width: 305px;
  margin-bottom: 15px;
}
.height-one { 
  height: 50px;
  background: #e74c3c;
}
.height-two { 
  height: 100px;
  background: #f1c40f;
}
.height-three { 
  height: 150px;
  background: #e67e22;
}
.height-four { 
  height: 200px;
  background: #2c3e50;
}
.height-five { 
  height: 250px;
  background: #27ae60;
}
.height-six { 
  height: 300px;
  background: #9b59b6;
}
.height-seven { 
  height: 350px;
  background: #2980b9;
}
h1, p {
  text-align: center;
}

Observação: Você pode omitir a altura, estou adicionando classes para altura porque os elementos não tem conteúdo no exemplo.

O JavaScript (js/index.js)

$(function(){
  $('.grid').masonry({
    isFitWidth: true,
    itemSelector: '.grid-item',
    gutter: 15
  });
});

Saiba mais sobre Masonry

O exemplo acima é bem básico, mais da para você ter uma noção sobre como criar sua grid perfeita para a maioria dos navegadores novos e antigos, mas existem milhares de opções que você pode utilizar com o Masonry na página abaixo:

Até o próximo!

Validar CPF e CNPJ com JavaScript ou jQuery é a mesma coisa do que fizemos anteriormente com PHP (leia o artigo abaixo), portanto, não vou entrar em muitos detalhes sobre cálculos ou sobre o que nossas funções vão realizar.

Vou passar um arquivo JavaScript que fará o serviço por nós, logo em seguida explicarei como utilizar a função principal para validar ou formatar CPF ou CNPJ em um único campo.

Arquivo valida_cpf_cnpj.js

Este é o arquivo que irá conter todas as funções para a validação do CPF e do CNPJ, segue o código:

/*
 verifica_cpf_cnpj
 
 Verifica se é CPF ou CNPJ
 
 @see http://www.todoespacoonline.com/w/
*/
function verifica_cpf_cnpj ( valor ) {

    // Garante que o valor é uma string
    valor = valor.toString();
    
    // Remove caracteres inválidos do valor
    valor = valor.replace(/[^0-9]/g, '');

    // Verifica CPF
    if ( valor.length === 11 ) {
        return 'CPF';
    } 
    
    // Verifica CNPJ
    else if ( valor.length === 14 ) {
        return 'CNPJ';
    } 
    
    // Não retorna nada
    else {
        return false;
    }
    
} // verifica_cpf_cnpj

/*
 calc_digitos_posicoes
 
 Multiplica dígitos vezes posições
 
 @param string digitos Os digitos desejados
 @param string posicoes A posição que vai iniciar a regressão
 @param string soma_digitos A soma das multiplicações entre posições e dígitos
 @return string Os dígitos enviados concatenados com o último dígito
*/
function calc_digitos_posicoes( digitos, posicoes = 10, soma_digitos = 0 ) {

    // Garante que o valor é uma string
    digitos = digitos.toString();

    // Faz a soma dos dígitos com a posição
    // Ex. para 10 posições:
    //   0    2    5    4    6    2    8    8   4
    // x10   x9   x8   x7   x6   x5   x4   x3  x2
    //   0 + 18 + 40 + 28 + 36 + 10 + 32 + 24 + 8 = 196
    for ( var i = 0; i < digitos.length; i++  ) {
        // Preenche a soma com o dígito vezes a posição
        soma_digitos = soma_digitos + ( digitos[i] * posicoes );

        // Subtrai 1 da posição
        posicoes--;

        // Parte específica para CNPJ
        // Ex.: 5-4-3-2-9-8-7-6-5-4-3-2
        if ( posicoes < 2 ) {
            // Retorno a posição para 9
            posicoes = 9;
        }
    }

    // Captura o resto da divisão entre soma_digitos dividido por 11
    // Ex.: 196 % 11 = 9
    soma_digitos = soma_digitos % 11;

    // Verifica se soma_digitos é menor que 2
    if ( soma_digitos < 2 ) {
        // soma_digitos agora será zero
        soma_digitos = 0;
    } else {
        // Se for maior que 2, o resultado é 11 menos soma_digitos
        // Ex.: 11 - 9 = 2
        // Nosso dígito procurado é 2
        soma_digitos = 11 - soma_digitos;
    }

    // Concatena mais um dígito aos primeiro nove dígitos
    // Ex.: 025462884 + 2 = 0254628842
    var cpf = digitos + soma_digitos;

    // Retorna
    return cpf;
    
} // calc_digitos_posicoes

/*
 Valida CPF
 
 Valida se for CPF
 
 @param  string cpf O CPF com ou sem pontos e traço
 @return bool True para CPF correto - False para CPF incorreto
*/
function valida_cpf( valor ) {

    // Garante que o valor é uma string
    valor = valor.toString();
    
    // Remove caracteres inválidos do valor
    valor = valor.replace(/[^0-9]/g, '');


    // Captura os 9 primeiros dígitos do CPF
    // Ex.: 02546288423 = 025462884
    var digitos = valor.substr(0, 9);

    // Faz o cálculo dos 9 primeiros dígitos do CPF para obter o primeiro dígito
    var novo_cpf = calc_digitos_posicoes( digitos );

    // Faz o cálculo dos 10 dígitos do CPF para obter o último dígito
    var novo_cpf = calc_digitos_posicoes( novo_cpf, 11 );

    // Verifica se o novo CPF gerado é idêntico ao CPF enviado
    if ( novo_cpf === valor ) {
        // CPF válido
        return true;
    } else {
        // CPF inválido
        return false;
    }
    
} // valida_cpf

/*
 valida_cnpj
 
 Valida se for um CNPJ
 
 @param string cnpj
 @return bool true para CNPJ correto
*/
function valida_cnpj ( valor ) {

    // Garante que o valor é uma string
    valor = valor.toString();
    
    // Remove caracteres inválidos do valor
    valor = valor.replace(/[^0-9]/g, '');

    
    // O valor original
    var cnpj_original = valor;

    // Captura os primeiros 12 números do CNPJ
    var primeiros_numeros_cnpj = valor.substr( 0, 12 );

    // Faz o primeiro cálculo
    var primeiro_calculo = calc_digitos_posicoes( primeiros_numeros_cnpj, 5 );

    // O segundo cálculo é a mesma coisa do primeiro, porém, começa na posição 6
    var segundo_calculo = calc_digitos_posicoes( primeiro_calculo, 6 );

    // Concatena o segundo dígito ao CNPJ
    var cnpj = segundo_calculo;

    // Verifica se o CNPJ gerado é idêntico ao enviado
    if ( cnpj === cnpj_original ) {
        return true;
    }
    
    // Retorna falso por padrão
    return false;
    
} // valida_cnpj

/*
 valida_cpf_cnpj
 
 Valida o CPF ou CNPJ
 
 @access public
 @return bool true para válido, false para inválido
*/
function valida_cpf_cnpj ( valor ) {

    // Verifica se é CPF ou CNPJ
    var valida = verifica_cpf_cnpj( valor );

    // Garante que o valor é uma string
    valor = valor.toString();
    
    // Remove caracteres inválidos do valor
    valor = valor.replace(/[^0-9]/g, '');


    // Valida CPF
    if ( valida === 'CPF' ) {
        // Retorna true para cpf válido
        return valida_cpf( valor );
    } 
    
    // Valida CNPJ
    else if ( valida === 'CNPJ' ) {
        // Retorna true para CNPJ válido
        return valida_cnpj( valor );
    } 
    
    // Não retorna nada
    else {
        return false;
    }
    
} // valida_cpf_cnpj

/*
 formata_cpf_cnpj
 
 Formata um CPF ou CNPJ

 @access public
 @return string CPF ou CNPJ formatado
*/
function formata_cpf_cnpj( valor ) {

    // O valor formatado
    var formatado = false;
    
    // Verifica se é CPF ou CNPJ
    var valida = verifica_cpf_cnpj( valor );

    // Garante que o valor é uma string
    valor = valor.toString();
    
    // Remove caracteres inválidos do valor
    valor = valor.replace(/[^0-9]/g, '');


    // Valida CPF
    if ( valida === 'CPF' ) {
    
        // Verifica se o CPF é válido
        if ( valida_cpf( valor ) ) {
        
            // Formata o CPF ###.###.###-##
            formatado  = valor.substr( 0, 3 ) + '.';
            formatado += valor.substr( 3, 3 ) + '.';
            formatado += valor.substr( 6, 3 ) + '-';
            formatado += valor.substr( 9, 2 ) + '';
            
        }
        
    }
    
    // Valida CNPJ
    else if ( valida === 'CNPJ' ) {
    
        // Verifica se o CNPJ é válido
        if ( valida_cnpj( valor ) ) {
        
            // Formata o CNPJ ##.###.###/####-##
            formatado  = valor.substr( 0,  2 ) + '.';
            formatado += valor.substr( 2,  3 ) + '.';
            formatado += valor.substr( 5,  3 ) + '/';
            formatado += valor.substr( 8,  4 ) + '-';
            formatado += valor.substr( 12, 14 ) + '';
            
        }
        
    } 

    // Retorna o valor 
    return formatado;
    
} // formata_cpf_cnpj

Instruções de uso: Crie um arquivo chamado valida_cpf_cnpj.js e coloque-o dentro de uma pasta chamada “js” na raiz do seu site.

Adicionando o script ao HTML

Adicione o seguinte ao cabeçalho (head) do seu HTML:

<script src="js/valida_cpf_cnpj.js"></script>

Por exemplo:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Tutsup - Valida CPF e CNPJ</title>
        
        <style>
        .valido {
            border: 1px solid green;
        }
        .invalido {
            border: 1px solid red;
        }
        </style>
        
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>
        
        <!-- Funções para validação de CPF e CNPJ -->
        <script src="js/valida_cpf_cnpj.js"></script>
        
        <!-- EXEMPLOS -->
        
        <!-- Pressionando teclas -->
        <script src="js/exemplo_1.js"></script>
        
        <!-- Após sair do campo -->
        <script src="js/exemplo_2.js"></script>     
        
        <!-- Formatando o CPF ou CNPJ -->
        <script src="js/exemplo_3.js"></script>
    </head>
    <body>
        <input class="cpf_cnpj">
    </body>
</html>

Agora vamos ver alguns exemplos de validação.

Exemplos

Existe uma função chamada de valida_cpf_cnpj e outra chamada formata_cpf_cnpj, ambas validam CPF e CNPJ. A diferença entre elas é a seguinte:

  • valida_cpf_cnpj – Valida e retorna “true” para CPF/CNPJ corretos; retorna “false” para CPF/CNPJ inválidos.
  • formata_cpf_cnpj – Valida e retorna o CPF/CNPJ formatado (###.###.###-## ou ##.###.###/####-##); retorna “false” para CPF/CNPJ inválidos.

Para utilizar ambas as funções, você só precisa enviar o CPF ou CNPJ com qualquer formatação, por exemplo:

if ( formata_cpf_cnpj( '38.741.509/0001-68' ) ) {
    alert('OK');
} else {
    alert('CPF ou CNPJ inválido!');
}

// OU

if ( valida_cpf_cnpj( '085.647.291-30 ' ) ) {
    alert('OK');
} else {
    alert('CPF ou CNPJ inválido!');
}

Vamos ver alguns exemplos com jQuery.

Exemplo 1

Neste exemplo, vou validar o CPF/CNPJ enquanto a pessoa está digitando, veja:

// Testando a validação usando jQuery
$(function(){

    // ## EXEMPLO 1
    // Aciona a validação a cada tecla pressionada
    var temporizador = false;
    $('.cpf_cnpj').keypress(function(){
    
        // O input que estamos utilizando
        var input = $(this);
        
        // Limpa o timeout antigo
        if ( temporizador ) {
            clearTimeout( temporizador );
        }
        
        // Cria um timeout novo de 500ms
        temporizador = setTimeout(function(){
            // Remove as classes de válido e inválido
            input.removeClass('valido');
            input.removeClass('invalido');
        
            // O CPF ou CNPJ
            var cpf_cnpj = input.val();
            
            // Valida
            var valida = valida_cpf_cnpj( cpf_cnpj );
            
            // Testa a validação
            if ( valida ) {
                input.addClass('valido');
            } else {
                input.addClass('invalido');
            }
        }, 500);
    
    });
});

Se o CPF/CNPJ estiver incorreto, incluo o classe “invalido”; se estiver correto, incluo a classe “valido”.

Exemplo 2

Neste exemplo vou validar o CPF/CNPJ quando o usuário sair do campo, ou seja, terminou de digitar e vai para outro input. Veja:

// Testando a validação usando jQuery
$(function(){

    // ## EXEMPLO 2
    // Aciona a validação ao sair do input
    $('.cpf_cnpj').blur(function(){
    
        // O CPF ou CNPJ
        var cpf_cnpj = $(this).val();
        
        // Testa a validação
        if ( valida_cpf_cnpj( cpf_cnpj ) ) {
            alert('OK');
        } else {
            alert('CPF ou CNPJ inválido!');
        }
        
    });
    
});

 Exemplo 3

Neste último exemplo, vou validar o CPF/CNPJ e formatar o valor ao mesmo tempo:

// Testando a validação usando jQuery
$(function(){

    // ## EXEMPLO 3
    // Aciona a validação e formatação ao sair do input
    $('.cpf_cnpj').blur(function(){
    
        // O CPF ou CNPJ
        var cpf_cnpj = $(this).val();
        
        // Testa a validação e formata se estiver OK
        if ( formata_cpf_cnpj( cpf_cnpj ) ) {
            $(this).val( formata_cpf_cnpj( cpf_cnpj ) );
        } else {
            alert('CPF ou CNPJ inválido!');
        }
        
    });

});

Viu como é legal?

Download

Caso queira baixar todo o código acima (incluindo os exemplos), basta clicar no link abaixo:

Extraia o conteúdo da pasta e abra o arquivo “index.html” em um navegador de internet, você poderá testar a validação em seu próprio computador.

Concluindo

Conforme descrevi, fui bem direto neste artigo, porém, acho que está claro como utilizar as funções que passei. Mesmo assim, não hesite em deixar sua opinião, dúvida ou melhoria no código.

Caso queira saber mais sobre os cálculos do algoritmo do CPF ou CNPJ, basta ler os artigos:

Até o próximo “Tutsup”.

Draggable, sortable e droppable são elementos do jQuery UI que trabalham com arrastar, ordenar e saltar qualquer objeto dentro do DOM (seu HTML). Utilizando os três juntos você pode criar aquele sistema de arrastar e soltar que você sempre viu em sites maiores e mais modernos.

Veja o que cada um pode fazer:

  • Draggable – Permite que você arraste qualquer elemento dentro do seu HTML utilizando o mouse;
  • Sortable – Permite que você ordene e reordene os elementos dentro de um container;
  • Droppable – Permite o evento de soltar um elemento dentro de qualquer container, possibilitando uma ação específica quando o elemento é solto.

Neste artigo você vai ver como criar um sistema de arrastar, soltar, ordenar e reordenar elementos com jQuery UI. Além disso, explicarei um exemplo simples sobre como salvar os dados dos elementos temporários.

Então vamos lá!

O HTML

Para nosso HTML, precisamos do seguinte:

  • Um container para os elementos que serão arrastados;
  • Um container para os elementos que serão soltos e reordenados;
  • Um container para apagar elementos;

Veja como ficou:

<!-- Container geral de arrastar e soltar -->
<div class="drag-drop clearfix">

    <!-- Elementos que serão arrastados -->
    <div class="drag-container clearfix">
        <div class="drag">1</div>
        <div class="drag">2</div>
        <div class="drag">3</div>
    </div> <!-- .drag-container -->

    <!-- Elementos que serão soltos e reordenados -->
    <div class="drop-container clearfix">
        <p>Arraste números aqui</p>
    </div> <!-- .drop-container -->
  
</div> <!-- .drag-drop -->

<!-- Lixeira -->
<div class="lixeira">
    Arraste aqui para apagar
</div> <!-- .lixeira -->

<!-- Botão para salvar os dados -->
<button class="salvar">Salvar</button>

Se você analisar os comentários acima, poderá entender o que eu descrevi anteriormente.

O CSS

O CSS é parte fundamental do seu sistema de “Arrastar e soltar”, ele deve ser intuitivo e os elementos devem dar a possibilidade de clicar com o mouse, arrastar e soltar de maneira simples.

Veja como ficou o meu CSS:

.clearfix:after {
    content: '.';
    display: block;
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    overflow: hidden;
}

body {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 20px;
}

/* Drag e Drop system */
.drag-container, 
.drop-container {
    width: 50%;
    background: #333;
    font-size: 0;
    text-align: center;
    float: left;
    color: #fff;
    height: 190px;
}
.drag, 
.placeholder {
    font-size: 12px;
    width: 90%;
    height: 50px;
    line-height: 50px;
    background: #0074a2;
    margin: 10px auto;
}
.drop-container {
    background: #222;
}
.drop-container p {
    font-size: 18px;
    line-height: 190px;
}
.placeholder {
    background: none;
    border: 1px dotted #eee;
}
.lixeira {
    margin: 20px 0;
    background: #ddd;
    border: 2px dotted #999;
    text-align: center;
    line-height: 50px;
    color: #999;
    font-weight: 700;
    font-size: 18px;
}
.lixeira-ativa {
    border: 2px dotted red;  
}

Isso deverá gerar algo como a imagem abaixo:

Draggable, sortable e droppable

Draggable, sortable e droppable

Agora vamos precisar do jQuery e jQuery UI.

O jQuery e jQuery UI

Nosso sistema de arrastar e soltar irá utilizar Draggable e Sortable, apenas a lixeira utilizará droppable.

Nota: Se você não entende de jQuery, leia nosso artigo Introdução ao jQuery.

Veja como ficou o código:

$(function(){
    // Arrastar
    $('.drag').draggable({
        // Conecta com a função de reordenar
        connectToSortable: '.drop-container',
        helper: 'clone'
    });

    // Soltar e reordenar
    $('.drop-container').sortable({
        placeholder: 'placeholder',
        activate: function(event, ui){
            $('.drop-container p').remove();
        }
    });

    // Lixeira
    $('.lixeira').droppable({
        hoverClass: 'lixeira-ativa',
        drop: function(event, ui) {
            $(ui.draggable).remove();
        }
    });
    
    // Salvar
    $('.salvar').click(function(){
        var valores = new Array();
        
        $('.drop-container .drag').each(function(){
            valores.push( $(this).html() );
        });
        
        // Faça o que preferir com os valores
        alert(valores);
    });
});

Perceba que os elementos acima não precisam ser alterados, porém, a parte de “Salvar” é jQuery puro. O que eu fiz foi o seguinte:

Quando o usuário clicar no botão de salvar, verifico todos os elementos que estão no container de “soltar” e incluo os valores em um array. Depois disso, você pode fazer o que preferir com os valores, como utilizar ajax para salvar, ou continuar manipulando os dados.

Concluindo

Caso queira visualizar uma demonstração com possibilidade de edição, acesse este Codepen.

Se tiver alguma dúvida, basta comentar.

Para que você aprenda qualquer parte da programação, é necessário começar por algum lugar. Este artigo traz uma breve Introdução ao jQuery para que você comece a entender como funciona a biblioteca.

Antes disso, lembre-se de dar uma analisada em nosso Curso de JavaScript, pois, é bom que você entenda JS para trabalhar com jQuery.

Segue o link para o curso de JS:

Agora vamos ao jQuery.

O que é jQuery?

O jQuery é uma biblioteca JavaScript disponibilizada como Software Livre, ou seja, pode ser utilizado tanto em aplicações pessoais como empresariais de modo gratuito (você pode fazer uma doação para seus desenvolvedores se quiser).

Com o jQuery, é possível implementar animações, efeitos, manipulação de eventos JavaScript, percorrer documentos HTML, adicionar CSS, Texto, validar formulários, interagir com Ajax, enfim, é possível fazer tudo isso e muito mais sem ter que atualizar a página. Isso faz com que seu website fique totalmente dinâmico, moderno, leve e elegante.

jQuery veio para mudar a maneira em que você escreve JavaScript, pois milhares de linhas de código poderão se resumir em apenas uma linha de fácil entendimento, por isso, seu lema é “Escreva menos, faça mais!” (Write Less, Do More).

Foi desenvolvido, inicialmente, por John Resig que é um profundo conhecedor da linguagem JavaScript e queria fazer com que o modo de escrever códigos para adicionar pequenos efeitos em páginas fosse mais simples para o desenvolvedor de websites: “Porque submeter os desenvolvedores ao martírio de desenvolver longos e complexos códigos para adicionar simples efeitos?“.

John Resig foi o criador dos livros Pro JavaScript TechniquesSecrets of the JavaScript Ninja.

Baixar o jQuery

Felizmente, se você não tem uma hospedagem para baixar e hospedar o arquivo do jQuery, o código está hospedado pelo próprio site da biblioteca, sendo possível a utilização deste mesmo arquivo diretamente no seu código. Segue o link:

Se você tem uma hospedagem própria, baixe o arquivo no site abaixo:

A versão que vamos trabalhar neste tutorial é a 1.11.1, que, atualmente, é a versão mais recente do jQuery.

Nota importante: Em alguns navegadores de internet (Como o firefox), o link para download pode não apresentar o gerenciador de downloads para salvar o arquivo, então você deve copiar todo o código da página de download do jQuery pressionando as teclas “Ctrl + A” do seu teclado para selecionar tudo; logo em seguida, abra o bloco de notas (ou qualquer editor de textos voltado a programação) e salve os dados em um arquivo com o seguinte nome e extensão “jquery.js“.

É imprescindível a utilização do “.js” ao final do nome do arquivo, como já foi descrito.

Instalando o jQuery

Tudo o que for descrito aqui neste mini-curso poderá ser acompanhado por você utilizando o bloco de notas do seu Windows, ou seu editor de textos voltado para programação de qualquer outro sistema operacional. O bloco de notas pode ser encontrado no seguinte caminho no Windows:

  • Abra o menu iniciar;
  • Clique em Programas – Acessórios;
  • Em seguida “Bloco de Notas”;

Quando for salvar seus arquivos, utilize a seguinte sintaxe: Nome Do seu Arquivo + .html, ex: aula_1.html.

Qualquer arquivo .html, poderá ser aberto em um navegador de internet para que você faça a visualização do código no modo em que ele irá aparecer na sua página da internet.

Para fazer edição nesse arquivo, é necessário clicar com o botão direito do mouse sobre ele, selecionar a opção “Abrir com” e escolher o bloco de notas (ou qualquer outro editor de textos voltado para programação instalado em seu computador).

Para que você entenda melhor, criei uma pequena página HTML, segue o código:

<!doctype html>
<html>

<head>
<title>Aula 1 - Instalando jQuery</title>
</head>

<body>
</body>

</html>

Todo e qualquer desenvolvedor web sabe que o código acima é a estrutura mais básica possível de um documento HTML.

Para quem não é um desenvolvedor, o código acima diz que temos um documento HTML com o título “Aula 1 – Instalando jQuery”.

Isso será apresentado na barra de títulos do seu navegador de internet, então comece copiando este código para o bloco de notas e salve como descrito anteriormente: nome_de_sua_preferencia.html.

Como o documento acima é o mais básico, ele ainda não reconhece caracteres como “ç” e acentuação, pois ainda não configuramos o charset. É imprescindível a utilização de uma META descrevendo o que este documento contém (charset), então coloque essa meta logo abaixo da tag <head>, como mostra o código abaixo:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">

<title>Aula 1 - Instalando jQuery</title>
</head>

<body>
</body>

</html>

Para a instalação correta do jQuery, é necessário que você saiba o local onde ele foi salvo.

Em nosso exemplo, vamos salvar o arquivo dentro de uma pasta chamada js na pasta raiz do nosso site.

Na linguagem de programação Web, e várias outras linguagens de programação, raiz é o mesmo que a pasta inicial do seu programa.

Por exemplo, se o arquivo está dentro da raiz do site, não é necessário escrever /nome_do_arquivo.extensao, basta escrever o nome do arquivo e a extensão sem a barra.

Como nosso arquivo do jQuery (nomeado de jquery.js) está na pasta js dentro da raiz do site, o caminho dele será js/jquery.js, o que quer dizer que ele está na pasta js, que está na raiz do site.

Nota: Crie uma pasta e jogue todos os arquivos dentro dela, essa será a raiz do nosso site.

Sabendo onde está nosso arquivo jquery.js, iniciamos a “instalação” dele do mesmo modo que linkamos qualquer arquivo .js em nosso website, iniciamos e terminamos com <script src=”js/jquery.js”></script>.

Lendo este pequeno código e sabendo do que já foi dito, você já pode entender mais ou menos o que ele quer dizer: Abrimos a tag com <script em seguida terminamos indicando o caminho do arquivo jquery.js com src=”js/jquery.js”. Toda e qualquer tag que se abre em HTML ou qualquer outra linguagem de programação, deve ser fechada; então fechamos o nosso script com </script>.

Nosso script de instalação do jQuery, deverá estar entre as tags <head> e </head>, veja o exemplo em nosso arquivo HTML:

Arquivo HTML com jQuery instalado:

<!doctype html>
<html>

<head>
<meta charset=UTF-8">

<script src="js/jquery.js"></script>

<title>Aula 1 - Instalando jQuery</title>
</head>

<body>
</body>

</html>

Estrutura do jQuery

Agora vamos ver as estruturas mais usadas para o jQuery (você pode utilizar a que preferir).

  • A forma mais completa (com a palavra jQuery) que é menos utilizada, porém previne contra incompatibilidade com outras bibliotecas JavaScript;
  • A forma com o cifrão ($);
  • E a mais forma compacta (a que eu sempre utilizo).

Tudo se passa dentro de um ambiente JavaScript, portanto, todo e qualquer código jQuery deverá estar dentro das tags <script> e </script>, veja o exemplo:

A forma completa:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">

<script src="js/jquery.js"></script>

<script>
// INICIO DO JQUERY
jQuery(document).ready(function(){

    // AQUI VEM O CODIGO                                

}); // FIM DO JQUERY
</script>

<title>Aula 1 - Instalando jQuery</title>
</head>

<body>
</body>

</html>

Como você pode notar, escrevi onde começa a estrutura do jQuery, e onde ela termina. Esses scripts poderão ser colocados entre as tags <head> e </head> ou entra as tags <body> e </body>.

Por enquanto só vamos utilizar os códigos na head do documento, como mostra o exemplo anterior, portanto, não vamos mais mostrar todo o código html completo, tudo se passará no local onde foi adicionado o código mostrado no último exemplo.

Forma com apenas o cifrão

Também é possível escrever jQuery com o seguinte formato:

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    // AQUI VEM O CODIGO                                
});
</script>

Forma mais compacta

E por fim, a forma mais compacta para escrever trechos de código jQuery:

<script language="javascript" type="text/javascript">
$(function(){
    // AQUI VEM O CODIGO                                
});
</script>

A partir daqui, você já sabe que estamos falando de JavaScript e jQuery, portanto, agora mostraremos apenas o código jQuery em si, sem o <script> e </script>, mas você já sabe que deve colocar isso em documentos HTML, certo? Caso contrário não vai funcionar.

Escrevendo um texto no documento com jQuery

Para escrever qualquer texto no documento com jQuery, utilizamos a função .text(), veja:

$(document).ready(function(){
    $("body").text("Este é meu primeiro texto com jQuery");
});

No início, isso pode parecer um pouco complicado para você, mas vou explicar o código e você vai ver que não é nada complicado.

  • Primeiramente, escrevemos a estrutura do nosso jQuery;
  • Logo em seguida, escrevemos o código $(“body”).text(“Este é meu primeiro texto com jQuery”);. Isso quer dizer que: 1) $(“body”) –  estamos selecionando a tag body do nosso HTML; 2) .text(“Este é meu primeiro texto com jQuery”); – estamos pedindo ao jQuery que escreva “Este é meu primeiro texto com jQuery” dentro da tag selecionada (nesse caso a tag body).

Isso gera um pequeno problema para nós. Todo texto dentro da tag body (o documento inteiro) será substituído pelo texto que escrevemos agora, e nós não queremos um site de uma frase só, certo?

Bom, para isso é simples, basta selecionarmos um elemento apenas, e não todo o “body”. (mas calma que você ainda vai aprender isso, por enquanto vamos trabalhar na tag body).

Escrevendo HTML com jQuery

Com jQuery, é possível escrever em HTML dentro do elemento selecionado com a expressão .html(), veja o exemplo:

$(document).ready(function(){
    $("body").html("Este é meu primeiro parágrafo HTML com jQuery");                    
});

Seguindo o mesmo exemplo que utilizamos para escrever um texto no body, utilizamos .html() para escrever em HTML no corpo do documento.

Adicionando conteúdo em elementos com jQuery

Lembra quando dissemos do problema ao adicionar conteúdo direto na tag body, onde substituímos tudo que tem dentro dela? Certo, mas você pode resolver este problema utilizando a expressão .append() para adicionar conteúdo ao fim do elemento, ou .prepend() para adicionar conteúdo ao início do elemento, sem apagar o que já existe nele. Veja:

$(document).ready(function(){
    $("body").html("<p>Este é meu primeiro <strong>parágrafo HTML</strong> com jQuery</p>");
    $("body").append("<p>Este é meu segundo <strong>parágrafo HTML</strong> com jQuery</p>");
});

O Script sempre é executado de cima para baixo e da esquerda para direita, agora que estamos começando a dar mais valores a nossos elementos é muito importante que você saiba disso. A função .append(), segue o mesmo padrão da função .text() e .html().

Além disso, tanto append quanto prepend suportam texto e HTML.

Adicionando ou removendo atributo de elementos com jQuery

A maioria dos elementos HTML possuem atributos, que podem ser id, class, rel, alt, title, src, style e vários outros. Com jQuery você pode facilmente adicionar ou remover esses atributos com a expressão .attr(), além de ter a possibilidade de acessar os valores já registrados no elemento.

Vamos adicionar uma classe chamada “paragrafo” em um <p> dentro do documento (body), veja:

$(document).ready(function(){
    $("body").html("<p>Meu parágrafo com jQuery</p>");
    $("p").attr('class', 'paragrafo');
});

Isso será o mesmo que fazer isto:

<p class="paragrafo">Meu parágrafo com jQuery</p>

Como o script é executado de cima para baixo e da esquerda para direita, eu poderia colocar a classe, e criar um novo paragrafo que não terá essa mesma classe, veja como:

$(document).ready(function(){
    $("body").html("<p>Meu parágrafo com jQuery</p>");
    $("p").attr('class', 'paragrafo');
    $("body").append("<p>Meu parágrafo com jQuery</p>");
});

O segundo paragrafo não terá a classe adicionada ao primeiro, porque ela foi adicionada antes dele ser criado.

Vamos supor que queremos remover uma classe ou qualquer outro atributo do documento completo (em todo o documento), logo utilizaremos a função .removeAttr().

Suponhamos que existam três parágrafos com a classe “paragrafo”, veja o documento html abaixo:

<body>
<p class="paragrafo">P 1</p>
<p class="paragrafo">P 2</p>
<p class="paragrafo">P 3</p>
</body>

O arquivo CSS do documento está assim:

.paragrafo {
    color:red;    
}

Estamos indicando que todos os parágrafos do documento tenham a cor vermelha, certo? Se você quer que isso não ocorra, basta fazer isso com jQuery:

$(document).ready(function(){
    $("p").removeAttr("class", "paragrafo");
});

No trecho acima eu removi todas as classes “paragrafo” do documento, ou seja, os “p”s não terão mais a cor vermelha.

Então vamos brincar um pouco mais com o jQuery. Já que removemos a classe do parágrafo, vamos adicionar um id no CSS como mostra o exemplo abaixo:

.paragrafo {
    color:red;    
}
#paragrafo {
    color:blue;    
}

E no jQuery, adicione mais uma linha, como mostra o exemplo abaixo:

$(document).ready(function(){
    $("p").removeAttr("class", "paragrafo");
    $("p").attr("id", "paragrafo");
});

Deu para entender? Veja que removemos a classe “paragrafo” do nosso “p” e adicionamos o ID “paragrafo” no mesmo.

Você pode manipular os elementos do site da maneira que achar melhor utilizando o exemplo acima.

Seletores básicos

Para quem entende mais de CSS e HTML, já deve ter notado que os seletores do CSS são os mesmo para o jQuery, certo? Existem milhares de seletores e milhares de funções, mas se você sabe utilizar o CSS, sabe selecionar elementos com jQuery (ou pelo menos consegue fazer algumas coisas).

Vamos aos exemplo práticos. A partir daqui, vou mostrar os exemplo em páginas externas, para que você veja o que acontece.

Veja um exemplo HTML e CSS (no mesmo arquivo):

<style>
.paragrafo {
    color:red;    
}
</style>
<body>
<p class="paragrafo">P 1</p>
<p class="paragrafo">P 2</p>
<p class="paragrafo">P 3</p>
</body>

Isso simplesmente faria com que os parágrafos com a classe “paragrafo” ficassem vermelhos, ok? Bem, então eu quero selecionar os parágrafos com a classe paragrafo e remover esse atributo deles, veja como fazer com o jQuery:

$(document).ready(function(){
    $(".paragrafo").removeAttr("class", "paragrafo");
});

Note que mesmo adicionando o CSS dizendo que os parágrafos com a classe “paragrafo” serão vermelhos, eles continuam com a cor padrão, isso acontece porque removemos o atributo “class” deles.

Seletores funcionam sempre assim: $(“SELETOR_AQUI”).FUNCAO(“ATRIBUTOS”);

Ou seja, primeiro você seleciona o elemento, depois diz quem vai trabalhar com ele, em seguida diz o que fazer com o elemento. Ficou mais claro agora?

Na documentação do jQuery você tem todos os seletores disponíveis, segue o link: http://api.jquery.com/category/selectors/

Adicionando CSS ao elemento com jQuery

Com jQuery você pode adicionar CSS em elementos HTML utilizando os seletores e a expressão .css().

Vamos criar outro documento HTML, para isso siga o exemplo que já explicamos e, dentro do body, adicione 5 DIVs sem valor nenhum, como o exemplo abaixo:

<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>

Agora vá no head do documento, onde estão nossos scripts, e vamos alterar nosso jQuery como mostra o exemplo abaixo:

$(document).ready(function(){
    $("div").css({ 
        "width":"50px", 
        "height":"50px", 
        "background":"red", 
        "margin":"5px", 
        "float":"left" 
    });
});

Viu que mudamos o seletor? Agora é “div”.

No exemplo acima, todos os DIVs terão o CSS indicado no jQuery.

Agora vamos fazer com que o primeiro DIV tenha um valor diferente dos outros, veja o exemplo:

$(document).ready(function(){
    $("div").css({ 
        "width":"50px", 
        "height":"50px", 
        "background":"red", 
        "margin":"5px", 
        "float":"left" 
    });
    $("div:first").css({ 
        "width":"50px", 
        "height":"50px", 
        "background":"blue", 
        "margin":"5px", 
        "float":"left" 
    });
});

Neste exemplo, o primeiro DIV terá o fundo azul.

Reparou que para selecionar o primeiro elemento de cada item, basta adicionar :first.

Eventos jQuery

Um evento é quando algo tem que ocorrer para que o script seja disparado. Caso não tenha reparado, estamos utilizando o evento “load” desde que iniciamos este curso. Trata-se do .ready(), que indica para o jQuery que o script só será executado quando o documento é completamente carregado.

Existem vários outros eventos que vamos ver a seguir (além de vários outros).

Para uma lista completa de eventos, basta acessar o endereço abaixo:

Vamos ver alguns eventos abaixo:

Click – O evento click, como o próprio nome já diz, acontece quando o elemento é clicado.

Vamos ao código:

Crie dois botões, um com ID = bt1 e outro com ID = bt2:

<body>
<button id="bt1" type="button">Botão 1</button>
<button id="bt2" type="button">Botão 2</button>
</body>

Agora vamos criar o nosso evento click em nosso jQuery, veja o exemplo:

$(document).ready(function(){
    $("#bt1").click(function(){
        alert("Você clicou no Botão 1");
    });
    $("#bt2").click(function(){
        alert("Você clicou no Botão 2");
    });
});

Agora, ao clicar em qualquer um dos botões, uma mensagem será exibida na tela.

O evento hover, acontece quando o usuário passa o mouse sobre o elemento ou retira o mouse do mesmo, veja um exemplo com os mesmos botões criados anteriormente (apenas o jQuery muda):

$(document).ready(function(){
    $("#bt1").hover(function(){
        alert("Você passou o mouse sobre o Botão 1");
    }, function(){
        alert("Você tirou o mouse do Botão 1");
    });
    $("#bt2").hover(function(){
        alert("Você passou o mouse sobre o Botão 2");
    }, function() {
        alert("Você tirou o mouse do Botão 2");
    });
});

Agora vamos começar a integrar nosso arquivo CSS com o jQuery, portanto, é necessário saber o que é CSS.

Considere o seguinte exemplo de CSS integrado ao documento:

<style>
.div_1 {
    width:500px;
    height:500px;
    background:blue;
}
.div_2 {
    width:500px;
    height:500px;
    background:red;
}
</style>
<body>
<div class="div_1"></div>
</body>

Quem entende de HTML e CSS, já percebeu que temos uma classe que adiciona um background azul no “div_1”, e também já notou que temos uma classe que não faz referência a nada, que é a .div_2.

Podemos fazer com que o jQuery remova a classe 1 do elemento e adicione a classe 2 com o evento .toggleClass(), veja:

$(document).ready(function(){
    $(".div_1").click(function () {
      $(this).toggleClass("div_2");
    });
});

Assim como todas as outras funções, é muito simples utilizar o .toggleClass().

Efeitos com jQuery

Agora vamos iniciar uma das partes mais interessantes (se não a mais) do jQuery, os efeitos.

Você já deve ter notado que várias páginas web possuem efeitos de DIVs que somem, deslizam ou apresentam qualquer efeito que não poderia ser adicionado com HTML ou CSS puro. Veja uma demonstração de efeito aqui.

Os efeitos são criados juntamente com os eventos, ou seja, quando você clica, quando a página carrega, ou vários outros eventos que existem.

Os efeitos também podem ser ligados ao nosso arquivo CSS, ou seja, você cria uma classe no CSS e depois a remove com jQuery, proporcionando um efeito.

Veja nosso exemplo de HTML e CSS:

<style>
.div_1 {
    width:500px;
    height:500px;
    background:blue;
    display:none;
}
</style>
<body>
<button type="button">Clique para aparecer</button>
<button type="button">Clique para sumir</button>
<div class="div_1"></div>
</body>

Perceba que temos 2 botões: O primeiro “Clique para aparecer” e o segundo (e último) “Clique para sumir”, perceba também que nenhum dos dois tem class ou id, então como poderíamos utilizar os seletores para interagir com estes botões?

Simples, podemos utilizar os seletores :first e :last, veja o exemplo com jQuery:

$(document).ready(function(){
    $("button:first").click(function () {
        $(".div_1").fadeIn("slow");
    });
    $("button:last").click(function () {
        $(".div_1").fadeOut("slow");
    });
});

Como estamos ocultando nosso div_1 com CSS display:none;, podemos utilizar os efeitos .fadeIn() e .fadeOut() para apresentar e esconder o elemento.

Também poderíamos utilizar .show() ou .hide() com o em nosso evento acima.

FadeIn e FadeOut podem ser utilizados com tempo de execução, normalmente “slow” ou “fast”, mas também poderíamos utilizar milissegundos, como fadeOut(3000) ou fadeIn(600).

Veja uma demonstração do fadeIn e fadeOut aqui.

Outra função muito interessante e utilizada com jQuery é o efeito .slideToggle(), veja uma demostração do .slidetoggle().

Utilizando nosso mesmo exemplo de HTML e CSS, vamos modificar o jQuery e utilizar o efeito .slideToggle():

$(document).ready(function(){
    $("button:first").click(function () {
        $(".div_1").slideToggle("slow").text("Clique no botão para sumir");
    });
});

É muito interessante a utilização do .slideToggle(); porque ele tem duas variações, mostra e esconde o elemento. Você não precisa criar várias linhas de código para que isso aconteça.

Exercício

Agora vou lançar um desafio a você, vou mostrar um código HTML, CSS e jQuery.

Tente entender o que fiz.

O HTML:

<body>
<h1>Segue o Mouse com jQuery</h1>

<div id="segue">Eu vou seguir você!</div>
<div id="mostra_na_div">Só sigo dentro da DIV</div>
<div id="div_caixa">Passe o mouse.</div>

</body>

Agora o CSS:

#segue {
    background: purple;
    padding: 15px;
    border: 1px solid #bdbdbd;
    position: absolute;
    color:#fff;
}
#mostra_na_div {
    background: purple;
    padding: 15px;
    border: 1px solid #ddd;
    position: absolute;
    color:#fff;
}
#div_caixa {
    background: #123456;
    padding: 15px;
    border: 1px solid #ddd;
    color:#fff;
    width:600px;
    height:300px;
}

Agora o jQuery:

$(document).ready(function(){
    $("#segue").hide();
    $("#mostra_na_div").hide();
    $(document).mousemove(function(e){
        $("#segue").show();
        $("#segue").html("Y = " + e.pageY + " px  X = " + e.pageX + " px");
        $("#segue").css({
            top: (e.pageY + 15) + "px",
            left: (e.pageX + 15) + "px"
        });
    });
    $("#div_caixa").mousemove(function(e){
        $("#mostra_na_div").show();
        $("#mostra_na_div").css({
            top: (e.pageY + 90) + "px",
            left: (e.pageX + 15) + "px"
        });
    });
    $("#div_caixa").mouseout(function(e){
        $("#mostra_na_div").hide();
    });
});

O que todo este código faz?

Você viu um DIV seguindo o mouse certo? Isso mesmo, então tente utilizar a sua imaginação e criar um código com jQuery.

Validação de formulários

Agora vamos utilizar uma função muito interessante do jQuery, a validação de formulários. Essa será a nossa última etapa do nosso mini-curso.

A validação de formulários é interessante para que não chegue nada indesejado nos seus emails ou no seu banco de dados.

Crie agora um pequeno formulário em html:

<body>
<form method="post" action="">
    <p>Nome: <input type="text" /></p>
    <p><input type="submit" /></p>
</form>
</body>

Agora você vai ver estruturas condicionais do JavaScript, que são IF e ELSE.

Essas estruturas são baseadas em condições do tipo: “Se isso ocorrer, faça isso; se não, faça aquilo”. Veja um exemplo:

if (crianca == "comer") {
    crianca = "vai brincar";    
} else {
    crianca = "não vai brincar";    
}

Nesse caso,  a condição para a criança é comer; se a criança comer, vai brincar; diferente disso (qualquer valor diferente), não vai brincar.

Agora vamos ver outra função interessante, a .val().

Ela retorna o valor de qualquer elemento do formulário utilizando os seletores, ou seja, para o input com id “nome”, o seletor será $(“#nome”), e para pegar o valor desse input $(“#nome”).val();.

Outra parte interessante são as variáveis. Com elas eu posso criar um pequeno trecho de um código para memorizar qualquer coisa que eu quiser.

Por exemplo, se quero o valor do primeiro input do meu formulário, então eu crio uma variável deste modo:

var variavel = $('input:first').val();

Setamos uma variável utilizando var nomedavariável = “valordavariável”;.

Vamos ver como obter o evento de submit do formulário HTML utilizando jQuery:

$(document).ready(function(){
    $("form").submit(function() {
        var nome = $('input:first').val();
        if (nome == "nome"){ alert("Enviado"); return true; }
        else { alert('Você deve digitar "nome"'); return false; }
    });
});

Nesse caso utilizamos a função .submit(). Isso significa que o formulário só será checado se for enviado. Se o usuário digitar “nome”, o formulário é submetido; caso contrário, ele recebe uma mensagem dizendo que deve digitar “nome”.

Utilizamos return true e return false. Se return true (verdadeiro), o formulário é submetido e a página é atualizada; se false (falso), o formulário não é submetido e a página não é atualizada, assim o usuário não perde o que já foi digitado no seu formulário.

Concluindo

Essa foi uma breve introdução (muito superficial, pra dizer a verdade) para que você compreenda o que é jQuery e o que essa biblioteca JavaScript pode fazer por você. Continue estudando e sempre aprimorando seus conhecimentos sobre JavaScript e jQuery, com apenas isso você poderá fazer coisas incríveis nas suas páginas web.

Não pense que lendo este artigo você estará apto a começar a desenvolver utilizando jQuery, ainda existem muitas coisas para aprender, várias das quais você vai continuar aprendendo se continuar seguindo o Tutsup.

Até o próximo tutorial.

Menu em abas (ou blocos com abas) são bastante úteis para o seu layout. Com eles é possível dividir seu conteúdo por categoria, deixar o layout mais limpo e aprimorar a experiência do usuário em seu site.

Criar o menu em abas é ainda mais simples. Com um pouco de HTML, CSS e uma ajudinha do jQuery, serão apenas algumas linhas de código até você atingir o objetivo.

Veja um exemplo do que vamos criar neste tutorial:

Então vamos lá.

Código completo

Primeiramente, vou exibir o código completo, depois explico tudo em blocos.

O HTML:

<div class="content">
  <div class="tabs-content">
    <div class="tabs-menu clearfix">
      <ul>
        <li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li>
        <li><a href="#" data-tab="tab2">Ipsum</a></li>
        <li><a href="#" data-tab="tab3">Dolor</a></li>
      </ul>
    </div> <!-- tabs-menu -->
    
    <div class="tab1 tabs first-tab">
     Conteúdo da aba 1
    </div> <!-- .tab1 -->
    
    <div class="tab2 tabs">
      Conteúdo da aba 2
    </div> <!-- .tab2 -->
    
    <div class="tab3 tabs">
      Conteúdo da aba 3 
    </div> <!-- .tab3 -->
    
  </div> <!-- .tabs -->
</div> <!-- .content -->

 O CSS:

/* Geral */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.5;
}
body {
  background: #222222;
}
a:focus {
  outline: none;
}
.content {
  margin: 30px;
}
.clearfix:after {
  content: '.';
  height: 0;
  font-size: 0;
  line-height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

/* Abas */
.tabs-content {
  background: #eee;
  font-family: sans-serif;
}

/* Menu das abas */
.tabs-menu {
  background: #0074a2;
}
.tabs-menu ul {
   list-style: none;
}
.tabs-menu ul li {
  float: left;
}
.tabs-menu ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
  background: #eee;
  color: #000;
}

/* Conteúdo das abas */
.tabs {
  display: none;
  padding: 30px;
}
.first-tab {
  display: block;
}

 O jQuery:

jQuery(function($){
  $('.tabs-menu ul li a').click(function(){
    var a = $(this);
    var active_tab_class = 'active-tab-menu';
    var the_tab = '.' + a.attr('data-tab');
    
    $('.tabs-menu ul li a').removeClass(active_tab_class);
    a.addClass(active_tab_class);
    
    $('.tabs-content .tabs').css({
      'display' : 'none'
    });
    
    $(the_tab).show();
    
    return false;
  });
});

Vamos aos detalhes.

Explicação detalhada

Agora vou detalhar o que cada uma das partes do nosso código faz.

O HTML:

O elemento com classe “content” não faz nada em específico, é apenas um div que contém todo o nosso HTML.

<div class="content">

</div> <!-- .content -->

As tags “tabs-content” são o conteúdo das abas, portanto, podemos configurar uma cor de fundo, fonte e coisas do tipo utilizando CSS.

<div class="content">
  <div class="tabs-content">

  </div> <!-- .tabs -->
</div> <!-- .content -->

Os elementos “tabs-menu” será o menu das abas:

<div class="tabs-menu clearfix">
  <ul>
    <li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li>
    <li><a href="#" data-tab="tab2">Ipsum</a></li>
    <li><a href="#" data-tab="tab3">Dolor</a></li>
  </ul>
</div> <!-- tabs-menu -->

A opção “data-tab” dos links indicará a classe da aba a ser exibida pelo jQuery.

As abas podem ter duas ou três classes, são elas:

  • classe-da-aba – A classe que você escolher para sua aba
  • tabs – Classe padrão de abas
  • first-tab – A tag que será exibida por padrão
<div class="tab1 tabs first-tab">

</div>

 O CSS

O CSS das abas é relativamente bem simples.

Configuramos a cor de fundo e a fonte:

/* Abas */
.tabs-content {
  background: #eee;
  font-family: sans-serif;
}

O menu das abas:

/* Menu das abas */
.tabs-menu {
  background: #0074a2;
}
.tabs-menu ul {
   list-style: none;
}
.tabs-menu ul li {
  float: left;
}
.tabs-menu ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
  background: #eee;
  color: #000;
}

Este é um menu como qualquer outro. A classe active-tab-menu será ativada pelo jQuery.

Depois ocultamos todas as abas e mostramos apenas a principal:

/* Conteúdo das abas */
.tabs {
  display: none;
  padding: 30px;
}
.first-tab {
  display: block;
}

 O jQuery:

O jQuery faz o seguinte (veja nos comentários):

// Inicia o jQuery
jQuery(function($){
  
  // Captura o clique no link do menu das abas
  $('.tabs-menu ul li a').click(function(){
    
    /** Variáveis **/
    
    // Configura o link clicado
    var a = $(this);
    
    // A classe da aba ativa
    var active_tab_class = 'active-tab-menu';
    
    // Captura o atributo data-tab e gera uma classe
    var the_tab = '.' + a.attr('data-tab');
    
    // Remove a classe de aba ativa de todas as abas
    $('.tabs-menu ul li a').removeClass(active_tab_class);
    
    // Adiciona a classe de aba ativa apenas no link clicado
    a.addClass(active_tab_class);
    
    // Adiciona um CSS para ocultar todas as abas
    $('.tabs-content .tabs').css({
      'display' : 'none'
    });
    
    // Mostra apenas a aba que queremos
    $(the_tab).show();
    
    // Não deixa o navegador atualizar a página
    return false;
  });
});

Veja uma demonstração aqui.

Em caso de dúvidas, basta perguntar.

Ordenar tabelas sem atualizar a página nunca foi tão fácil assim. Com o plugin Tablesorter, do jQuery, com apenas uma linha de código – literalmente – você ativa a ordenação para qualquer tabela que precisar em seu HTML. Além disso, ele também vem com temas prontos, preparados para mostrar os dados de maneira agradável ao usuário.

O Tablesorter funciona de maneira similar ao que encontramos em milhares de programas por aí, clique no cabeçalho, tabela ordenada. Por isso, você precisa criar o cabeçalho para a tabela, para que seja possível realizar a ordenação dos dados. Os dados são ordenados de maneira crescente ou decrescente. Ao clicar no cabeçalho de uma coluna e uma seta é apresentada indicando se está em ordem crescente ou decrescente.

Outro ponto interessante é que você também pode adicionar suas próprias funções para ordenação de valores de maneira mais precisa. Por exemplo: se você é desenvolvedor há tempos, já deve ter percebido que ordenar valores de datas no formato brasileiro (dd/mm/aaaa) é uma tristeza. Isso ocorre porque o sistema não compreende que a data 04/09/2014 é maior que 31/07/2014 (apenas um exemplo). Veja:

// Não funciona
console.log( '04/09/2014' > '31/07/2014' ); // false

// Invertendo a data funciona
console.log( '2014/09/04' > '2014/07/31' ); // true

Vou explicar como fazer tais coisas a diante no artigo

Uma tabela HTML simples

Veja uma tabela HTML simples:

<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Tablesorter - Tutsup</title>
	
	<!-- Estilos necessários para o tema do tablesorter -->
	<link rel="stylesheet" href="css/blue/style.css">
	
	<!-- jQuery e Tablesorter -->
	<script src="js/jquery-latest.js"></script>
	<script src="js/jquery.tablesorter.min.js"></script>
	
	<!-- Meu script -->
	<script src="js/scripts.js"></script>
</head>

<body>

<table class="tablesorter">
	<thead>
		<tr>
			<th>Cliente</th>
			<th>Nota</th>
			<th>Valor</th>
			<th>Total</th>
			<th>Data</th>
			<th>Classifica</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Jorge Silva</td>
			<td>1</td>
			<td>1.2</td>
			<td>2.58</td>
			<td>20/04/1987 11:54:00</td>
			<td>A</td>
		</tr>
		<tr>
			<td>Osvaldo Monteiro</td>
			<td>2</td>
			<td>1.3</td>
			<td>2.55</td>
			<td>20/05/2014 11:55:00</td>
			<td>X</td>
		</tr>
		<tr>
			<td>Alana Oliveira</td>
			<td>3</td>
			<td>1.99</td>
			<td>2.51</td>
			<td>20/06/1998 11:59:00</td>
			<td>Z</td>
		</tr>
		<tr>
			<td>Silveira</td>
			<td>432</td>
			<td>0.99</td>
			<td>9.51</td>
			<td>20/06/2020 22:59:00</td>
			<td>Y</td>
		</tr>
	</tbody>
</table>

</body>
</html>

Perceba que na tabela acima, existem 4 linhas destacadas, isso porque eu gostaria de ressaltar que as tags "thead" e "tbody" são necessárias, caso contrário o Tablesorter não funciona

Outro ponto importante é incluir os arquivos necessários para o funcionamento do plugin, são eles: jquery e jquery.tablesorter.min.js, o CSS é opcional. Todos esses arquivos estão dentro do head, conforme mostro no exemplo abaixo:

<head>
	<!-- Estilos necessários para o tema do tablesorter -->
	<link rel="stylesheet" href="css/blue/style.css">
	
	<!-- jQuery e Tablesorter -->
	<script src="js/jquery-latest.js"></script>
	<script src="js/jquery.tablesorter.min.js"></script>
	
	<!-- Meu script -->
	<script src="js/scripts.js"></script>
</head>

Isso é o que fará o tablesorter funcionar.

O jQuery

No jQuery você só precisa fazer o seguinte:

$(function(){
	$('.tablesorter').tablesorter();
});

Isso iniciará o tablesorter na tabela com classe .tablesorter.

Datas no formato dd/mm/aaaa

Para criar um parser para a data no formato dd/mm/aaaa, basta fazer o seguinte:

// Parser para configurar a data para o formato do Brasil
$.tablesorter.addParser({
	id: 'datetime',
	is: function(s) {
		return false; 
	},
	format: function(s,table) {
		s = s.replace(/-/g,"/");
		s = s.replace(/(d{1,2})[/-](d{1,2})[/-](d{4})/, "$3/$2/$1");
		return $.tablesorter.formatFloat(new Date(s).getTime());
	},
	type: 'numeric'
});

E adicionar a opção no número da coluna desejado (começando do zero):

$('.tablesorter').tablesorter({
	// Envia os cabeçalhos 
	headers: { 
		// A segunda coluna (começa do zero) 
		1: { 
			// Desativa a ordenação para essa coluna 
			sorter: false 
		},
		4: {
			// Ativa o parser de data na coluna 4 (começa do 0)
			sorter: 'datetime' 
		}
	},
	dateFormat: 'dd/mm/yyyy'
});

Veja o código completo:

$(function(){
	// Parser para configurar a data para o formato do Brasil
	$.tablesorter.addParser({
		id: 'datetime',
		is: function(s) {
			return false; 
		},
		format: function(s,table) {
			s = s.replace(/-/g,"/");
			s = s.replace(/(d{1,2})[/-](d{1,2})[/-](d{4})/, "$3/$2/$1");
			return $.tablesorter.formatFloat(new Date(s).getTime());
		},
		type: 'numeric'
	});

	$('.tablesorter').tablesorter({
        // Envia os cabeçalhos 
        headers: { 
            // A sgunda coluna (começa do zero) 
            1: { 
                // Desativa a ordenação para essa coluna 
                sorter: false 
            },
			4: {
                // Ativa o parser de data na coluna 4 (começa do 0) 
                sorter: 'datetime' 
			}
        },
		// Formato de data
		dateFormat: 'dd/mm/yyyy'
	});
});

Demonstração do tablesorter

Caso queira visualizar uma demonstração da utilização do tablesorter, acesse o link abaixo:

Muito legal!

Download do código

Caso queira baixar o código gerado nesse tutorial, acesse:

Mais detalhes

Caso queira mais detalhes sobre o tablesorter, basta acessar o site oficial:

No site existem mais exemplos e informações.

Atualmente, enviar formulários com Ajax, PHP e jQuery é moda entre desenvolvedores experientes e novatos, e não é por menos, além de economizar um novo carregamento de página, o usuário não perde o que já foi digitado no formulário, o que acontecia com os bons e velhos formulários em HTML e PHP.

Os prós de você aprender a tática que vou detalhar neste tutorial são:

  • Economia de recursos do servidor: Não é preciso um novo carregamento de página para enviar o formulário;
  • O usuário não perde o que foi digitado no formulário: Como não temos um novo carregamento de página, os dados que o usuário digitou permanecem no formulário;
  • Caso ocorra um erro de validação, apenas uma pequena parte da página é atualizada (para mostrar o erro ao usuário);
  • O código PHP morre ( exit ) assim que um erro de validação ocorrer;

Os contras são:

  • Você precisa saber o que fazer depois que o formulário for enviado;
  • Você deve tomar cuidado para o formulário não ser enviado milhares de vezes (cada clique no botão de submit gera um novo envio);
  • Você deve manipular os erros manualmente (caso contrário o usuário não vai saber o que está acontecendo por baixo dos panos).

Além disso, antes de continuar lendo este tutorial, saiba que vamos utilizar jQuery e o recurso que a biblioteca nos oferece sobre a utilização do Ajax. Se você quiser utilizar o Ajax nativo do JavaScript, veja nosso outro tutorial:

Então vamos lá!

A proposta

Para este tutorial, vamos simular a criação de um perfil de usuário bem simples.

Os campos do formulário serão:

  • Nome
  • Sobrenome
  • Sexo
  • Idade
  • Foto

Você pode adicionar mais campos se precisar, vou explicar como isso funciona no decorrer do tutorial.

A base de dados MySQL

Para salvar os dados dos nossos "clientes", vamos utilizar uma base de dados MySQL. No PHP vamos utilizar PDO para fazer a conexão com a base de dados e manipulação da base de dados.

O nome da base de dados será "clientes" e nossa tabela vai se chamar "dados_clientes".

Criação de base de dados e PDO fogem ao escopo do nosso tutorial, portanto, caso tenha dificuldades com esses assuntos, leia os artigos abaixo:

Nossa tabela terá os seguintes dados:

CREATE TABLE `clientes`.`dados_clientes` (
  `cliente_id` INT (11) NOT NULL AUTO_INCREMENT,
  `cliente_nome` VARCHAR (255),
  `cliente_sobrenome` VARCHAR (255),
  `cliente_idade` VARCHAR (255),
  `cliente_sexo` ENUM ('Masculino', 'Feminino', 'Outro'),
  `cliente_foto` VARCHAR (255),
  PRIMARY KEY (`cliente_id`)
) CHARSET = utf8 ;

Vamos utilizar charset UTF8, fique atento a este detalhe, caso contrário terá erros de codificação.

O formulário HTML

Nosso formulário irá utilizar os benefícios do HTML5, se você ainda não viu, recentemente escrevi um tutorial detalhando os novos recursos do HTML5 em formulários, veja no link abaixo:

Nosso formulário completo ficou assim:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Formulário HTML5 - Tutsup</title>
</head>
<body>

<form class="form_clientes" action="php/envia_clientes.php" method="post" enctype="multipart/form-data">

	<label for="cliente_nome"> Nome: </label> <br>
	<input type="text" class="cliente_nome" id="cliente_nome" name="cliente_nome" required> <br><br>
	
	<label for="cliente_sobrenome"> Sobrenome: </label> <br>
	<input type="text" class="cliente_sobrenome" id="cliente_sobrenome" name="cliente_sobrenome" required> <br><br>
	
	<label for="cliente_idade"> Idade: </label> <br>
	<input type="number" class="cliente_idade" id="cliente_idade" name="cliente_idade" required> <br><br>
	
	<label for="cliente_sexo"> Sexo: </label> <br>
	<select class="cliente_sexo" id="cliente_sexo" name="cliente_sexo" required>
		<option value=""></option>
		<option value="Masculino">Masculino</option>
		<option value="Feminino">Feminino</option>
		<option value="Outro">Outro</option>
	</select>
	<br><br>
	
	<label for="cliente_foto"> Nome: </label> <br>
	<input type="file" class="cliente_foto" id="cliente_foto" name="cliente_foto" required> <br><br>
	
	<input type="submit" value="Enviar">
	
</form>

</body>
</html>

É um formulário bem básico, porém, utilizamos todos os padrões necessários.

O PHP

Nossos arquivos de PHP deverão estar em uma pasta chamada php. Crie esta pasta e inclua os arquivos indicados nela.

pdo.php

O primeiro arquivo que vamos criar é o de conexão com a base de dados (PDO), veja:

<?php
/* Variáveis PDO */
$base_dados = 'clientes';
$usuario_bd = 'root';
$senha_bd   = '';
$host_db    = 'localhost';
$charset_db = 'utf8';
$conexao_pdo = null;
 
/* Concatenação das variáveis para detalhes da classe PDO */
$detalhes_pdo  = 'mysql:host=' . $host_db;
$detalhes_pdo .= ';dbname='. $base_dados;
$detalhes_pdo .= ';charset='. $charset_db;
 
// Tenta conectar
try {
    // Cria a conexão PDO com a base de dados
    $conexao_pdo = new PDO($detalhes_pdo, $usuario_bd, $senha_bd);
} catch (PDOException $e) {
    // Se der algo errado, mostra o erro PDO
    print "Erro: " . $e->getMessage() . "<br/>";
    
    // Mata o script
    die();
}
?>

Lembre-se que isso já foi detalhado na aula: PDO em PHP.

envia_clientes.php

Nosso arquivo que vai enviar os dados para a base de dados MySQL é o envia_clientes.php, vamos validar os dados enviados passo a passo para você entender.

Nossa verificação será feita ao contrário, ou seja, ao invés de verificar se algo está correto, vamos verificar se algo NÃO está correto. Caso algo não passe na validação, matamos o script PHP com exit.

A primeira verificação é para saber se os dados foram enviados.

// Se não postar nada
if ( ! isset( $_POST ) || empty( $_POST ) ) {
	
	// Mensagem para o usuário
	echo 'Nada a publicar!';
	
	// Mata o script
	exit;
}

Em nossa segunda verificação, vamos ver se existe algum campo em branco.

// Verifica campos em branco
foreach ( $_POST as $chave => $valor ) {
	// Cria as variáveis dinamicamente
	$$chave = $valor;
	
	// Verifica campos em branco
	if ( empty( $valor ) ) {
		// Mensagem para o usuário
		echo 'Existem campos em branco.';
		
		// Mata o script
		exit;
	}
}

Agora vamos verificar se todas as variáveis que precisamos estão definidas:

// Verifica se todas as variáveis estão definidas
if (  
	   ! isset( $cliente_nome      )  
	|| ! isset( $cliente_sobrenome ) 
	|| ! isset( $cliente_idade     )
	|| ! isset( $cliente_sexo      )
) {
	// Mensagem para o usuário
	echo 'Existem variáveis não definidas.';

	// Mata o script
	exit;
}

Agora vamos enviar a imagem para uma pasta chamada imagens. Não vou validar a imagem nem entrar em detalhes sobre o envio, isso fica para uma próxima aula. Mesmo assim, segue o código:

// A imagem
$imagem = isset( $_FILES['cliente_foto'] ) ? $_FILES['cliente_foto'] : null;

// Verifica se existe imagem
if ( empty( $imagem ) ) {
	// Mensagem para o usuário
	echo 'Envie sua foto.';
	
	// Mata o script
	exit;
}

// Dados da imagem
$imagem_tmp   = $imagem['tmp_name'];
$nome_imagem  = $imagem['name'];
$diretorio    = '../imagens/';
$envia_imagem = $diretorio . $nome_imagem;

// Envia a foto
if ( ! move_uploaded_file( $imagem_tmp , $envia_imagem ) ) {
	// Mensagem para o usuário
	echo 'Erro ao enviar foto.';
	
	// Mata o script
	exit;
}

Agora podemos incluir nosso arquivo de conexão PDO:

// Inclui o arquivo de conexão
include('pdo.php');

E enviar os dados para a base de dados:

// Prepara o envio
$prepara = $conexao_pdo->prepare("
	INSERT INTO `clientes`.`dados_clientes` (
		`cliente_nome`,
		`cliente_sobrenome`,
		`cliente_idade`,
		`cliente_sexo`,
		`cliente_foto`
	) 
	VALUES
	( ?, ?, ?, ?, ? )
");

// Envia
$verifica = $prepara->execute(
	array(
		$cliente_nome,
		$cliente_sobrenome,
		$cliente_idade,
		$cliente_sexo,
		$envia_imagem
	)
);

Para verificar se os dados foram incluídos com sucesso, simplesmente faça:

if ( $verifica ) {
	echo 'OK';
	
	// Mata o script
	exit;
} else {
	echo 'Erro ao enviar dados.';
	
	// Mata o script
	exit;
}

Pronto, a parte mais complicada passou, agora vamos ver o Ajax e jQuery.

jQuery / Ajax

Agora vamos melhorar um pouco nosso formulário com jQuery e Ajax.

A primeira coisa a fazer, é baixar o jQuery e adicionar o script em nosso HTML. Faça o download em:

Vamos utilizar a versão 1.11.1.

Incluindo os arquivos .js no HTML

Além do jQuery, vamos criar nosso próprio script, chamado scripts.js. Tanto o arquivo jquery-1.11.1.min.js quanto scripts.js estarão em uma pasta chamada js.

Depois de colocar todos os arquivos na pasta js, inclua o seguinte no cabeçalho do seu HTML (entre <head> e </head>).

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/scripts.js"></script>

Capturando o submit do formulário

Agora vamos escrever todo o nosso código dentro do arquivo scripts.js. Para capturar e anular o submit do formulário, faça o seguinte:

// Inicia o jQuery
$(function(){
	$('.form_clientes').submit(function(){
		
		// O restante virá aqui
		
		// Anula o envio convencional
		return false;
	});
});

Perceba que agora podemos manipular todos os dados do formulário, e enviar com Ajax, já que agora a página não será mais atualizada.

Para nosso exemplo, vamos fazer milhares de verificações (todas testadas por mim), veja abaixo:

// Inicia o jQuery
$(function(){

	// Cria uma variável que vamos utilizar para verificar se o
	// formulário está sendo enviado
	var enviando_formulario = false;
	
	// Captura o evento de submit do formulário
	$('.form_clientes').submit(function(){
		
		// O objeto do formulário
		var obj = this;
		
		// O objeto jQuery do formulário
		var form = $(obj);
		
		// O botão de submit
		var submit_btn = $('.form_clientes :submit');
		
		// O valor do botão de submit
		var submit_btn_text = submit_btn.val();

		// Dados do formulário
		var dados = new FormData(obj);
		
		// Retorna o botão de submit ao seu estado natural
		function volta_submit() {
			// Remove o atributo desabilitado
			submit_btn.removeAttr('disabled');
			
			// Retorna o texto padrão do botão
			submit_btn.val(submit_btn_text);
			
			// Retorna o valor original (não estamos mais enviando)
			enviando_formulario = false;
		}
		
		// Não envia o formulário se já tiver algum envio
		if ( ! enviando_formulario  ) {		
		
			// Envia os dados com Ajax
			$.ajax({
				// Antes do envio
				beforeSend: function() {
					// Configura a variável enviando
					enviando_formulario = true;
					
					// Adiciona o atributo desabilitado no botão
					submit_btn.attr('disabled', true);
					
					// Modifica o texto do botão
					submit_btn.val('Enviando...');
					
					// Remove o erro (se existir)
					$('.error').remove();
				}, 
				
				// Captura a URL de envio do form
				url: form.attr('action'),
				
				// Captura o método de envio do form
				type: form.attr('method'),
				
				// Os dados do form
				data: dados,
				
				// Não processa os dados
				processData: false,
				
				// Não faz cache
				cache: false,
				
				// Não checa o tipo de conteúdo
				contentType: false,
				
				// Se enviado com sucesso
				success: function( data ) {	
					volta_submit();
					
					// Se os dados forem enviados com sucesso
					if ( data == 'OK' ) {
						// Os dados foram enviados
						// Aqui você pode fazer o que quiser
						alert('Dados enviados com sucesso');
					} else {
						// Se não, apresenta o erro perto do botão de envio
						submit_btn.before('<p class="error">' + data + '</p>');
					}
				},
				// Se der algum problema
				error: function (request, status, error) {
					// Volta o botão de submit
					volta_submit();
					
					// E alerta o erro
					alert(request.responseText);
				}
			});
		}
		
		// Anula o envio convencional
		return false;
		
	});
});

Minha maior preocupação é o cliente enviar o formulário mais de uma vez quando o servidor estiver lento, por isso, tivemos tantas verificações.

Vídeo tutorial

Eu já criei um vídeo tutorial detalhando como enviar formulário com jQuery e Ajax, porém, era um pouco diferente, pois, enviamos apenas texto. Neste caso, ao invés de utilizarmos "FormData", utilizamos serialize (bem mais simples).

Mesmo assim, assista ao vídeo abaixo, pode tirar algumas dúvidas que você venha a ter.

Espero que ajude.

Download

Caso queira baixar o formulário criado nessa aula (com base de dados e tudo mais), basta clicar no link abaixo:

Você precisará importar a base de dados para seu servidor MySQL.

Concluindo

Este tutorial detalha bastante tudo o que costumo utilizar quando envio formulários com Ajax, porém, o lado do PHP ainda faltam algumas validações, como a validação da imagem, por exemplo.

Ainda vamos escrever muitos tutoriais para que você entenda melhor o processo, porém, se tiver dúvidas é só perguntar.

Provavelmente você já deve ter visto o efeito fly-in que é executado no scroll (rolar) da página. Normalmente ele vem misturado com efeitos de parallax, já que o conceito de rolagem de página é bem parecido.

Fly-in consiste em mostrar elementos abaixo da dobra como se eles estivessem entrando na página de maneira bem agradável.

Para este tutorial, vamos utilizar CSS3 e jQuery.

Então vamos lá?

Demonstração

Veja uma demonstração do que vamos criar nesse tutorial:

O HTML

Seu HTML pode ter qualquer estrutura que preferir, porém, os elementos que vão receber o efeito deverão ter a classe que vai gerenciar tudo.

Para nosso exemplo, vamos utilizar a classe "fly".

Veja um exemplo de código HTML que vamos utilizar para este tutorial:

<div class="content clearfix">
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
</div>

<div class="full-block fly">

</div>

<div class="content clearfix">
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
</div>

<div class="full-block fly">

</div>

<div class="content clearfix">
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
</div>

O trecho é extenso, mas não se assuste, são simplesmente DIVs repetidos com a mesma classe. O mais importante aqui é que os elementos que tiverem o efeito tenham a classe "fly".

O CSS

Você pode estilizar seus elementos da maneira que preferir, porém, a classe fly deverá conter o seguinte:

.fly {
	opacity: 0;
	transition: all 600ms ease-in-out;
	transform:translateY(100px) scale(1.05) translate3d(0, 0, 0);  
}

Também precisamos de outra classe que vai remover a transformação que a classe "fly" fará em nossos elementos. Nesse caso, utilizei uma classe chamada "show-block". Veja:

.show-block {
	opacity: 1;
	transform:translateY(0) scale(1) translate3d(0, 0, 0);
}

Ao final do artigo, vou deixar um link para você baixar o exemplo que criei, assim você pode analisar melhor o código.

O jQuery

O jQuery vai detectar o viewport, ou seja, vai verificar se o que o usuário está vendo, está (ou não) na tela.

Veja:

// Um timer para receber o Timeout do efeito
var timer = 0;

// A função que vai detectar o viewport
function recheck() {
	// Distância do ponto de rolagem até o topo da página
	var window_top = $(this).scrollTop();
	
	// Altura do viewport
	var window_height = $(this).height();
	
	// Início do viewport
	var view_port_s = window_top;
	
	// Fim do viewport
	var view_port_e = window_top + window_height;

	// Se tiver um timer, anula o mesmo
	if ( timer ) {
		clearTimeout( timer );
	}
	
	// Detecta todos os elementos com a classe .fly
	$('.fly').each(function(){
		// O objeto
		var block = $(this);
		
		// A distância do objeto do topo da página
		var block_top = block.offset().top;
		
		// A altura do objeto
		var block_height = block.height();

		// Se estiver dentro do view port ou antes
		if ( block_top < view_port_e ) {
			timer = setTimeout(function(){
				block.addClass('show-block');
			},100);       
		} else {
			timer = setTimeout(function(){
				block.removeClass('show-block');
			},100);          
		}
	});
}

// Inicia o jQuery
$(function(){
	// Cria o efeito no scroll
	$(window).scroll(function(){
		recheck();
	});
	
	// Cria o efeito quando a janela é redimensionada
	$(window).resize(function(){
		recheck();   
	});

	Cria o efeito quando a página é carregada
	recheck();
});

O jQuery acima simplesmente adiciona a classe "show-block" nos elementos que estão no viewport ou acima dele, e remove a mesma classe quando os elementos não estão aparecendo na tela.

Download

Caso queira baixar o demo que criamos nessa página, utilize o link abaixo:

Caso queira continuar o projeto, ou modificar qualquer coisa, faça-o pelo Codepen.

Concluindo

Caso tenha uma solução melhor, basta deixar nos comentários. Vamos compartilhar nosso conhecimento!

Inputs de autocomplete são sempre úteis na área de desenvolvimento, principalmente quando utilizamos Ajax para buscar dados em um servidor remoto sem atualizar a página.

Nesse tutorial, vou detalhar como utilizar a função autocomplete do jQuery UI para buscar dados na base de dados utilizando quantos parâmetros forem necessários.

Download necessário

Antes de iniciar, é necessário baixar o jQuery UI.

Faça isso no link abaixo:

Após descompactar a pasta do jQuery UI, também é necessário linkar o JavaScript e CSS do jQuery e jQuery UI no seu HTML. Isso pode ser feito da seguinte maneira:

<!doctype html>
<html>
<head>
	<title>Autocomplete - Tutsup</title>
	
	<meta charset="UTF-8">
	
	<!-- CSS do jQuery -->
	<link rel="stylesheet" href="pasta_jquery_ui/jquery-ui.css">
	
	<!-- JS do jQuery -->
	<script src="pasta_jquery_ui/external/jquery/jquery.js"></script>
	
	<!-- JS do jQuery UI -->
	<script src="pasta_jquery_ui/jquery-ui.js"></script>
</head>
<body>
	<!-- Conteúdo do Body -->
</body>
</html>

Os comentários HTML acima detalham onde os links foram inseridos.

A partir daqui, vamos trabalhar apenas dentro do <body>.

O HTML

Primeiramente, vamos criar um input padrão:

<input data-categoria="Suporte" data-fonte="Página inicial" name="cliente" class="cliente"> 

Estou criando apenas o input, mas você pode adicionar um formulário completo se preferir.

Nesse input existem alguns atributos personalizados, neles você pode adicionar o que quiser. Além disso, se precisar de mais parâmetros, basta incluir; caso contrário, basta removê-los.

Outro ponto interessante desse tutorial é que você pode utilizar quantos inputs desejar, 1, 100, 1000, você quem manda…

O jQuery UI (JavaScript)

Agora vamos adicionar o recurso de busca logo abaixo do input:

<script>
// URL para a busca
var busca_url = 'busca.php';

// Função de busca
var busca_funcao = function( request, response ) {
	$.ajax({
		url: busca_url,
		type: 'GET',
		dataType: "json",
		data: {
			// Parâmetro direto
			cliente: request.term,
			
			// Capturando parâmetro do input
			categoria: this.element.attr('data-categoria'),
			
			// Capturando outro parâmetro do input
			fonte: this.element.attr('data-fonte')
		},	
		success: function(data) {
			response(data);
		}	
	});
}

$( ".cliente" ).autocomplete({
	source: busca_funcao, 
	minLength: 1,
	select: function( event, ui ) {
		// Quando for selecionado, faça:
		alert( ui.item.nome_cliente );
	}
});
</script>

Se você adicionar ou remover algum atributo do input, lembre-se de adicionar/remover do código do jQuery UI.

Por exemplo, para o atributo "data-categoria", a linha a ser removida é:

categoria: this.element.attr('data-categoria'),

E assim por diante.

O PHP

Para o PHP, vou criar um trecho de código que gera as variáveis de acordo com os parâmetros enviados. Você poderá fazer o que precisar com elas:

<?php
// Verifica se tem algum parâmetro
if ( ! isset( $_GET ) || empty( $_GET ) || ! is_array( $_GET ) ) {
	exit();
}

// Extrai as variáveis de $_GET
extract( $_GET );

// Variáveis disponíveis
//echo $cliente;
//echo $categoria;
//echo $fonte;

// Abaixo vou apenas exibir valores de qualquer maneira para exemplificar
// Mas você pode fazer o que quiser com os parâmetros acima

// Valores fictícios
$clientes = array(
	array(
		'value' => 'Maria José',
		'sobrenome' => 'Silva',
		'nome_cliente' => 'Maria José Silva',
	),
	array(
		'value' => 'João José',
		'sobrenome' => 'Silveira',
		'nome_cliente' => 'João José Silveira',
	),
	array(
		'value' => 'Ana Maria',
		'sobrenome' => 'Miranda',
		'nome_cliente' => 'Ana Maria Miranda',
	),
);

// Deve-se retornar dados no formato jSON
echo json_encode( $clientes );

Você pode fazer o que preferir com elas, porém, ao final é necessário retornar os valores no formato jSON.

Download do script completo

Se quiser baixar o script completo criado neste tutorial, utilize o link abaixo:

Você deve extraí-lo em um servidor que tenha PHP.

Concluindo

Este é um recurso muito útil em vários casos, e o melhor da história, é que não é nada complicado fazer a configuração.

Deixe a gente saber o que você achou nos comentários abaixo.

Caso tenha dúvidas, basta perguntar.

Provavelmente você já deve ter visto o efeito parallax em alguma mídia perto de você, seja em um jogo, um vídeo, um site, ou qualquer outro local. Ele consiste em dar profundidade em elementos que estão parados adicionando movimento em diferentes velocidades de acordo com a distância desejada para determinado elemento (Veja Paralaxe astronômica).

Um exemplo interessante é que você pode visualizar este efeito até mesmo na vida real simplesmente caminhando ou andando em um veículo qualquer.

Quando qualquer coisa se move na sua frente, principalmente quando seu campo de profundidade é maior (como andar na calçada na beira do mar, por exemplo) você pode observar que à medida que avança os objetos ao seu lado se movem em velocidades diferentes; do objeto mais ao fundo, que se move mais lentamente, para o objeto mais próximo, cada vez mais depressa.

Exemplo em vídeo

Abaixo você pode visualizar um exemplo do efeito parallax em vídeo:

Criar um layout com o efeito parallax é basicamente isso, fazer com que elementos se movam em velocidades diferentes de acordo a distância desejada.

Neste tutorial, você vai aprender a fazer exatamente isso com os elementos de sua página.

Exemplo e download

Para este tutorial, vamos utilizar HTML, CSS e jQuery (JavaScript) para criar um efeito parallax bem simples, mas que vai lhe dar ideias para seus próximos layouts.

Demo

Você pode visualizar um exemplo do que vamos criar no link abaixo:

Download

Você também pode fazer o download do que viu acima no link abaixo:

A ideia

Existem vários métodos para criar o efeito parallax, também existem vários modelos desse efeito, porém, em específico para nosso tutorial, vamos criar o efeito na rolagem da página, seja para cima ou para baixo.

Vamos utilizar duas opções do CSS para atingir o objetivo, background-position e a opção de posição bottom do elemento, ambas as opções serão manipuladas pelo jQuery.

A opção background-position será aplicada a um elemento maior que vai estar no fundo, ou seja, um background que vai rolar ao contrário da página. À medida que a página rola para baixo, a posição do background irá rolar a imagem para cima.

A opção bottom será aplicada a elementos menores, mas dará o mesmo efeito descrito anteriormente, enquanto a página rola para baixo, a posição bottom do elemento será incrementada, fazendo com que ele role para cima.

A diferença aqui é que os elementos menores terão a velocidade bem mais elevada do que o fundo.

O HTML

Para nosso HTML, teremos o seguinte:

<div class="parallax div1" data-divisor="2">
    <div class="text">Olha o primeiro gatinho!!!</div>
</div>

Muito simples, não?

O DIV com classe parallax é o principal elemento aqui, nele teremos que ter mais uma classe e uma opção chamada de data-divisor.

Veja detalhes de cada classe e o atributo data-divisor:

  • parallax – A classe principal, onde teremos a configuração geral dos elementos que terão o efeito no fundo.
  • div1 – Essa pode ser qualquer classe que preferir, porém, ela deve existir para que você selecione um único background para cada elemento;
  • data-divisor – Esse atributo será utilizado como divisor para o jQuery, quando maior o número, mais lento o background irá rolar.

O DIV com classe text, é o texto ou elemento que você deseja que role mais rápido que o fundo, ela não é necessária se você não quiser.

Além disso, se você quiser, pode adicionar outros elementos após a primeira DIV, e assim, intercalar texto ou qualquer outra coisa que preferir no meio das sessões do seu efeito parallax.

O HTML completo

Como descrevi anteriormente, aquele trecho era apenas explicativo, já que com apenas uma sessão não haveria rolagem da página.

Para meu exemplo, criei seis sessões, das quais você pode ver o código completo abaixo:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Efeito Parallax - Tutsup</title>
		
		<link rel="stylesheet" href="css/style.css">
		<script src="js/jquery.js"></script>
		<script src="js/scripts.js"></script>
	</head>

	<body>
		<div class="parallax div1" data-divisor="2">
			<div class="text">Olha o primeiro gatinho!!!</div>
		</div>
		
		<div class="qualquer_coisa">
			Um texto qualquer com qualquer tag HTML.			
		</div>
		
		<div class="parallax div2" data-divisor="4">
			<div class="text">Olha o segundo gatinho!!!</div>
		</div>
		
		<div class="qualquer_coisa">
			Um texto qualquer com qualquer tag HTML.			
		</div>
		
		<div class="parallax div3" data-divisor="3">
			
			<div class="text">Olha o terceiro gatinho!!!</div>
		</div>
		
		<div class="qualquer_coisa">
			Um texto qualquer com qualquer tag HTML.			
		</div>
		
		<div class="parallax div4">
			
			<div class="text">Olha o quarto gatinho!!!</div>
		</div>
		
		<div class="qualquer_coisa">
			Um texto qualquer com qualquer tag HTML.			
		</div>
		
		<div class="parallax div5" data-divisor="2">
			<div class="text">Olha o quinto gatinho!!!</div>
		</div>
		
		<div class="qualquer_coisa">
			Um texto qualquer com qualquer tag HTML.			
		</div>
		
		<div class="parallax div6">
			<div class="text">Olha o sexto gatinho!!!</div>
		</div>

	</body>
</html>

Estou intercalando outro DIV com classe qualquer_coisa. Esse DIV pode receber literalmente qualquer coisa que preferir – pode até ser removido, se não for de seu interesse.

O CSS

Agora a coisa começa a ficar interessante.

Primeiramente, faço um reset no CSS (faça como preferir):

* {
	margin: 0;
	padding: 0;
}
body,
html {
	height:100%;
	font-family:sans-serif;
	line-height:1.5;
}

A segunda parte, configura o texto (.text) em si:

/* Configura os textos */
.text {
	color: #fff;
	font-size: 40px;
	text-shadow: 2px 2px 0 #000;
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	padding: 20px;
	line-height: 1.5;
	width: 200px;
	bottom: 100px;
	left: 10%;
}

Para a classe parallax, temos o seguinte:

.parallax{
	width: 100%;
	height: 100%;
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 0;
	position: relative;
}

O segredo aqui está na largura e altura (100% da tela), no modo que o background vai se comportar, que é fixed (fixo enquanto a tela rola) e background-size: cover; que faz com que o background sempre preencha a tela inteira.

Para colocar um background diferente para cada uma das sessões, utilizo a segunda classe do elemento, veja:

.div1 {
	background-image: url(../imagens/11.jpg);
}
.div2 {
	background-image: url(../imagens/12.jpg);
}
.div3 {
	background-image: url(../imagens/13.jpg);
}
.div4 {
	background-image: url(../imagens/14.jpg);
}
.div5 {
	background-image: url(../imagens/15.jpg);
}
.div6 {
	background-image: url(../imagens/16.jpg);
}

Por fim, configuro o DIV que vem no meio de cada sessão (.qualquer_coisa).

.qualquer_coisa {
	padding: 20px;
}
.qualquer_coisa h2, 
.qualquer_coisa p{
	padding: 20px;
	margin: 1.3 0;
}

O CSS completo

Se você é daqueles que gosta de copiar e colar, segue o CSS completo:

* {
	margin: 0;
	padding: 0;
}
body,
html {
	height:100%;
	font-family:sans-serif;
	line-height:1.5;
}

/* Configura os textos */
.text {
	color: #fff;
	font-size: 40px;
	text-shadow: 2px 2px 0 #000;
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	padding: 20px;
	line-height: 1.5;
	width: 200px;
	bottom: 100px;
	left: 10%;
}

/* Configura os elementos "parallax" */
.parallax{
	width: 100%;
	height: 100%;
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 0;
	position: relative;
}

/* Configura um background para cada elemento */
.div1 {
	background-image: url(../imagens/11.jpg);
}
.div2 {
	background-image: url(../imagens/12.jpg);
}
.div3 {
	background-image: url(../imagens/13.jpg);
}
.div4 {
	background-image: url(../imagens/14.jpg);
}
.div5 {
	background-image: url(../imagens/15.jpg);
}
.div6 {
	background-image: url(../imagens/16.jpg);
}

/* Configura o texto lorem ipsum */
.qualquer_coisa {
	padding: 20px;
}
.qualquer_coisa h2, 
.qualquer_coisa p{
	padding: 20px;
	margin: 1.3 0;
}

O jQuery

Apenas com CSS e HTML, você já consegue atingir um objetivo mais ou menos interessante (eu diria, quase um parallax), porém, o jQuery é que vai movimentar estes elementos à medida que a página é rolada.

A primeira coisa é "iniciar" o jQuery:

$(function(){
    // O código vem aqui
}); // jQuery

Dentro dessa função, vamos capturar o evento scroll da página (rolagem):

$(window).scroll(function(){
    // Captura os pixels de distância do topo
    var window_scrolltop = $(this).scrollTop();
    
    // O RESTO VEM AQUI

});

Agora precisamos capturar cada elemento que tem a classe parallax. Veja:

// Passa por cada elemento com a classe .parallax
$('.parallax').each(function(){
	// Joga o objeto $('.parallax')em uma variável
	var obj = $(this);
	
	// O RESTO VEM AQUI
});

Agora vamos fazer todo o restante dentro dessa função.

A primeira coisa que temos que fazer, é garantir que vamos trabalhar apenas com o elemento visível na tela, então:

if ( window_scrolltop >= obj.position().top - obj.height() 
	&& window_scrolltop <= obj.position().top + obj.height()) {
	// Agora temos a garantia
}

Ou seja, se (if) a distância de rolagem (window_scrolltop) for maior ou igual (>=) a distância do elemento referente ao topo (obj.position().top), menos (-) a altura do objeto (obj.height()), e se a distância de rolagem (window_scrolltop) for menor ou igual (<=) a distância do elemento referente ao topo (obj.position().top), mais (+) a altura do elemento (obj.height()).

Isso garante que só alteremos alguma propriedade do elemento quando for necessário.

Agora precisamos obter o valor do divisor, caso ele tenha sido configurado no HTML:

// O atributo data-divisor vai definir a velocidade do efeito
var divisor = typeof obj.attr('data-divisor') == 'undefined' ? 4 : obj.attr('data-divisor');

Coloquei um valor padrão (4) caso não queira configurar este atributo no HTML.

Agora precisamos da posição do background, porém, é necessário fazer um pequeno truque se ele for o primeiro objeto da lista elementos. Isso acontece, porque não é possível rolar a página acima do primeiro elemento, portanto, tive que fazer o seguinte:

// Corrige a diferença do primeiro elemento
if ( obj.is(':first-child') ) {
	var bg_pos = ( window_scrolltop - obj.position().top ) / divisor;
} else {
	var bg_pos = ( window_scrolltop - obj.position().top + ( obj.height() - 100 ) ) / divisor;
}

Ou seja, se o elemento for o primeiro, a posição do background é a distância de rolagem da janela, menos a posição do elemento referente ao topo da janela, divido pelo divisor que estivermos utilizando; caso contrário, a posição do background será a distância de rolagem da janela, menos a posição do elemento referente ao topo da janela, mais o tamanho do elemento menos cem, dividido pelo divisor.

Agora é só aplicar o CSS ao DIV com classe parallax:

// Modifica a posição do bg
obj.css({
	'background-position' : '50% -' + bg_pos + 'px'
});

Para que o texto role mais rápido, aplicamos o seguinte:

// Animação do primeiro texto
obj.children('.text').css({
	'bottom' : ( window_scrolltop - obj.position().top + 100 ) + 'px'
});

A posição inferior do elemento será incrementada pela distância de rolagem da janela, menos a posição do elemento parallax referente ao topo, mais cem.

O jQuery completo

Mais uma vez, se você é daquelas pessoas que gosta de copiar e colar, segue o código completo:

$(function(){
	$(window).scroll(function(){
		var window_scrolltop = $(this).scrollTop();
		
		// Passa por cada elemento com a classe .parallax
		$('.parallax').each(function(){
			var obj = $(this);
			
		// Garante que apenas trabalhemos no elemento que está visível na tela
		if ( window_scrolltop >= obj.position().top - obj.height() 
			&& window_scrolltop <= obj.position().top + obj.height()) {
			
			// O atributo data-divisor vai definir a velocidade do efeito
			var divisor = typeof obj.attr('data-divisor') == 'undefined' ? 4 : obj.attr('data-divisor');
			
			// Corrige a diferença do primeiro elemento
			if ( obj.is(':first-child') ) {
				var bg_pos = ( window_scrolltop - obj.position().top ) / divisor;
			} else {
				var bg_pos = ( window_scrolltop - obj.position().top + ( obj.height() - 100 ) ) / divisor;
			}
			
			// Modifica a posição do bg
			obj.css({
				'background-position' : '50% -' + bg_pos + 'px'
			});
			
			// Animação do primeiro texto
			obj.children('.text').css({
				'bottom' : ( window_scrolltop - obj.position().top + 100 ) + 'px'
			});
			
		} // Garante que apenas trabalhemos no elemento que está visível na tela
		}); // $('.parallax').each(function(){ ...
	}); // $(window).scroll(function(){ ...
}); // jQuery

É isso!

Efeito Parallax em CSS e jQuery

Esse é o efeito parallax feito de maneira bem simples. Você pode incrementar, ou fazer qualquer alteração no código para adaptar às suas necessidades.

Se encontrar algum erro ou quiser deixar alguma sugestão, basta deixar um comentário. Críticas são sempre bem vindas.

Caso queira ver novamente nosso exemplo, ou baixar o código, segue abaixo:

Demo

Download

Espero que seja de utilidade.

Provavelmente você já deve ter utilizado um site ou app que tem barras laterais para configurações e menus. Essas barras laterais tem um efeito que parece empurrar o conteúdo para fora da página enquanto a mesma desliza para dentro, revelando seu conteúdo oculto. Slidebars faz exatamente isso para você, ajuda na criação de barras laterais com aquele efeito para seu site.

Slidebars é um plugin do jQuery que cria barras laterais no estilo "Revela/Oculta", deslizando o conteúdo do site para fora da página para revelar a parte interna da barra lateral, e retornando este mesmo conteúdo para seu local de origem, escondendo a sidebar.

Slidebars - Exemplo

Funciona para seu layout responsivo e é bastante leve, já que o arquivo CSS necessário (slidebars.min.css) tem 4KB, e o JS (slidebars.min.js) 8KB. Além disso, Slidebars tenta utilizar aceleração por hardware em transições sempre que possível. Isso garante uma transição mais suave e precisa. Caso não tenha essa possibilidade, ele utiliza jQuery.animate()como fallback.

Fiz um pequeno exemplo que pode ser encontrado no link abaixo:

Faça um teste e veja se gosta do efeito.

Veja abaixo como utilizar o plugin.

Utilizando o Slidebars

1 – Primeiramente, você deve fazer o download (ou clonar o repositório) do Slidebars em seu computador local.

2 – Feito isso, você precisa pegar os arquivos de uma das versões utilizadas, de preferência a última. Os arquivos necessários são:

  • slidebars.min.css
  • slidebars.min.js

3 – Depois você deve linkar estes dois arquivos no seu documento HTML. Vale lembrar que, como o slidebars utiliza jQuery, é necessário que este esteja presente no seu projeto (sei que é óbvio, mas ficou a dica).

O cabeçalho ficaria mais ou menos assim:

<!-- CSS do Slidebars -->
<link rel="stylesheet" media="all" href="css/slidebars.min.css">

<!-- CSS do site -->
<link rel="stylesheet" media="all" href="css/style.css">

<!-- jQuery, Slidebars.js e scripts que possam ser utilizados no layout -->
<script src="js/jquery.js"></script>
<script src="js/slidebars.min.js"></script>
<script src="js/scripts.js"></script>

4 – Com isso "em mãos", você precisa fazer o load do Slidebars. Para isso, basta adicionar isso no Javascript do seu documento:

$(function(){
	$.slidebars();
});

Ou, se for adicionar em qualquer parte dos seus scripts jQuery, basta esta linha:

$.slidebars();

5 – Feito isso, você precisa mencionar quais os botões para abrir as barras laterais, por exemplo:

<!-- Menu para abrir a barra lateral da esquerda -->
<a class="sb-toggle-left" href="#">Menu da esquerda</a>
<!-- Menu para abrir a barra lateral da Direita -->
<a class="sb-toggle-right" href="#">Menu da direita</a>

As classes sb-toggle-left e sb-toggle-right, são, respectivamente, para abrir a barra lateral da esquerda, e a da direita.

6 – E criar o código das barras laterais em si:

<!-- A barra lateral da esquerda -->
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="50%">
	<ul>
		<li><a href="http://www.todoespacoonline.com/w/">Menu</a></li>
		<li><a href="http://www.todoespacoonline.com/w/">Menu</a></li>
	</ul>
</div>		

<!-- A barra lateral da direita -->
<div class="sb-slidebar sb-right sb-width-custom" data-sb-width="150px">
	<ul>
		<li><a href="http://www.todoespacoonline.com/w/">Menu</a></li>
		<li><a href="http://www.todoespacoonline.com/w/">Menu</a></li>
	</ul>
</div>

6 – Perceba as classes sb-slidebar sb-left e sb-width-custom, elas são extremamente necessárias para que Slidebars funcione perfeitamente. A primeira, sb-slidebar, indica que essa DIV é uma barra lateral que vai ser utilizada com o plugin, a segunda, sb-left, indica que é uma barra lateral na parte da esquerda, e a terceira, sb-width-custom, habilita uma opção para ativar a largura da sidebar, que pode ser configurada com o atributo data-sb-width="tamanho em pixel ou porcentagem".

7 – Um id muito importante para ser utilizado, é o sb-site, que indica o local que estará o site por completo. Isto vai fazer apenas aquela parte do site deslizar para mostrar a barra lateral. Um problema que encontrei aqui, é quando utilizamos a barra de menus com position: fixed;. Sua barra de menus não vai deslizar com a página. No entanto, isso também foi pensado no Slidebars.

Basta adicionar a classe sb-slide ao seu menu, ou qualquer elemento posicionado de maneira absoluta ou fixa.

Meu menu ficou assim:

<!-- A classe sb-slide faz o menu deslizar junto com a barra -->
<div class="menu sb-slide">
	<ul>
		<!-- Menu para abrir a barra lateral da esquerda -->
		<li><a class="sb-toggle-left" href="#">Menu da esquerda</a></li>
		<!-- Menu para abrir a barra lateral da Direita -->
		<li><a class="sb-toggle-right" href="#">Menu da direita</a></li>
	</ul>
</div>

É isso, não precisa fazer mais nada!

Download e exemplo

Como eu disse no início, fiz um exemplo que pode ser acessado no link abaixo:

Você também pode baixar este exemplo no link abaixo:

E pode até desenvolver seu layout sobre este demo, a escolha é sua. É tudo grátis.

Concluindo

Hoje em dia, estamos cheios de opções para criar layouts funcionais, bonitos e intuitivos para nossos clientes e leitores. Plugins e aplicativos que facilitam o desenvolvimento aparecem diariamente, e eles vêm para somar. As barras laterais estão sumindo cada vez mais dos layouts mais novos, a maioria dos desenvolvedores já está se acostumando com a moda dos sites sem barra lateral. Porém, se o seu site precisa dela para exibir qualquer coisa, você pode fazer algo inteligente utilizando o slidebars, ocultar a sidebar e só exibir quando o cliente quiser vê-la.

Não deixe de compartilhar suas dúvidas ou sua opinião nos comentários.

Um layout responsivo com coluna fixa tem várias vantagens para a maioria dos tamanhos de tela em que ele será exibido. Se o cliente estiver vendo seu conteúdo em um smartphone, o layout irá se adaptar àquele tamanho de tela sem redirecionar a página para outro endereço.

O mesmo acontece quando o cliente estiver em seu desktop ou tablet, ou seja, um único layout que se adapta para qualquer tamanho de monitor ou tela.

Criar um layout responsivo não é nada complicado, porém, deve-se tomar bastante cuidado, principalmente se você já tem o costume de trabalhar com layouts de largura fixa.

No layout responsivo os elementos devem ser redimensionados automaticamente para a largura do elemento que os envolve caso o usuário modifique o tamanho da tela de seu navegador, ou acesse o site em um dispositivo com tela pequena, como um smartphone, por exemplo.

Por que barra fixa?

A barra fixa tem vantagens e desvantagens. Uma das vantagens é quando o site tem que exibir conteúdo fixo na barra lateral, como é o exemplo de anúncios do Adsense. Como o conteúdo é fixo, ficaria sem lógica a sua barra lateral ser redimensionada juntamente com o conteúdo do site.

Por outro lado, uma das desvantagens da barra lateral fixa é que ela terá que seguir o fluxo do layout quando a tela for pequena demais. Com isso, seus anúncios ou o conteúdo da barra lateral irão ficar abaixo do conteúdo principal para smartphones ou tablets com a tela muito pequena.

Veja exemplos nas imagens abaixo:

320px de largura:

Layout Responsivo

980px de largura:

Layout Responsivo

Demo

Não faz sentido você seguir um tutorial sem saber exatamente o que você vai fazer, por isso, temos um exemplo do layout que vamos criar neste tutorial, segue o link abaixo:

Vou explicar como criar este modelo.

Compatibilidade

O Layout responsivo que vamos criar é completamente compatível com todos os navegadores, com exceção do IE6, já que vamos utilizar uma propriedade CSS não suportada por ele – max-width.

Compatibilidade com o IE7 ou superior e todos os outros navegadores (Chrome, Opera, Firefox, Safari, etc…).

Criando o layout responsivo

Já falamos demais, então se você ainda estiver lendo, vamos começar a criar nosso layout pelo HTML.

Vou fazendo e explicando tudo.

O HTML

Vamos criar 3 DIVs para nosso layout, uma que vai ser o "container" e outras duas que serão a coluna da esquerda e direita respectivamente.

Dentro de ambas as colunas teremos uma outra DIV apenas para criar um espaçamento entre o conteúdo e a borda da mesma (padding).

<div class="site-cols-wrapper">
	<div class="site-left-col">
		<div class="site-left-col-inner">
			Esquerda
		</div>
	</div>
	<div class="site-right-col">
		<div class="site-right-col-inner">
			Direita
		</div>
	</div>
</div>
Classe Função
Detalhamento das DIVs
site-cols-wrapper Envolver todas as DIVs e para criar a largura máxima do site.
site-left-col Coluna da esquerda.
site-left-col-inner Espaçamento interno da coluna da esquerda.
site-right-col Coluna da direita.
site-right-col-inner Espaçamento interno da coluna da direita.

Agora vamos adicionar um pouco de estilo às nossas DIVs.

O CSS

Nossa DIV principal (site-cols-wrapper) terá no máximo 1200px de largura (max-width). Nossa DIV da direita (site-right-col), que será a barra lateral, terá 360px de largura fixa (width). Nossa DIV da esquerda, que terá o conteúdo (site-left-col), ficará livre, ou seja, a largura vai variar dependendo da largura da tela do navegador. Por fim, nossas DIVs que estão dentro de cada uma das colunas (site-left-col-inner e site-right-col-inner), terão apenas um espaçamento (padding).

.site-cols-wrapper{
    max-width:1200px;
    margin:0 auto;
    font-family: sans-serif;
    font-size:18px;
    color:#555;
}
/* Coluna da esquerda */
.site-left-col{
    width:100%;
    margin-right:-360px;
    float:left;
}
.site-left-col-inner{
    padding:20px;
    margin-right:360px;
}
/* Coluna da direita */
.site-right-col{
    width:360px;
    float:right;
}
.site-right-col-inner{
    padding:20px;
}

Os truques:

  • A DIV .site-left-col tem largura de 100%, no entanto, tem margin-right:-360px;, o valor negativo irá atrair o próximo elemento para próximo dela se este for menor que 360px;
  • Para que as DIVs não fiquem uma sobre a outra, a DIV interna .site-left-col-inner corrige o problema com margin-right:360px;

Pronto, o CSS e HTML estão feitos. Neste ponto você já deve ver suas duas colunas funcionando, no entanto, quando você diminuir muito a tela do seu navegador, a coluna lateral irá sobrepor a coluna do conteúdo. Por este motivo, iremos fazê-la seguir o fluxo quando a tela estiver menor que 800px.

Vou explicar como fazer isso com jQuery, no entanto, vamos precisar de mais classes CSS para quando a tela for pequena demais, veja abaixo:

.site-left-col-resized{
	width:100%;
	margin-right:0;
	float:none;
}
.site-left-col-inner-resized{
	padding:20px;
	margin-right:0;
}
.site-right-col-resized{
	width:100%;
	float:none;
}

Isso deverá ser colocado no final do seu CSS. Vamos incluir essas classes nas DIVs quando a tela for pequena demais e removê-las quando estiver em um tamanho razoável (leia-se: 800px ou mais).

O jQuery

Vamos utilizar a função .resize() no elemento window para saber o tamanho da janela e fazer a barra lateral sumir.

function resizeSidebar() {
	var window_width = $(window).width();
	
	if ( window_width < 800 ) {
		$('.site-right-col').addClass('site-right-col-resized');
		$('.site-left-col').addClass('site-left-col-resized');
		$('.site-left-col-inner').addClass('site-left-col-inner-resized');
	} else {
		$('.site-right-col').removeClass('site-right-col-resized');
		$('.site-left-col').removeClass('site-left-col-resized');
		$('.site-left-col-inner').removeClass('site-left-col-inner-resized');
	}
}

jQuery(function(){
	resizeSidebar();
	
	$(window).resize(function(){
		resizeSidebar();
	});
});

Simplesmente isso, apenas faz com que a barra lateral siga o fluxo quando a tela for menor que 800px.

Todo o código junto

Se quiser copiar e colar, o código abaixo já vem com tudo embutido:

<!DOCTYPE html>
<html>
<head>
<title>Layout responsivo com coluna fixa (CSS, HTML e jQuery) | Demo</title>
<style>
body, 
html{
	margin:0;
	padding:0;
	height:100%;
}
* img{
	max-width:100% !important;
	height:auto !important;
}
.site-cols-wrapper{
	max-width:1200px;
	margin:0 auto;

	font-family: sans-serif;
	font-size:18px;
	color:#555;
}
/* Coluna da esquerda */
.site-left-col{
	width:100%;
	margin-right:-360px;
	float:left;
}
.site-left-col-resized{
	width:100%;
	margin-right:0;
	float:none;
}
.site-left-col-inner{
	padding:20px;
	margin-right:360px;
}
.site-left-col-inner-resized{
	padding:20px;
	margin-right:0;
}
/* Coluna da direita */
.site-right-col{
	width:360px;
	float:right;
}
.site-right-col-resized{
	width:100%;
	float:none;
}
.site-right-col-inner{
	padding:20px;
}
/* "Menu" */
.menu{
	padding:20px 0;
	text-align:center;
	width:100%;
	displau:block;
	clear:both;
	font-size:20px;
	color:#fff;
	background:#000;
}
.menu a{
	color:#fff;
	text-decoration:none;
	font-weight:700;
}
</style>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function resizeSidebar() {
	var window_width = $(window).width();
	
	if ( window_width < 800 ) {
		$('.site-right-col').addClass('site-right-col-resized');
		$('.site-left-col').addClass('site-left-col-resized');
		$('.site-left-col-inner').addClass('site-left-col-inner-resized');
	} else {
		$('.site-right-col').removeClass('site-right-col-resized');
		$('.site-left-col').removeClass('site-left-col-resized');
		$('.site-left-col-inner').removeClass('site-left-col-inner-resized');
	}
}

jQuery(function(){
	resizeSidebar();
	
	$(window).resize(function(){
		resizeSidebar();
	});
});
</script>

</head>

<body>
<div class="menu">
<a href="http://www.todoespacoonline.com/w/?p=129"> * voltar para o tutorial *</a> 
</div>
<div class="site-cols-wrapper">
	<div class="site-left-col">
		<div class="site-left-col-inner">
			Esquerda
		</div>
	</div>
	<div class="site-right-col">
		<div class="site-right-col-inner">
			Direita
		</div>
	</div>
</div>
<div class="menu">
<a href="http://www.todoespacoonline.com/w/?p=129"> * voltar para o tutorial *</a> 
</div>

</body>
</html>

Só colar em um arquivo HTML e estudar suas possibilidades.

Se for adicionar um menu e rodapé, faça isso fora da DIV principal que criamos neste tutorial, assim elas serão mantidas na mesma estrutura sempre.

Concluindo

Este layout irá funcionar em todos os navegadores, incluindo os que estão presentes em smartphones e tablets. Por fim, funciona no famoso IE (Internet Explorer 7 e posterior).

Caso tenha algum erro no código, queira aprimorar, ou tirar sua dúvida, comente, vamos partilhar nosso conhecimento com todos.