Script para retornar Cidades e Estados do Brasil

Código criado em JavaScript para retornar as Cidades e Estados brasileiros.
Códigos disponíveis para JavaScript (vanilla) e jQuery.

Segue o código no GitHub: https://github.com/tedktedk/cidades-estados-brasil/

Abaixo segue as principais funcionalidades do script.

 

Funcionalidade para Estados:

Dados:
  • Retorno dos Estados através do Nome ou da Sigla;
  • Marcar o Estado no campo de SELECT do HTML;

OBS: O retorno é impresso em um SELECT.
Por padrão, usando o método .states(), exemplo:

document.getElementById("select").states();

Resultado final:

<option value="BA">Bahia</option>

Usando a opção true no text, o nome do Estado será retornado em sigla, exemplo:

document.getElementById("select").states({
    text: true
});

Resultado final:

<option value="BA">Bahia</option>

Usando a opção true no value, o nome do Estado será retornado em extenso, exemplo:

document.getElementById("select").states({
    value: true
});

Resultado final:

<option value="Bahia">Bahia</option>

Existe a possibilidade de marcar o Estado como padrão usando o current, exemplo:

document.getElementById("select").states({
    current: "BA"
});

Resultado final:

<option selected="selected" value="Bahia">BA</option>

A variação dessa opção pode ser usada como no exemplo abaixo:

document.getElementById("select").states({
    current: "Bahia" // BA, ba, Bahia, BAHIA, bahia
});

Quer saber mais? Segue o código no GitHub: https://github.com/tedktedk/cidades-estados-brasil/

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

jQuery Plugin jTabk

O jTabk é um plugin que criei para auxiliar a animação em Tabs.
Pode utilizar também setas para passar as Tabs, segue abaixo o dois links, com e sem setas.

É bem simples sua utilização, só é preciso seguir umas regras de formatação de classes. Veja o link da aplicação DEMO

Agora veja o link com setas: DEMO

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

 

Incluir Javascript:

<script type="text/javascript" src="{seu_diretorio}/jtabk.js"></script>
<script type="text/javascript">
$(function(){
	$("#jtabk").jtabk();
});
</script>

 

API de Referência:

var defaults = {
	arrows: {
				left: "",
				right: ""
			}
};

Defaults

left:
// Usado para chamar a ação de setas para a voltar

right:
// Usado para chamar a ação de setas para a avançar

 

HTML:

</pre>
<div id="jtabk">
<ul id="jtabk-menu">
	<li>Tab 1</li>
	<li>Tab 2</li>
	<li>Tab 3</li>
	<li>Tab 4</li>
</ul>
<div class="jtabk-panel jtabk-active">Conteudo 1</div>
<div class="jtabk-panel">Conteudo 2</div>
<div class="jtabk-panel">Conteudo 3</div>
<div class="jtabk-panel">Conteudo 4</div>
</div>
<pre>

 

O PLUGIN
Pra chamar a função identifique primeiro o ID do Tab que irá ser utilizado.

$("#jtabk").jtabk();

Vamos para as partes obrigatórias do Plugin:
– O ID jtabk-menu e na lista UL e as classes jtabk-panel no corpo da Tab são obrigatórias.
– A classe jtabk-active marca a Tab atual. (É fundamental essa classe no código; você pode colocar ela em qualquer Tab, sendo assim a primeira a ser mostrada.)

USO DAS SETAS
Nos parâmetros você pode colocar ID ou class, no caso foram utlizados IDs, veja exemplo:

$("#jtabk").jtabk({
    arrows: {
    			left: "#left", 
            	right: "#right"
            }
});

Veja o HTML das setas:

<div id="setas">
	<a id="left" href="javascript:;"><img src="imgs/left.png" alt="" /></a>
	<a id="right" href="javascript:;"><img src="imgs/right.png" alt="" /></a>
</div>

 

Segue o Código Completo das Tabs simples: DEMO
Download do código Tab: LINK

Segue o Código Completo das Tabs com Setas: DEMO
Download do código Tab com setas: LINK

