odontograma2

by yamidvo

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <div id="color">
            <button id="nuevo">Nuevo</button><br>
	<div class="select" style="background-color: rgb(129, 45, 211);"></div>
</div>
<div class="diente"><!--diente 1-->
	<input name="valor" type="hidden" value="1">
	<div class="cuadro click"><input name="cuadro" type="hidden" value="1"></div>
	<div class="cuadro izquierdo click"><input name="cuadro" type="hidden" value="2"></div>
	<div class="cuadro debajo click"><input name="cuadro" type="hidden" value="3"></div>
	<div class="cuadro derecha click"><input name="cuadro" type="hidden" value="hola"></div>
	<div class="centro click"><input name="cuadro" type="hidden" value="5"></div>
</div>

CSS

.diente{
	position: relative;
	width: 0px;
	height: auto;
	margin-left: 50px;
	display: inline-block;
}

.cuadro{
	background-color: #FFFFFF;
	border: 1px solid #ccc;
	position: relative;
	width: 20px;
	height: 15px;
	left: 45px;
	-webkit-border-radius: 80px 80px 0px 15px;
	-moz-border-radius: 80px 80px 0px 15px;
	border-radius: 80px 80px 0px 15px;
}
.cuadro:hover{
	 background:rgba(117, 198, 243, 0.4);
	cursor: pointer;
}
.izquierdo{
	top: 1px !important;
	left: 28px !important;
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}
.debajo{
	top: 2px !important;
	left: 45px !important;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.derecha{
	top: -33px !important;
	left: 61px !important;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.centro{
	background: #F3F3F3;
	border: 1px solid #ccc;
	width: 20px;
	height: 18px;
	top:-51px;
	left: 45px;
	position: relative;
}
.centro:hover{
	border: 1px solid rgba(117, 198, 243, 0.4);
	background-color:rgba(117, 198, 243, 0.4);
	cursor: pointer;
}
.select:hover{
	border: 1px solid rgba(117, 198, 243, 0.4);
}
.content{
	position: absolute;
}
.ui-dialog{
	position: relative !important;
}
.select{
	width: 40px;
	height: 40px;
	margin: 2px;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	border: 1px solid #ccc;
}

#color {
    border: 1px solid #CCCCCC;
    float: left;
    height: auto;
    margin: 0 auto;
    padding: 5px;
    position: relative;
    width: auto;
}

JavaScript

$(document).ready(function() {
			$(".select").click(function(event) {
				color = $(this).css('background-color');
				c =$(this).attr('style');
				console.log(c, color);
			});
				$(".click").click(function(event) {
				$(this).css('background-color', color);
				var diente = $(this).parent(".diente").find("input[name=valor]:hidden").val();
				var parte = $(this).find("input[type=hidden]").val();
			});
			$("#nuevo").click(function(event) {
				$('#vtnModal').dialog('open');
                                $('#color').append('<div class="select" style="background-color: rgb(123, 90, 89);"></div><span>'+"holaaa"+'</span><br>');
						});	
		});