Faire un explorer en html, css, javascript

**stephcache** · 02/12/2012, 09h43

Bonjour, je voudrais faire une sorte explorateur comme dans Windows.

C'est ma table source

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**lightbulb** · 05/12/2012, 14h57

Faire un navigateur en javascript n'est pas réellement complexe mais ca demande de comprendre parfaitement comment le DOM est géré et de quoi il est composé en plus de prendre en considération les variations d'interpretation des standards en fonction des navigateurs.

Lire le cours est une chose mais seule l'expérimentation et le temps vont te faire monter en compétence. Faire un post comme celui la montre que tu souhaites une solution toute cuite en pensant qu'on va lire tout ton code.

Heureusement pour toi jquery existe et plus particulièrement jquery UI ou tu as le gros avantage que ça marche sur tous les navigateurs:
http://jqueryui.com/themeroller/

Cette librairie contient tout ce dont tu as besoin pour faire un explorer : drag& drop, resize, dock, animations, etc. et en plus tu peux customiser le design.

Bonne chance.