Faire un explorer en html, css, javascript
Bonjour, je voudrais faire une sorte explorateur comme dans Windows.
C'est ma table source
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
0 : 0 - Réez de chaussée | 1 - zone bureau compta | 2 - Bureau 1 | 3 - |
1 : 0 - Réez de chaussée | 1 - zone bureau compta | 2 - Bureau 2 | 3 - |
2 : 0 - Réez de chaussée | 1 - zone bureau compta | 2 - Bureau 3 | 3 - |
3 : 0 - Réez de chaussée | 1 - zone bureau gestion | 2 - Bureau 4 | 3 - |
4 : 0 - Réez de chaussée | 1 - zone bureau gestion | 2 - Bureau 5 | 3 - |
5 : 0 - Réez de chaussée | 1 - zone bureau gestion | 2 - Bureau 6 | 3 - |
6 : 0 - Premier étage | 1 - Salle de classe | 2 - Salle 1 | 3 - |
7 : 0 - Premier étage | 1 - Salle de classe | 2 - Salle 2 | 3 - Réserve |
8 : 0 - Premier étage | 1 - Salle de classe | 2 - Salle 3 | 3 - |
9 : 0 - Premier étage | 1 - Salle de classe | 2 - Salle 4 | 3 - Réserve |
10 : 0 - Deuxième étage | 1 - Couloir | 2 - | 3 - |
11 : 0 - Deuxième étage | 1 - Salle d'activité | 2 - | 3 - |
12 : 0 - Deuxième étage | 1 - Salle informatique | 2 - | 3 - |
13 : 0 - Extérieur | 1 - | 2 - | 3 - | |
Code:
1
2
3
4
5
|
#arbo {position: absolute; top: 140px; left: 20px; width: 250px; height: 455px; overflow: auto; overflow-x: scroll; overflow-y: scroll; white-space: nowrap; padding: 10px;}
#arbo div {cursor: pointer;}
#arbo ul {display: none; list-style-type: none; margin: 0px; padding: 0px; margin-left: 10px;}
#arbo ul li {cursor: pointer;} |
Code:
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <article id="arbo">
<?php
include("./elara/source_php/college.php");
echo("<div onclick=\"javascript:afficher_cacher('ul1');\">$nom_etablicement</div>");
$niveau_1 = array();
for($a=0;$a<count($table_locaux);$a++) {$niveau_1[] = $table_locaux[$a][0];}
$niveau_1 = array_unique($niveau_1);;
echo("<ul id=\"ul1\">");
$x = 1;
foreach($niveau_1 as $nom)
{
echo("<li onclick=\"javascript:afficher_cacher('ul2_$x');\">$nom");
$niveau_1_2 = array();
for($b=0;$b<count($table_locaux);$b++) {if($table_locaux[$b][0] == "$nom") {$niveau_1_2[] = $table_locaux[$b];}}
$niveau_2 = array();
for($c=0;$c<count($niveau_1_2);$c++) {if(!empty($niveau_1_2[$c][1])) {$niveau_2[] = $niveau_1_2[$c][1];}}
$niveau_2 = array_unique($niveau_2);
$total_N2 = count($niveau_2);
if($total_N2 > 0)
{
echo("<ul id=\"ul2_$x\">");
$y = 1;
foreach($niveau_2 as $nom)
{
echo("<li onclick=\"javascript:afficher_cacher('ul3_$y');\">$nom");
$niveau_2_3 = array();
for($d=0;$d<count($table_locaux);$d++) {if($table_locaux[$d][1] == "$nom") {$niveau_2_3[] = $table_locaux[$d];}}
$niveau_3 = array();
for($e=0;$e<count($niveau_2_3);$e++) {if(!empty($niveau_2_3[$e][2])) {$niveau_3[] = $niveau_2_3[$e][2];}}
$niveau_3 = array_unique($niveau_3);
$total_N3 = count($niveau_3);
if($total_N3 > 0)
{
echo("<ul id=\"ul3_$y\">");
$z = 1;
foreach($niveau_3 as $nom)
{
echo("<li onclick=\"javascript:afficher_cacher('ul4_$z');\">$nom");
$niveau_3_4 = array();
for($f=0;$f<count($table_locaux);$f++) {if($table_locaux[$f][2] == "$nom") {$niveau_3_4[] = $table_locaux[$f];}}
$niveau_4 = array();
for($g=0;$g<count($niveau_3_4);$g++) {if(!empty($niveau_3_4[$g][3])) {$niveau_4[] = $niveau_3_4[$g][3];}}
$niveau_4 = array_unique($niveau_4);
$total_N4 = count($niveau_4);
if($total_N4 > 0)
{
echo("<ul id=\"ul4_$y\">");
foreach($niveau_4 as $nom) {echo("<li>$nom</li>");}
echo("</ul>");
}
echo("</li>");
$z++;
}
echo("</ul>");
}
echo("</li>");
$y++;
}
echo("</ul>");
}
echo("</li>");
$x++;
}
echo("</ul>");
?>
</article> |
J'ai l'intention d'amélioré le code php mais j'ai autre chose à faire pour l'instant.
Ce que je voudrais faire en gros, c'est quand je clique sur la div cela m'affiche les premiers UL puis quand je clique sur une LI suivante cela m'affiche l'UL qui va avec.
Je pense qu'avec JavaScript cela doit être possible mais aucune idée pour y arriver.
Je cherche un peut d'aide autre que d’aller lire le cours, c'est déjà fait, cela dit surement comment faire mais je ne vois pas comment. Merci
J'ai fait cela pour l'instant mais une fois passé le niveau 1 cela ne marche plus
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<script language="Javascript">
function afficher_cacher(id)
{
if(document.getElementById(id).style.display=="none")
{document.getElementById(id).style.display="block";}
else
{document.getElementById(id).style.display="none";}
return true;
}
</script> |
