eduardolundgren · September 13, 2012 14:18
diff --git a/presentinho.html b/presentinho.html
 <!DOCTYPE HTML>
 <html lang="en-US">
 <head>
 	<meta charset="UTF-8">
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
 	<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.23.custom.css">
 	<title>Teste</title>

 	<script type="text/javascript">
 		$(document).ready(function(){
 			function Pessoa(nome, idade, peso, altura){
 				this.nome = nome;
 				this.idade = idade;
 				this.peso = peso;
 				this.altura = altura;
 			}

 			function IMC() {
 				this.listaPessoas = [];
 			}

 			IMC.prototype = {
 				listaPessoas: null,

 				armazenaDados: function(pessoa) {
 					var instance = this;

 					instance.listaPessoas.push(pessoa);
 				},

 				calcular: function(pessoa) {
 					var instance = this;

 					return pessoa.peso/Math.pow(pessoa.altura/100, 2);
 				},

 				listaDados: function() {
 					var instance = this;

 					$.each(instance.listaPessoas, function(i, pessoa) {
 						$('#lista').append(instance.serializar(pessoa));
 					});
 				},

 				serializar: function(pessoa) {
 					var instance = this;

 					return [
 						'<p>',
 							pessoa.nome,
 							'(', instance.calcular(pessoa).toFixed(2), ')',
 						'</p>'
 					];
 				}
 			};

 			$("button").click(function(){
 				var imc = new IMC();

 				var nome = $("#nome").val();
 				var idade = $("#idade").val();
 				var peso = $("#peso").val();
 				var altura = $("#altura").val();

 				var pessoa = new Pessoa(nome, idade, peso, altura);

 				$( "#dialog-confirm" ).dialog({
 					buttons: {
 						"Sim": function() {
 							imc.armazenaDados(pessoa);
 							imc.listaDados();

 							$("#campos").get(0).reset();

 							$(this).dialog("close");
 						},
 						"Não": function() {
 							imc.armazenaDados(pessoa);
 							imc.listaDados();

 							$(this).dialog("close");
 						}
 					},
 					height: 140,
 					modal: true,
 					resizable: false
 				});
 			});

 			$("#altura").change(function(){
 				$("#range").html($(this).val());
 			});
 		});
 	</script>
 </head>
 <body>
 	<form action="" id="campos">
 		<fieldset>
 			<label for="nome">Nome:</label>
 			<input type="text" id="nome">
 			<br>
 			<label for="idade">Idade:</label>
 			<input type="number" id="idade" min="12" max="99" >
 			<br>
 			<label for="peso">Peso:</label>
 			<input type="number" id="peso" min="16" max="200" >
 			<br>
 			<label for="altura">Altura:</label>
 			<input type="range" id="altura" min="20" max="230">
 			<small id="range"></small>
 			<br>
 			<button type="button">Enviar</button>
 		</fieldset>
 	</form>

 	<div id="lista" style="background: pink;">

 	</div>

 	<div id="dialog-confirm" title="Cadastro IMC" style="display: none;">
 		<p>
 			<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
 			Deseja cadastrar mais um?
 		</p>
 	</div>

 </body>
 </html>
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.23.custom.css">
	<title>Teste</title>

	<script type="text/javascript">
	$(document).ready(function(){
	function Pessoa(nome, idade, peso, altura){
	this.nome = nome;
	this.idade = idade;
	this.peso = peso;
	this.altura = altura;
	}

	function IMC() {
	this.listaPessoas = [];
	}

	IMC.prototype = {
	listaPessoas: null,

	armazenaDados: function(pessoa) {
	var instance = this;

	instance.listaPessoas.push(pessoa);
	},

	calcular: function(pessoa) {
	var instance = this;

	return pessoa.peso/Math.pow(pessoa.altura/100, 2);
	},

	listaDados: function() {
	var instance = this;

	$.each(instance.listaPessoas, function(i, pessoa) {
	$('#lista').append(instance.serializar(pessoa));
	});
	},

	serializar: function(pessoa) {
	var instance = this;

	return [
	'<p>',
	pessoa.nome,
	'(', instance.calcular(pessoa).toFixed(2), ')',
	'</p>'
	];
	}
	};

	$("button").click(function(){
	var imc = new IMC();

	var nome = $("#nome").val();
	var idade = $("#idade").val();
	var peso = $("#peso").val();
	var altura = $("#altura").val();

	var pessoa = new Pessoa(nome, idade, peso, altura);

	$( "#dialog-confirm" ).dialog({
	buttons: {
	"Sim": function() {
	imc.armazenaDados(pessoa);
	imc.listaDados();

	$("#campos").get(0).reset();

	$(this).dialog("close");
	},
	"Não": function() {
	imc.armazenaDados(pessoa);
	imc.listaDados();

	$(this).dialog("close");
	}
	},
	height: 140,
	modal: true,
	resizable: false
	});
	});

	$("#altura").change(function(){
	$("#range").html($(this).val());
	});
	});
	</script>
	</head>
	<body>
	<form action="" id="campos">
	<fieldset>
	<label for="nome">Nome:</label>
	<input type="text" id="nome">
	<br>
	<label for="idade">Idade:</label>
	<input type="number" id="idade" min="12" max="99" >
	<br>
	<label for="peso">Peso:</label>
	<input type="number" id="peso" min="16" max="200" >
	<br>
	<label for="altura">Altura:</label>
	<input type="range" id="altura" min="20" max="230">
	<small id="range"></small>
	<br>
	<button type="button">Enviar</button>
	</fieldset>
	</form>

	<div id="lista" style="background: pink;">

	</div>

	<div id="dialog-confirm" title="Cadastro IMC" style="display: none;">
	<p>
	<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
	Deseja cadastrar mais um?
	</p>
	</div>

	</body>
	</html>