Plugin Add-Number – Adicionar ou subtrair valores de um imput

• Home-
• javaScript, jQuery, plugin/
• autor: Adriano Meira /
• publicado em: 12/03/2013

Olá Pessoal

Um dia desses precisei colocar no meu layout um campo onde o usuário pudesse digitar um valor e ao lado deste campo dois botões, um para adicionar valores e outro para subtrair o valor, a adição seria valores de um em um e a subtração não poderia ser ser negativa, chegasse a zero ficasse com zero.

Como não achei nada eficiente na internet decidi fazer alguns códigos de javascript e m pouco de jQuery para fazer isso.

Veja abaixo a imagem de como fica o exemplo acima que mencionei:

Então vamos ver como funciona, você vai precisar da biblioteca do jQuery e instanciar o arquivo addNumber,js no seu arquivo ficando assim:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="addNumber.js"></script>

Agora para iniciar o código basta que tenha uma div e dentro dela o campo input com o valor de classe de css como addNumber, veja a estrutura abaixo:

<div>
    <input class="addNumber" name="nomeCampo" type="text"/>
</div>

Com isso os códigos dentro do arquivo addNumver.js irão criar a seguinte estrutura em HTML dentro da div:

<div class="addNumber">
    <input type="text" name="nomeCampo " value="0" class="input0">
    <a class="add" onclick="addNumber('add',$('.input0'))">+</a>
    <a class="remove" onclick="addNumber('remove',$('.input0'))">-</a>
</div>

Esta estrtura vai dentro da div que colocamos o input com a classe addNumber . Muito importante para que os códigos funcionem corretamente deixe-o dentro de um elemento como uma DIV, um P, um SPAN, etc…

Para entender melhor vamos analisar o aquivo addNumber.js veja logo no começo:

$(function(){
	$('.addNumber').each(function(i){
		var name = $(this).attr('name');
		var novoHTML = '<div class="addNumber">'+
			'<input type="text" name="'+name+' " value="0" class="input'+i+'" />'+
				'<a class="add" onclick="addNumber(\'add\',$(\'.input'+i+'\'))">+</a>'+
				'<a class="remove" onclick="addNumber(\'remove\',$(\'.input'+i+'\'))">-</a>'+
			'</div>';
		$(this).parent().append(novoHTML);
		$(this).remove();
	});
});

Aqui estamos usando a função each do jQuery para podermos pegar todos os inputs que tenha a classe addNumber, assim você pode ter este recurso na mesma página em vários input´s.

Na sequência guardo o valor name desta campo, para preserva-lo na hora de remontar o html que é logo em baixo, aqui acrescento os botões de acrescentar e decrementar com suas respectivas funções para tal ação.

Depois eu pulo um elemento antes dele que no nosso exemplo é a DIV e coloco dentro dele no novo html e removo o campo.

E por fim a função addNumber(tipo, classe) faz os cálculos e condições da conta matemática do campo que estamos trabalhando.

E agora você pode estilizar como desejar, abaixo um exemplo de CSS, mas você pode mudar e adequar como quiser no seu layout.

.addNumber{
	overflow:hidden;
}
	.addNumber input{
		width:40px;
		text-align:center;
		float:left;
		margin:0 5px 0 0;
	}
	.addNumber a{
		display:block;
		float:left;
		padding:5px 10px;
		margin:0 5px;
		float:left;
		font-size:12px;
		text-align:center;
		cursor:pointer;
		background:#EBEBEB;
		border:1px solid #CCC;
		text-decoration:none;
		color:#666;
		-moz-border-radius:5px;
		-o-border-radius:5px;
		-ms-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
	}
	.addNumber a:hover{
		background:#C4C4C4;
		border:1px solid #999
	}

Bom é isso ai pessoas,espero que tenham gostado. Dúvidas, comentários ou sugestões deixem aqui nos comentários deste post.

Até mais!

 

---

Tweet