Adicionando recursos ao Jquery (Seletores)

[Jucaduca 1]

Olá galerinha do imasters, meu nome é Morais Junior sou um cearense (quase paraibano) apaixonado pela web e por esse negocio tão fascinante que é o desenvolvimento. Tive o prazer de conhecer a biblioteca Jquery logo após o lançamento do seu primeiro beta, fiquei fascinado pela forma tão simples e eficaz que ela fazia sua “mágica”, mais o que me chamou mais atenção foi a liberdade de trabalho e a fácil manipulação de suas funções, liberdade essa que ainda é pouco empregada, não sei ao certo se pela falta de conhecimento ou pela preguiça dos desenvolvedores, neste artigo irei quebrar esses dois dilemas de uma só vez, irei mostrar como adicionar recursos a biblioteca (domar a “fera”), e como fazer esses recursos trabalharem por você.

(meu pai já dizia: Quanto Menos agente trabalha mais tempo sobra para ganhar dinheiro:)

 

Iniciando a terapia

Quero que você feche os olhos (teoricamente) e imagine o blog/site de um dos seus clientes, lindo ,maravilhoso com todos aqueles artigos e noticias que ele teve muito trabalho de conseguir (copiar). Foque sua imaginação nessa listagem de noticias do painel administrativo, nela tem o titulo e uma um pequeno trecho da noticia, e no final da pagina um grande botão para adicionar novas noticias. Tudo estava bem, até que um dia você acorda as 3 da manhã com seu celular tocando, era seu cliente avisando-lhe que O SITE QUE VOCÊ DESENVOLVEU escreveu uma das noticias com erros de ortografia e a mesma precisava ser excluída o quanto antes. Neste ponto você decide adicionar um botão para que o cliente possa excluir suas noticias.

 

Assumindo o controle

Neste momento você deve estar imaginando o quanto é simples resolver esse problema, basta colocar um link com o nome excluir apontando para uma pagina que vai excluir a noticia e fazer um redirecionamento de volta para a listagem, mais lamento informar que não é tão simples assim. Para resolver um problema como esse, por mais simples que ele pareça deve se analisar todas as possibilidades, lembrando que você tem clientes que não tem o mesmo conhecimento que o seu, que não gosta das mesmas coisas que você, que agem da forma mais inesperada possível. Levando isso em conta levantei um alista de possíveis acontecimentos.

1: o cliente vai ligar, avisando-lhe que clicou no botão excluir, mais ele não sabia que o botão ia excluir a noticia.

(precisamos colocar um alerta no link, avisando que a noticia será excluída)

2: o cliente vai ligar, reclamando que sempre que ele tenta excluir a noticia aparece essa bendita mensagem.

(essa mensagem deve aparecer no primeiro item excluído, depois permitir mais algumas exclusões, e voltar a alertar)

3: o cliente vai clicar no botão e não vai esperar que seja feita uma requisição para a pagina de exclusões. E vai ligar dizendo que o site não esta excluindo a noticia

(temos que “desativar” os outros botões excluir até que seja feita a exclusão, ou podemos fazer essa exclusão utilizando do Ajax, esse sim é um momento adequado para se utilizar desta tecnologia)

4: o cliente tem memória muito curta, ele vai clicar no botão excluir e não vai lembrar disso.

(temos que avisar que a noticia foi excluída)

5: (minha lista chega até o item 38, mais como seu cliente pagou muito pouco pelo projeto paramos no item 4;)

 

Fazendo o Jquery trabalhar por você

Iniciaremos nossa jornada somente com a marcação HTML/CSS que pode ser encontrada no “exemplo0.html”, a partir dela resolveremos os quatro problemas citados no tópico anterior.

Um dos recursos do Jquery que me deixa maravilhado é o uso dos seletores, temos muitas formas de trabalhar com objetos HTML através desses seletores, como o uso dos mesmos já é bastante conhecido não vou me aprofundar no assunto ( quem sabe em um outro artigo), vou me fixar no que poucas pessoas sabem, podemos criar novos seletores, exatamente, alem das dezenas de maneiras diferente de “apontar” para um objeto HTML ainda podemos criar nossos próprios seletores, e o melhor de forma bem simples.

Para resolver nosso primeiro item temos que atribuir um alerta quando o cliente clicar nos links/botões que levem até a pagina “excluir.php” então criaremos um seletor que atue em todas as tags <a> que levem para a pagina de exclusão, o código ficaria assim:

      //costumizando seletores
      $.expr[':'].excluir = function(e)
      {       
          return ($(e).attr('href')== 'excluir.php');  //passa por todos os elementos mais só retorna os que href forem iguais a excluir.php
      };

Depois basta utilizar em qualquer função da biblioteca:

    $("a:excluir").hide();

Como na propriedade “href” dos links não esta somente a pagina e também o id da noticia a ser excluída precisamos cortar a string para validarmos somente pelo arquivo destino:

      //costumizando seletores
      $.expr[':'].excluir = function(e)
      {
          var $this = $(e);
          var url = $(e).attr('href');
          var page = url.split("?");
        
          return (page[0] == 'excluir.php');
      };

Com isso resolvemos o primeiro problema, o usuário já esta sendo avisado das conseqüências de clicar no botão excluir, e nem foi tão difícil: exemplo1.html.

 

Revendo seus conceitos

Sempre falo que existem duas maneiras de se resolver problemas como esse, uma simples e correta e outra complicada e difícil. Vimos no artigo que devemos analisar todas as possibilidades, pois estamos tratando com pessoas diferentes que agem de formas distintas. Devemos olhar para um problema de todas as formas absurdas e inimagináveis.

[William Bruno 1501]

bacana o artigo cara ! :lol: