Discussion :

[Maf77]

Bonjour à tous,

Voilà, j'ai commencé un projet afin de réaliser un menu dynamique.
Il commence par "OnClick" sur un élement et déplie les enfants.
Ensuite, ses enfants, peuvent avoir aussi des enfants qui se déplieraient vers la droite.
Dans le code, j'en suis là:

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function GetJsonMenuItems() {
        return {
            "menu": {
                "master": "1",
                "master2": [
                    { "titre": "Sentra2", "lien": "http://..../" },
                    { "titre": "Escort2", "lien": "http://..../" }
                ],
                "master3": [
                    { "titre": "Sentra3", "lien": "http://..../" },
                    { "titre": "Escort3", "lien": "http://..../" },
                    {
                        "SousMaster": [
                            { "titre": "Sentra4", "lien": "http://..../" },
                            { "titre": "Escort4", "lien": "http://..../" }
                        ]
                    }
                ]
            }
        };
    }
 
    function LoadTemplateHTML() {
 
    }
 
    function BuildMenu(menuitems, templatesHtml) {
 
    }
 
 
    $().ready(function() {
        var menuitems = GetJsonMenuItems();
        var templatesHtml = LoadTemplateHTML();
        BuildMenu(menuitems, templatesHtml);
    });

Je voudrais bien trouver comment faire pour avoir des "templates" JS contenant les différents cas (=un enfant, un enfant avec un sous enfant et enfin un enfant avec un enfant et un sous enfant).

Auriez-vous une idée?

Merci d'avance.

Cordialement,
Mafyou.

[Maf77]

Bon, j'ai trouvé une solution à mon problème :-)

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
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
function GetJsonMenuItems() {
        return {
            "menu": {
                "master1": [
                    { "titre": "Sentra1", "lien": "http://..../" },
                    { "titre": "Escort1", "lien": "http://..../" },
                ],
                "master2": [
                    { "titre": "Sentra2", "lien": "http://..../" },
                    { "titre": "Escort2", "lien": "http://..../" },
                    {
                        "SousMaster": [
                            { "titre": "Sentra3", "lien": "http://..../" },
                            { "titre": "Escort3", "lien": "http://..../" }
                        ]
                    }
                ]
            }
        };
    }
 
    function SimpleTemplate(titre, url, idx, anchor) {
        var template = $(".templateParentSimple").clone();
        template.removeClass("templateParentSimple").addClass("SimpleUL");
        template.attr("id", "templateParent" + idx);
        template.css("display", "block");
        template.children().html("<a href='" + url + "'>" + titre + "</a>");
        $(anchor).append(template);
    }
 
    function BuildMenu(menuitems) {
        var i = 1;
        $.each(menuitems.menu, function(key, value) {
            if (key) {
                $.each(value, function (key2, value2) {
                    if (value2.titre) {
                        SimpleTemplate(value2.titre, value2.lien, i, ".row");
                    } else {
                        $.each(value2, function (key3, value3) {
                            $.each(value3, function (key4, value4) {
                                SimpleTemplate(value4.titre, value4.lien, i, "#templateParent" + (i - 1));
                            });
                        });
                    }
                    i++;
                });
            }
        });
    }
 
 
    $().ready(function() {
        var menuitems = GetJsonMenuItems();
        BuildMenu(menuitems);
    });