forked from arodu/odontogram
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (51 loc) · 6.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Odontogram</title>
<link rel="stylesheet" href="vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="css/jquery.odontogram.min.css">
<style media="screen">
body{
background-color: #ccc;
}
</style>
</head>
<body>
<div class="og-diagram">
<!--
<div id="item-one" data-item="18"></div>
<div id="item-two" data-item="17" data-format="unit,title,mobility,recession"></div>
<div id="item-tree" data-item="38" data-format="iconTitle,unit,recession,mobility" data-icon="img/unit-1.svg"></div>
<div id="item-four" data-item="37" data-format="iconTitle,unit,recession,mobility" data-icon="img/unit-2.svg"></div>
-->
<div class="odontogram">
<div data-item="18" data-icon="img/unit-2.svg"></div>
<div data-item="17" data-icon="img/unit-2.svg"></div>
<div data-item="16" data-icon="img/unit-2.svg"></div>
<div data-item="15" data-icon="img/unit-2.svg"></div>
<div data-item="14"></div>
<div data-item="13"></div>
<div data-item="12"></div>
<div data-item="11"></div>
</div>
</div>
<script src="vendor/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="vendor/jquery-ui/jquery-ui.min.js" charset="utf-8"></script>
<script src="jquery.odontogram.js" charset="utf-8"></script>
<!-- <script src="demo.js" charset="utf-8"></script> -->
<script type="text/javascript">
var data = [{"title":"Limpiar","type":"clean","all":false,"menu":true},{"title":"Limpiar Todo","type":"clean","all":true,"menu":true},{"type":"separator","menu":false},{"index":"1","title":"Caries","type":"section","figure":{"background":"#FF0000"},"menu":false},{"index":"2","title":"Obturado","type":"section","figure":{"background":"#0000FF"},"menu":false},{"index":"3","title":"Sellante Necesario","type":"unit","figure":{"background":"url('img\/asteric-red.svg')"},"menu":true},{"index":"4","title":"Sellante Realizado","type":"unit","figure":{"background":"url('img\/asteric-blue.svg')"},"menu":true},{"index":"5","title":"Extracci\u00f3n Indicada","type":"unit","figure":{"background":"url('img\/x-red.svg')"},"menu":true},{"index":"6","title":"Perdida por Caries","type":"unit","figure":{"background":"url('img\/x-blue.svg')"},"menu":true},{"index":"7","title":"Perdida (otra causa)","type":"unit","figure":{"background":"url('img\/x-circle-red.svg')"},"menu":true},{"index":"8","title":"Endodoncia","type":"unit","figure":{"background":"url('img\/triangle-red.svg')"},"menu":true},{"index":"9","title":"Corona","type":"unit","figure":{"background":"url('img\/square-3-red.svg')"},"menu":true}];
var json = {"52":{"unit":"5","up":null,"down":null,"right":null,"left":null,"center":null},"51":{"center":null,"down":null,"right":null,"unit":"5","up":null,"left":null},"43":{"unit":"4","up":null,"down":null,"right":null,"left":null,"center":null,"mobility":null,"recession":null},"42":{"unit":null,"up":null,"down":"2","right":null,"left":"1","center":"2","mobility":null,"recession":null},"12":{"unit":"4","up":null,"down":null,"right":null,"left":null,"center":null,"recession":"3","mobility":null},"41":{"unit":"5","up":null,"down":null,"right":null,"left":null,"center":null,"mobility":"2","recession":"3"},"11":{"unit":"6","up":null,"down":null,"right":null,"left":null,"center":null,"recession":"2","mobility":"2"},"31":{"unit":null,"up":null,"down":null,"right":null,"left":null,"center":null,"mobility":null,"recession":null},"32":{"center":null,"right":null,"unit":"3","up":null,"down":null,"left":null,"mobility":"3","recession":null},"45":{"unit":"8","up":null,"down":null,"right":null,"left":null,"center":null,"mobility":null,"recession":null},"34":{"unit":"6","up":null,"down":null,"right":null,"left":null,"center":null,"mobility":null,"recession":null},"36":{"unit":"3","up":null,"down":null,"right":null,"left":null,"center":null,"mobility":null,"recession":null},"38":{"unit":"8","up":null,"down":null,"right":null,"left":null,"center":null,"mobility":null,"recession":null},"35":{"center":"1","right":"1","down":null,"unit":null,"up":"1","left":null,"mobility":null,"recession":"3"},"62":{"center":null,"down":"2","right":"1","left":"1","up":"1"},"16":{"up":"1","right":"1","down":"1","left":"1","center":"1"},"25":{"recession":null,"mobility":null,"unit":"4","up":null,"down":null,"right":null,"left":null,"center":null},"63":{"center":"1","up":"1","down":"1","left":"1","right":"1"},"13":{"recession":"1","mobility":"2","unit":"3","up":null,"down":null,"right":null,"left":null,"center":null},"18":{"up":"1","center":"1","down":"1","recession":"1","mobility":null,"unit":null,"right":null,"left":null},"17":{"recession":null,"mobility":null,"unit":null,"up":null,"down":null,"right":null,"left":null,"center":null},"44":{"center":null,"up":null,"unit":"7","down":null,"right":null,"left":null,"mobility":null,"recession":null},"28":{"center":"1","down":"1"},"21":{"right":null,"up":null,"center":null,"recession":null,"mobility":null,"unit":"5","down":null,"left":null},"22":{"recession":"1","mobility":"2","unit":"7","up":null,"down":null,"right":null,"left":null,"center":null},"64":{"unit":"4","up":null,"down":null,"right":null,"left":null,"center":null},"24":{"right":"1","down":"1","center":"1","up":"1","recession":"2","mobility":null,"unit":null,"left":null},"74":{"down":null,"center":null,"up":null,"unit":"6","right":null,"left":null},"75":{"right":null,"left":null,"center":null,"up":null,"down":null,"unit":"8"},"14":{"recession":null,"mobility":"3","unit":"8","up":null,"down":null,"right":null,"left":null,"center":null},"27":{"recession":null,"mobility":null,"unit":"6","up":null,"down":null,"right":null,"left":null,"center":null},"81":{"center":null},"47":{"unit":"5","up":null,"down":null,"right":null,"left":null,"center":null,"mobility":null,"recession":null},"37":{"unit":"5","up":null,"down":null,"right":null,"left":null,"center":null,"mobility":null,"recession":null},"71":{"center":null,"down":null,"right":null,"unit":"3","up":null,"left":null},"55":{"unit":null,"up":null,"down":null,"right":null,"left":null,"center":null},"33":{"center":"1","down":"1","unit":null,"up":null,"right":null,"left":null,"mobility":"2","recession":null},"23":{"recession":null,"mobility":"2","unit":null,"up":null,"down":null,"right":null,"left":null,"center":null},"85":{"unit":"5","up":null,"down":null,"right":null,"left":null,"center":null},"84":{"up":"1"}};
$odontogram = $('.odontogram').odontogram({
'format': 'iconTitle,recession,mobility,unit',
'json': json,
'data': data,
'menu-title': 'Pieza #%dataItem%',
'enable': true,
});
//$odontogram.json(json);
//console.log($odontogram.json());
</script>
</body>
</html>