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.