Máscara para todos telefones de São Paulo, tanto fixo como celular.

junho 4, 2013 em Html, Java, JavaScript, JQuery

Todos os telefones que necessita ser do tipo celular, que pode ter o “9″ na frente do número, você deixa com a classe “tel”, como por exemplo:

<input type=”text” value=”” class=”tel” />

Na parte do JavaScript, você deve ter o Jquery e o jquery.mask.js.

Abaixo segue o código :

$(function(){

      $('.tel').mask('(99) 9999-9999');
      $('.telCel').mask('(99) 99999-9999');

       $.fn.setCursorPosition = function(pos) {
        this.each(function(index, elem) {
          if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
          } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
          }
        });
        return this;
      };

       $(".tel").keyup(function(){
           var cel = $(this).val().substring(1, 3);
           var cel2 = $(this).val().substring(5, 6);
           var cel3 = $(this).val().substring(9, 10);
           if(cel == 11 && cel2 != '_' && cel2 == '9'  && cel3 == '-'){
               $(this).removeClass('tel');
               $(this).addClass('telCel');
               $(this).unmask();
               $(this).mask("(11) 99999-9999", [], "(11) _____-____");
               $(this).val("(11) _____-____");
               $(this).setCursorPosition(5);

           }else if(cel == 11 && cel2 != '_' && cel2 != '9'  && cel3 == '_'){
               $(this).removeClass('telCel');
               $(this).addClass('tel');
               $(this).unmask();
               $(this).mask("(99) 9999-9999", [], "(__) _____-____");
               $(this).val("(__) ____-____");
               $(this).setCursorPosition(1);
           }
       });
});

Validação, manipulação e formatação de Datas em Js

junho 3, 2013 em JavaScript, JQuery

Este site oferece uma gama de opções para que você possa fazer formações, manipulação e validação de datas.

Veja a página e seus exemplos:

 

Site: http://momentjs.com/

Removendo e adicionando Class com Jquery

maio 24, 2013 em Css, Html, JQuery

Removendo e adicionando Class com Jquery

 

Adicionando uma class nas Tags P

$(‘p’).addClass(‘oneClass’)

 

Removendo uma class nas Tags P

$(‘p’).removeClass(‘myClass yourClass’)

 

Exemplo de exclusão de 2 class e inclusão de 1 class em um único comando:

$(‘p’).removeClass(‘myClass noClass’).addClass(‘yourClass’);

 

Este exemplo remove o nome da classe do penúltimo <li> do último <li> .

$(‘li:last’).removeClass(function(){

return $(this).prev().attr(‘class’);

});

Funcionalidade Attr e removeAttr para manipulação html via Jquery

maio 24, 2013 em Html, JQuery

Funcionalidade Attr e removeAttr para manipulação html via Jquery
Abaixo segue exemplos da Attr e removeattr:
jQuery.Attr
Descrevendo um título para a imagem
$("img").attr('title','titulo teste');
Adicionando no attr com (N) Atributos
$("img").attr({
src: 'folder/imagem.jpg',
title:'titulo teste',
border: '1'
});
Coletando o título da da imagem
var title = $("img").attr('title');


jQuery.removeAttr
Removendo o atributo "titulo" da imagem
$("img").removeattr('title');


Referência: http://www.johnmarques.com.br/jquery/jquery-attr-e-removeattr-manipulando-as-dos-elementos-html/

Array com Jquery

março 19, 2013 em JQuery

Segue o exemplo:
var obj = {
        "1": "5",
        "2": "30",
        "3": "60",
        "4": "4h"
    };
    $.each( obj, function( key, value ) {
        alert( key + ": " + value );
    });

Resetar o Select Html com Jquery

março 30, 2012 em Html, JavaScript, JQuery

/* função pronta para ser reaproveitada, caso queria adicionar mais combos dependentes */
        function resetaCombo( el )
        {
                $("select[name='"+el+"']").empty();//retira os elementos antigos
                var option = document.createElement('option');
                $( option ).attr( {value : '0'} );
                $( option ).append( 'Escolha' );
                $("select[name='"+el+"']").append( option );
        }

Selecionar um option com valor definido com jquery

março 27, 2012 em JavaScript, JQuery

