Bootstrap v2 para a v3

Bom dia pessoal!

Ontem foi lançada a primeira RC do Bootstrap3 como vimos no post anterior e hoje vou falar sobre as principais diferenças entre o Boostrap v2 e o v3.

Se você simplesmente atualizar os arquivos do bootstrap (css e js) esteja quase certo que seu layout vai ficar bem diferente.

O principal motivo é que basicamente o v3 é incompatível com o v2 em quase todos os aspectos pois foi reescrito do zero, segundo os desenvolvedores, sendo o principal motivo ele agora ser “mobile first”, que é uma tendência cada vez mais crescente, tendo em vista que cada vez mais temos celulares e tablets acessando a internet.

“Mobile first” nada mais é que primeiro se preocupar com o layout em resoluções pequenas e depois ajustar para o desktop.

Então vamos aos pontos principais dessas mudanças.

Continue lendo

Parar propagação de evento no jQuery

Bom dia pessoal!

Aí vai uma dica rápida mas que pode ser uma dor de cabeça para muita gente.

Suponha que você fez uma tabela e cada linha ao ser clicada executa uma ação, por exemplo vai para uma tela de edição. Mas na mesma linha você colocou um botão para remover que ao ser clicado vai para outra. Exemplo:

<table id="lista" class="table table-hover table-bordered">
<thead>
    <tr>
        <th>Login</th>
        <th>Nome</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr class="linha">
        <td>leandro</td>
        <td>Leandro</td>
        <td><button class="btn-remover" data-usuario="1"><i class="icon-trash"></i></button></td>
    </tr>
</tbody>
</table>

<script>
$(document).ready(function(){
    $('.linha').on('click',function(){
        alert('editar');
    });
    $('.btn-remover').on('click',function(){
        alert('remover');
    });
</script>

Mas quando você clica no botão remover, aparece remover, mas logo em seguida também aparece o editar. Pior, quando o click apenas redireciona para outra página, você vê apenas indo para a tela de edição.

Isso porque o evento “click” é propagado para todos os objetos clicados, mesmo que um esteja sobre o outro.

Solução: stopPropagation. Basta acrescentar esta linha no primeiro objeto, no nosso caso no botão remover (Não esqueça de usar o argumento “e” na definição da função):

$('.btn-remover').on('click',function(e){
    e.stopPropagation();
    alert('remover');
});

Referência:

http://api.jquery.com/event.stopPropagation/

Até a próxima!

Fazer o “click” funcionar após uma atualização via ajax

Boa noite!

Uma dica rápida sobre um problema que muitos já passaram, inclusive eu 🙂

Você fez uma página com um botão, por exemplo:

<a class="btn btn-primary" href="#">Salvar</a>

E adicionou uma funcionalidade à ele:

$('.btn').click(function(){
    alert('Salvando');
});

Tudo funcionando perfeitamente, mas você cria uma nova página cujo conteúdo é carregado via ajax e o mesmo código acima não funciona mais.

Continue lendo

Ferramentas do dia-a-dia

Bom dia!

Hoje vou falar um pouco sobre as ferramentas que uso no meu dia-a-dia de trabalho.

São escolhas baseadas em funcionalidades e gosto pessoal. Não quero entrar em brigas de uma ferramenta ser melhor do que a outra, então vou me limitar a falar das que uso atualmente e evitar comparações ao citar outras.

Vou apenas citar e falar brevemente de cada uma e, em posts futuros, entrarei em detalhes sobre algumas.

Continue lendo