Categoria: Jquery

Feed desta categoria: jquery

Quando o plugin encontra um elemento com erro, o elemento automaticamente ganha foco.
Mas quando o elemento está em uma aba que não está habilitada no momento, não acontece nada.

Pra que o elemento ganhe foco e a aba passe a ser a ativa, segue a função:

$('#formulario').validate({  
           ignore: "",//para validar os elementos que estão nas abas desabilitadas  
           highlight: function(element, errorClass, validClass) {  
                var div = $(element).parents('.ui-tabs-panel').attr('id');//encontra a div em que está o elemento inválido  
                var index = $('#tabs ul li a').index($('a[href="#'+div+'"]')); //encontra o indice nos links  
                $("#tabs").tabs( "option", "active", index ); //seta a aba como ativa  
           }  
      });  

 


Aprendi um negócio esquisito em jQuery hoje.
Digamos que eu precise fazer a seguinte requisição:


$.get("test.php", { name: "John", time: "2pm" } );

Até aí tudo simples. Mas digamos que o nome esteja na variável name.



var name = 'john';
var time = '2pm';


A requisição ficaria assim:


$.get("test.php", { name:name, time:time } );



Com jQuery, óbvio.


jQuery("input").keypress(function(event){
  if(event.keyCode=='13')
  {
     event.preventDefault();
  }
})


Nesse caso, está impedindo o pressionamento do Enter (keycode=13).

Caso precise descobrir o keycode das demais teclas, ao invés de procurar uma tabela poraí, é mais fácil assim:


jQuery("input").keypress(function(event){
   console.log(event.keyCode)
})



Estava mais uma vez brigando com iframes, tentando pegar a altura interna da janela.

Como já é de costume, não funcionou no ie - pegava sempre a altura do iframe sem considerar o tamanho do conteúdo.

A solução foi pegar a altura da primeira tabela (não é um layout tableless), assim:


jQuery('table:first').css('height')


Eu sempre esqueço como se utiliza a função append() do jQuery várias vezes seguidas, então lá vai:

 $('#senha')  
                .append(  
                     $('<li>').addClass('item')  
                     .append(  
                          $('<input>').attr({type:'password',name:'senha',id:'senha'})  
                     )  
                     .append(  
                          $('<label>').text('(preencha somente se quiser trocar)').addClass('obs')  
                     )  
                )  


Outra coisa,  é quando se cria um formulário de troca de senha.
Por padrão, o Chrome vai preencher o campo da senha automaticamente, mas nem sempre ele vai preencher o campo de repetir a senha.
Aí, pra não encher o saco do usuário, que teria que digitar a senha no campo de repetir-senha, a gente coloca um valor qualquer no campo de senha e no de repetir-senha:

 <input type="password" name="senha" id="senha" class="" value="$password" />  
 <input type="password" name="repetir_senha" id="repetir_senha" class="" value="$password" />  



Depois, com jQuery, a gente limpa o value desses campos. O detalhe é que não funciona se simplesmente fizer assim:

 $(document).ready(function(){  
      $('#senha,#repetir_senha').val('')  
 })  



Precisa dar um tempo após o evento ready, senão o Chrome vai perceber e o negócio não vai funcionar. Então, precisa usar o setTimeout, para dar um atraso na execução:

 $(document).ready(function(){  
      window.setTimeout("$('#senha,#repetir_senha').val('')",100);  
 })  

Temos um campo obrigatório e, ao lado dele, um checkbox que, se estiver marcado, faz com que o campo não seja obrigatório.

A regra fica assim:


 $("#form_cadastro").validate({  
           rules: {  
                senha: {  
                     minlength:8  
                },  
                repetir_senha: {  
                     equalTo: "#senha"  
                },  
                campo_obrigatorio: {  
                      required: function(element) {  
                          return $('#campo_checkbox:checked').length < 1  
                      }  
                }  
           }  
      });  

 (function( $ ){  
   $.fn.zebrar = function(options) {  
   var defaults = {  
     'par' : 'lightgrey',  
     'impar' : 'white'  
   };  
   var settings = $.extend( {}, defaults, options );  
   return this.each(function(index,elemento) {  
     if((index % 2)==0)  
     {  
       $(this).css({ background: settings.par });  
     }else{  
       $(this).css({ background: settings.impar });  
     }  
   });  
   };  
 })( jQuery );  

Utiliza assim:

 <script src="js/zebrar.js"></script>  
 <script>  
      $(function(){  
           $('ul li').zebrar();  
      )  
 </script>  
 <style>  
 ul{  
      list-style-type:none;  
      padding:0;  
      margin:0;  
 }  
 ul li{  
      display:block;  
 }  
 </style>  
 <ul>  
      <li><a href="#">Nunc tincidunt</a></li>  
      <li><a href="#">Proin dolor</a></li>  
      <li><a href="#">Aenean lacinia</a></li>  
 </ul>  

Também dá pra passar os parâmetros para as cores das linhas, assim:

 $('ul li').zebrar({par:'blue',impar:'red'});  

Nota: deixar de ser preguiçoso e usar o github pra códigos grandes.

É chato, mas às vezes é necessário.

 $('.campochato').on( "keydown contextmenu", function(event) {  
     switch(event.which){  
       case 3://botao direito  
       case 17://ctrl  
       case 86://ctrl+v  
         event.preventDefault();  
         break;  
     }  
   });  

O evento 'contextmenu' captura o clique no botão direito.