Segue uma forma prática de selecionar o option com um valor definido através do jquery
var cod_usuario = $(‘#cod_usuario’).val();
$(‘#select_usuarios option[value=”‘+cod_usuario+’”]’).attr({ selected : “selected” });

Desta maneira, está sendo feita a busca do código do usuario para uma váriável, e depois passando para o select dar a seleção da option.
Dependendo da interatividade do seu select “caso venha do banco”, é necessário fazer um setTime para carregar este depois do load do select.

 

Exemplo:

#PHP
<input type=”hidden” id=”cod_usuario” name=”cod_usuario” value=”<?php echo $cod_usuario;?>” />

 

#JAVASCRIPT / JQUERY      
setTimeout( function() {
var cod_usuario = $(‘#cod_usuario’).val();
$(‘#select_usuarios option[value="'+cod_usuario+'"]‘).attr({ selected : “selected” });
}, 1000 );

 

 

Retirecionar página em jquery

março 9, 2012 em JQuery

Em query, podemos fazer o redirecionamento de páginas da seguinte forma:

var novaURL = “../outra_pasta/index.php”;
$(window.document.location).attr(‘href’,novaURL);
Lembrete: Para funcionar, este comando precisa estar dentro de uma tag script ou arquivo .js e antes dele deve estar chamando o jquery.

 

 

 

 

 

 

Referência: http://codigofonte.uol.com.br/codigo/js-dhtml/jquery/aprenda-a-redirecionar-paginas-com-jquery

Abas em Jquery

janeiro 11, 2012 em JavaScript, JQuery

Estava procurando algo com abas em jquery, e achei esse super simples, que quando implementado um CSS nele, ficará perfeito!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Menu em abas simples</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		var tabAtual = 1

		mudarTab = function(numeroTab) {
			$("#tab_"+tabAtual).toggle()
			$("#tab_"+numeroTab).toggle()
			tabAtual = numeroTab
		}
	</script>
</head>
<body id="index">

	<div id="tabs">

		<a href="#tab_1" onclick="mudarTab(1)">Tab 1</a>
		<a href="#tab_2" onclick="mudarTab(2)">Tab 2</a>
		<a href="#tab_3" onclick="mudarTab(3)">Tab 3</a>
		<a href="#tab_4" onclick="mudarTab(4)">Tab 4</a>

		<div id="tab_1">conteudo tab 1</div>
		<div id="tab_2" style="display:none">conteudo tab 2</div>

		<div id="tab_3" style="display:none">conteudo tab 3</div>
		<div id="tab_4" style="display:none">conteudo tab 4</div>
	</div>

</body>
</html>

Referência: http://www.screencaster.com.br/jquery-menu-em-abas-mamao-com-acucar/

Validação de CPF e CNPJ com Jquery Validate

dezembro 23, 2011 em JavaScript, JQuery

O exemplo abaixo é validação de CPF e CNPJ com Jquery Validate.

<html>
<head>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.validate.js”></script>
<!– acima as dependencias, e abaixo o meu javascript, e um exemplo –>
<script type=”text/javascript” src=”js/util.validate.js”></script>
<script type=”text/javascript”>
$(function() {
$(“#f-exemplo”).validate({
debug:true, //retira essa linha, para o form voltar a funcionar
rules: {
“pessoa.cpf” : {
cpf: ‘both’ //valida tanto Formatação como os Digitos
//caso não queira validar a formatação use => cpf: ‘valid’
//caso só queira validar a formatação use => cpf: ‘format’
},
“empresa.cnpj” : {
cnpj: ‘both’ //valida tanto Formatação como os Digitos
}
}
});
});
</script>
</head>
<body>
<form id=”f-exemplo”>
<p>CPF: <input type=”text” name=”pessoa.cpf” value=”” /> <br> Ex.: 766.533.535-75  </p>
<p>CNPJ: <input type=”text” name=”empresa.cnpj” value=”” /><br> Ex.: 50.652.173/0001-60  </p>  </p>
<input type=”hidden” name=”_method” value=”PUT”/>
</form>
</body>
</html>

Segue o exemplo em download completo.
Download

Referência: http://www.guj.com.br/java/202847-stella—validacao-cpf-e-cnpj-via-javascript-usando-jquery-validate