DOWNLOAD do jTabk Versão: 1.0
Minified e Uncompressed Code

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

jQuery Plugin Plus Validate

O Plus Validate é Plugin jQuery que valida campos de um modo simples e objetivo.

Segue avaliação: DEMO

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

Veja também no site oficial do jQuery:
http://plugins.jquery.com/project/plusvalidate

Com esse plugin você pode validar:
– Se o campo for vazio:
– O mínimo de caracteres para esse campo e colocando uma mensagem de alerta:
– Forçar o usuário a digitar se o campo tem só números:
– Verificar se o E-mail é um endereço eletrônico.

Pra chamar a função identifique primeiro o ID do formulário que irá ser utilizado.

$("#meu_formulario").plusvalidate();

Dentro da função .plusvalidate(); você passa os parâmetros necessario. Vamos ver um exemplo:

$(function(){
    $("#meu_formulario").plusvalidate({
        animation: {
            type : "alert"
        },

        cname: {
            message: "Preencha o campo Nome"
        },

        cemail: {
            message: "Preencha o campo Email",
            required: "email",
            requiredMessage: "Esse campo precisa ter um email eletronico"
        }
    });
});

Segue o HTML

<form id="meu_formulario">
    <p>
        <label>Nome</label>
        <input type="text" name="cname" />
    <p>
        <label>E-Mail</label>
        <input type="text" name="cemail" />
    </p>
    <p>
        <label>Comentário</label>
        <textarea name="comment"></textarea>
    </p>
    <p><input class="submit" type="submit" value="Submit"/></p>
</form>

 

 

DOCUMENTAÇÃO
1. Para adicionar os campos na validação é simples, basta ter o name do campo desejado e colocar na função, separado por vírgula, logo após o animation

cname: {

},
cemail: {

}

O “cname” e o “cemail” seriam os names dos campos “Nome” e “E-mail” do formulário

1.2. Validar se o campo for vazio: use o “message”:

cname: {
	message: "Preencha o campo Nome"
}

1.3. Use o parâmetro “required” para validar um campo, seguido de uma mensagem usando o “requiredMessage”:

cemail: {
    required: "email",
    requiredMessage: "Esse campo precisa ter um email eletronico"
}

OBS: O parâmetro “required” pode validar os sequintes parâmetros:
– email (Verifica se o e-mail é válido)
– number (Verifica se existem só números no campo)
– checkbox (Valida se está marcado um checkbox)
– radio (Valida se está marcado um radio)
– textarea (Valida um Textarea)
– select (Valida se está selecionado algum valor no combo)

Ex 1:

ctermos: {
    required: "checkbox",
    requiredMessage: "Você precisa aceitar os termos para continuar"
}

Ex 2:

cnumero: {
    required: "number",
    requiredMessage: "Esse campo só aceita números"
}

1.4. Existem campos que você pode colocar o o mínimo de caracteres desejados, para isso use o parâmetro “min” seguido da mensagem com o “minMessage”:

clogin: {
    min: 3,
	minMessage: "Esse campo não pode ter menos de 3 caracteres"
}

2. Para colocar um estilo de validação no formulário use o parâmetro animation, que recebe o type com 5 tipos:

2.1. type: “alert”
Ativa um alerta comum na página. O alerta passa campo por campo.
Ex:

animation: {
	type : "alert"
}

2.2. type: “allalert”
Ativa um alerta comum na página dizendo todos os campos que estão faltando preencher e tuas devidas propriedades.

animation: {
	type : "allalert"
}

2.3. type: “star”
Mostra um estrela (asterístico) ao lado do campo dentro de uma TAG span com uma classe chamada plusvalidate-star. Você pode mudar o estilo dessa classe através de um CSS comum, um estilo.

animation: {
	type : "star"
}

2.4. type: “allstar”
Segue o mesmo padrão do type: “star”, porém aparecem todas de vez. Também criam um span com classe e pode ser manipulado.

animation: {
	type : "allstar"
}

