Menu Contextuel JS/HTML

**Biboude** · 14/03/2017, 16h00

Hello ! J’ai une question à propos des menus Contextuels.
J’explique j’ai déjà mis en place le menu etc. (il marche) ... et crée mes fonctions.

Mon problème est que quand lorsque je vais cliquer sur l'une de mes rubrique, rien ne se passe.
Actuellement j’essaie d’appeler mes fonctions via un onclick mais ça ne fonctionne pas (Je sais c'est moche).

J’ai cherché sur l'internet mais je pense qu’il y a quelque chose qui m’échappe avec l’appel des fonctions (Je tien a précisé que mes fonction marche séparément) .
Je donne l’extrait de code. Hésite pas !

Mon HTML

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<!-- Menu Contextuel -->         <div id="menuData" style="display: none;">
            <div id="m1" text="File">
 
                <div id="m11" onclick="cut()" style="cursor: pointer;" text="Cut" img="cut.gif" imgdis="cut_dis.gif" ><hotkey>Ctrl+X</hotkey></div>  
                <div id="ms1" type="separator"></div> 
                <div id="m12" onclick="copy()" style="cursor: pointer;" text="Copy"  img="copy.gif" imgdis="copy_dis.gif"><hotkey>Ctrl+C</hotkey> </div> 
                <div id="m13" onclick="paste()" style="cursor: pointer;" text="Paste" img="paste.gif" mgdis="paste_dis.gif"><hotkey>Ctrl+V</hotkey></div>
 
            </div>
        </div>
<!---------------->

Mon JS

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
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
96
 
//#region MENUX JavaScript
 
    var menu = new dhtmlXMenuObject();
    menu.setIconsPath("./Scripts/codebase/imgs/");
    menu.renderAsContextMenu();
    //menu.loadStruct("./Scripts/codebase/dhxmenu.xml?e=" + new Date().getTime());
    menu.loadFromHTML("menuData", true);
    var event_id, cb_date, cb_isCopy, cb_section = null;
 
    scheduler.attachEvent("onContextMenu", function (event_id_loc, native_event_object) {
        event_id = event_id_loc;
        cb_date = scheduler.getActionData(native_event_object).date;
        cb_section = scheduler.getActionData(native_event_object).section;
 
        /* Menu position */
        var posx = 0;
        var posy = 0;
        if (native_event_object.pageX || native_event_object.pageY) {
            posx = native_event_object.pageX;
            posy = native_event_object.pageY;
        } else if (native_event_object.clientX || native_event_object.clientY) {
            posx = native_event_object.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = native_event_object.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
 
        //#region function Menu contextuel
        function copy2() { alert("koko"); }
 
        function copy() {
            scheduler._buffer_id = event_id;
            cb_isCopy = true;
            scheduler.callEvent("onEventCopied", [scheduler.getEvent(event_id)]);
        }
 
        function cut() {
            scheduler._buffer_id = event_id;
            cb_isCopy = false;
            scheduler.callEvent("onEventCut", [scheduler.getEvent(event_id)]);
        }
 
        function paste() {
            var ev = scheduler.getEvent(scheduler._buffer_id);
            if (ev) {
                if (cb_isCopy) { // copy-paste
                    new_ev = _cb_make_paste_event(ev);
                    new_ev.id = scheduler.uid();
 
                    scheduler.addEvent(new_ev);
                    scheduler.callEvent("onEventPasted", [cb_isCopy, new_ev, ev]);
                } else { // cut-paste
                    new_ev = _cb_make_paste_event(ev);
 
                    var a = scheduler.callEvent("onBeforeEventChanged", [new_ev, null, !1, ev]);
                    a && (scheduler.addEvent(new_ev), scheduler.callEvent("onEventPasted", [cb_isCopy, new_ev, ev]));
                }
            }
        }
 
        function _cb_make_paste_event(ev) {
            var event_duration = ev.end_date - ev.start_date;
            var new_ev = scheduler._lame_copy({}, ev);
            new_ev.start_date = new Date(cb_date);
            new_ev.end_date = new Date(new_ev.start_date.valueOf() + event_duration);
 
            if (cb_section) {
                var a = scheduler.getState().mode, d = null;
                scheduler.matrix[a] ? d = scheduler.matrix[a].y_property : scheduler._props[a] && (d = scheduler._props[a].property), new_ev[d] = cb_section;
            }
            return new_ev;
        }
        //#endregion 
 
        /* Menu items */
        if (event_id) {
            menu.showItem("m11");
            menu.showItem("ms1");
            menu.showItem("m12");
            menu.showItem("demo");
            menu.hideItem("m13");
            menu.hideItem("ms2");
            menu.showContextMenu(posx, posy);
        }
        else {
            menu.hideItem("m11");
            menu.hideItem("m12");
            menu.showItem("m13");
            menu.showItem("demo");
            menu.hideItem("ms1");
            menu.hideItem("ms2");
            menu.showContextMenu(posx, posy);
        }
 
        return false; // Désactive le menu de base    });
 
    //#endregion

J'ai oublié de précisé, que j'utilise la bibliothèque DHTMLX

Je gère des évents que je voudrais copié collé avec mon nouveau menu

!

**danielhagnoul** · 14/03/2017, 18h19

dhtml

contextmenu, voir : https://developer.mozilla.org/fr/doc...ls/contextmenu

**Biboude** · 15/03/2017, 09h14

Bonjour et merci de ce retour, mais dans ton lien ils utilisent les balises <menu> et <menuItem> or c'est balise ne son compatible qu'avec Firefox 9.0 ou 8. (c'est pas ce que je veux)

Ce que je voudrais c'est savoir comment associé mes fonction avec mais click dans mon menu.

Comment ça marche quoi !

comment c'est foutue est qu'elle est la logique.

**Biboude** · 15/03/2017, 14h31

Bon je bloque toujours sur mon menu qui ne fais rien quand je clique sur mes rubrique . Grrr ...

Voici le HTML donc j'ai un menu avec une rubrique File dedans j'ai trois autre div avec une cut une copy et une paste

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<!-- Menu Contextuel -->
    <div id="menuData" style="display: none;">
        <div id="m1" text="File">
            // the first top menu item
            <div id="m11" text="Cut" img="cut.gif" imgdis="cut_dis.gif" onclick="cut();"><hotkey>Ctrl+X</hotkey></div>  //the first child item
            <div id="ms1" type="separator"></div> // a separator
            <div id="m12" text="Copy" img="copy.gif" imgdis="copy_dis.gif" onclick="TEST();"><hotkey>Ctrl+C</hotkey> </div> //the second child item
            <div id="m13" text="Paste" img="paste.gif" imgdis="paste_dis.gif" onclick="paste();"><hotkey>Ctrl+V</hotkey></div> //the third child item
        </div>
    </div>
    <!---------------->

Pour ce qui est du JS

Code :

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

1
2
3
4
5
6
7
 
var menu = new dhtmlXMenuObject(); // Création de l'objet Menu
    menu.setIconsPath("./Scripts/codebase/imgs/"); // Charge imgs
    menu.renderAsContextMenu();
    //menu.loadStruct("./Scripts/codebase/dhxmenu.xml?e=" + new Date().getTime()); // Load structure Menu XML file
    menu.loadFromHTML("menuData", true); // Load HTML Structure    
    var event_id, cb_date, cb_isCopy, cb_section = null;

là j'initialise mon menu. Bon jusque là ça va

Après j'attache l'événement a mon Scheduler donc quand je vais faire click droit il va m'affiché mon menu

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
scheduler.attachEvent("onContextMenu", function (event_id_loc, native_event_object) { // appel du Menu context
        event_id = event_id_loc;
        cb_date = scheduler.getActionData(native_event_object).date;
        cb_section = scheduler.getActionData(native_event_object).section;
 
 
        /* Menu position */
        var posx = 0;
        var posy = 0;
        if (native_event_object.pageX || native_event_object.pageY) {
            posx = native_event_object.pageX;
            posy = native_event_object.pageY;
        } else if (native_event_object.clientX || native_event_object.clientY) {
            posx = native_event_object.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = native_event_object.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }

Ici je vais donné la logique d'affichage de mes rubrique

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
/* Menu items */
        if (event_id) {
            menu.showItem("m11");
            menu.showItem("ms1");
            menu.showItem("m12");
            menu.hideItem("m13");
            menu.hideItem("ms2");
            menu.showContextMenu(posx, posy);            
        }
        else {
            menu.hideItem("m11");
            menu.hideItem("m12");
            menu.showItem("m13");
            menu.hideItem("ms1");
            menu.hideItem("ms2");
            menu.showContextMenu(posx, posy);
        }

Voilà a côté de ça j'ai des fonctions qui marche mon problème est que l'lorsque je vais cliquer sur copy par exemple ... Baaaaaaa .. il ne se passe rien

**Biboude** · 17/03/2017, 14h55

Bon au cas ou quelqu'un tomberais sur les même problèmes que moi.

le problème étant que quand je cliquai sur l'une de mes rubrique de mon menu contextuel il ne ce passais rien.
Car les éléments n'était plus accessible après l'initialisation de ma page html donc je ne pouvais pas associé les fonctions avec les rubriques.

Grace a une fonction handleClick() que j'ai associé a un onclik sur mon menu. (en gros dés que je clique n'import où dans mon menu il va exécuté HandleClick (ça rajoute une étape))

Code :

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

1
2
3
4
var menu = new dhtmlXMenuObject({       // Création de l'objet Menu
        context: true,
        onclick: handleClick
    });

j'ai pu mettre en paramètre les ids des éléments comme ça quand je cliquai sur l'une de mes rubrique il récupère l'id de l'élément cliqué et du coup en fonction de l'id (de l'élément).
Il exécute la fonction voulu

Code :

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

function handleClick(id) { if (id == laRubriqueCliqué) {exécute la fonction associé}

Voilou !

Menu Contextuel JS/HTML

JavaScript

Discussions similaires

Partager

Partager