Criando um plugin jQuery – parte 3 – Otimizando
Salve salve galera!
Se vc está acompanhando essa série de posts até aqui, então estamos indo bem.
Evoluindo em cada passo. Poderíamos parar na parte 2, e deixar apenas aquilo, mas não estou contente com aquele código, pq se forem 2 inputs, tenho 2 vezes o mesmo código, mas e se forem 5 ou 10 inputs ?
Inimaginável mantermos um código assim. Legal, aprendemos a resolver o problema, então agora, vamos aprender a como melhorar nossa solução.
A primeira resposta óbvia que deveria vir a nossa mente, é: criar uma function reaproveitável !
Partindo dessa premissa, nossa function, precisa de 2 parâmetros [ pois são somente duas coisas que variam ]
function limpa( el, msg ){}
ou seja, o elemento e a mensagem. Afinal, é somente isso que muda e precisa mudar.
Fica fácil de observarmos isso, olhando a duplicação que fizemos na parte 2, para ter mais de um input.
Visto isso, chegamos no seguinte:
function limpa( el, msg ) { el.focus(function(){ if( $( this ).val()==msg ) $( this ).val( '' ); }); el.blur(function(){ if( $( this ).val() == '' ) $( this ).val( msg ); }); }
Legal, e a chamada fica apenas:
$(document).ready(function(){ limpa( $("input[name='telefone']"), 'Digite seu telefone' ); limpa( $("input[name='email']"), 'Digite seu e-mail' ); });
beeem melhor do que anteriormente, e agora para novos inputs, só precisamos chamar a função novamente, informando para quais campos ela deve agir, e qual era a mensagem default.
Só que como prometi, vamos transformar isso em um plugin, apenas pela brincadeira de fazer um.
http://docs.jquery.com/Plugins/Authoring
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> /** * @file jquery.placeholder.js * @author William Moraes - wbruno * @site http://wbruno.com.br * @version 1.0 beta */ function trim( str ){ return str.replace(/^\s+|\s+$/g,""); } jQuery.fn.limpa = function( settings ){ var $this = jQuery( this ); var defaults = { msg: $this.val(), default: 'defaultInput', active: 'activeInput' } settings = jQuery.extend(defaults, settings); $this.focus(function(){ if( $this.val()==settings.msg ) $this.removeClass( settings.default ).addClass( settings.active ).val( '' ); }); $this.blur(function(){ if( trim( $this.val() ) == '' ) $this.removeClass( settings.active ).addClass( settings.default ).val( settings.msg ); }); if( $this.val()==settings.msg ) $this.addClass( settings.default ); return $this; } $(document).ready(function(){ $("input[name='telefone']").limpa(); $("input[name='email']").limpa(); $("input[name='cep']").limpa(); }); </script> <style type="text/css"> .defaultInput { color: #b9b3d0; } .activeInput { color: #000; } </style> </head> <body> <input type="text" name="telefone" value="Digite seu telefone" /> <input type="text" name="email" value="Digite seu e-mail" /> <input type="text" name="cep" value="Digite seu cep" /> </body> </html>
Adicionei uma ‘perfumaria’ a mais, trocar a class, caso a mensagem esteja default.
Para o nosso escopo inicial, nem era necessário as configurações default ali, como a mensagem e tal, eu poderia ter usado direto:
jQuery.fn.limpa = function( settings ){ var $this = jQuery( this ); var msg = $this.val(); $this.focus(function(){ if( $this.val()==msg ) $this.val( '' ); }); $this.blur(function(){ if( $this.val() == '' ) $this.val( msg ); }); return $this; }
ai o plugin ficaria ridicularmente simples, e apenas resolveria o mesmo que a nossa function.
Se vc se perdeu na versão ‘completa’, olhe esta ultima que postei, entenda, e depois veja a outra novamente.
Bom, é isso. Acredito que consegui explicar bem oque pretendia.
Caso surjam duvidas quanto ao plugin, utilização dele, ou o motivo de eu ter usado as classes css, e deixar a mensagem default configurável, eu posso explicar depois.
Obrigado por ter acompanhando esses 3 posts. Espero que eles sejam úteis, para lhe ajudar a pensar sobre ‘como programar’, e não apenas esse código em especifico que postei.