2.5. type: “animate”
Cria uma animação de “balanço” nos campos e deixa uma borda sinalizando o alerta. É a única validação que passa outros parâmetros, de cor da borda e de velocidade da animação. Não é obrigatório pois já vem como default a cor “#F00” (vermelho) e velocidade “50
Ex:

animation: {
	type : "animate",
    color: "#369",
    duraction: 100
}

OBS: O duraction seria igual ao jQuery, pode usar acima de 10 para melhor efeito.
OBS: O campo de select não cria efeito e nem marca. (disponíveis agora na versão 1.1) Os campos de checkbox e de radio não marcam, mais criam o efeito.

Segue abaixo um completo: DEMO
Faça o DOWNLOAD do Plugin 1.1.

DOWNLOAD do Plus Validate Versão: 1.1
Minified e Uncompressed Code

DOWNLOAD do Plus Validate Versão: 1.0
Minified e Uncompressed Code

Veja também no site oficial do jQuery:
http://plugins.jquery.com/project/plusvalidate

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

jQuery Plugin DivBox

Criei esse Plugin jQuery para abrir uma Div como uma Janela Modal.
Para usar o Plugin DivBox é bem simples. Siga os passos abaixo:

Nessa versão, a Janela Modal acompanha o scroll.

Segue o link do DEMO
Veja também no site oficial do jQuery: http://plugins.jquery.com/project/divbox-for-tedk

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

 

Incluir Javascript:

<script type="text/javascript" src="{seu_diretorio}/divbox.js"></script>
<script type="text/javascript">
$(function(){
	$("#clicar").click(function(){
		$("#nome_da_div").divbox({
			opacity: 0.9,
			close: '#fechar'
		});
	});
});
</script>

 

API de Referência:

var defaults = {
    color: "#000",
    opacity: 0.8,
    clickBackground: true,
    close: false,
    inClass: class_padrao,
    scrollAnimate: true
};

Defaults

color:
// Para adiconar cor ao fundo da máscara (Hexadecimal/Nome da cor)

opacity:
// Para aumentar a diminuir a opacidade da máscara: (DICA: "de 0.1 a 0.9")

clickBackground:
// Para retirar o link de fechar da máscara, mude o parâmetro (false/true)

inClass:
// O Plugin DivBox já vem com uma div default centralizada, mais você pode otimizar, colocando o estilo de sua div dentro do plugin. Para isso, use uma classe

close:
// Para adicionar uma funcionalidade de fechar a máscara em algum elemento da página, basta passar um ID ou Class do elemento

scrollAnimate:
// Anima de acordo com o scroll da página (true/false)

 

HTML:

<a href="javascript:" id="clicar">Clique aqui para abrir a DIV</a>
<div id="teste">  
	<h2>Minha Div atual.</h2>  
	<br />  
	<a href="javascript:;" id="fechar">Clique aqui para fechar!</a>  
</div>  

 

O PLUGIN
1. Adicione ele a div que precisa do efeito: Esse efeito será acionado assim que a página for carregada.
OBS: A div precisa estar oculta, usando um display: none; no CSS

$(function(){  
    $("#teste").divbox();  
});  

2.5: O Plugin DivBox já vem com uma div default centralizada, mais você pode otimizar, colocando o estilo de sua div dentro do plugin. Para isso, use uma classe como mostra o exemplo:
OBS: você só precisa passar a altura e largura da janela no CSS, exemplo: .div_teste {width: 600px; height: 300px;}

$(function(){  
    $("#teste").divbox({  
        inClass: "div_teste"  
    });  
}); 

Veja o Código completo e o exemplo:

$(function(){  
    $("#clicar").click(function(){
        $("#teste").divbox({  
            color: "#C33",  
            opacity: 0.9,  
            clickBackground: false,  
            close: "#fechar"  
        }); 
    }); 
}); 

 

Segue exemplo: DEMO
Faça o DOWNLOAD do Plugin 1.1.

DOWNLOAD do DivBox Versão: 1.1
Minified e Uncompressed Code

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia