1. #1
    Membre à l'essai Avatar de Biboude
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2017
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : mars 2017
    Messages : 30
    Points : 20
    Points
    20

    Par défaut Menu Contextuel JS/HTML

    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 !

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 591
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 591
    Points : 20 189
    Points
    20 189
    Billets dans le blog
    36

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  3. #3
    Membre à l'essai Avatar de Biboude
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2017
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : mars 2017
    Messages : 30
    Points : 20
    Points
    20

    Par défaut

    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.

  4. #4
    Membre à l'essai Avatar de Biboude
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2017
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : mars 2017
    Messages : 30
    Points : 20
    Points
    20

    Par défaut

    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

  5. #5
    Membre à l'essai Avatar de Biboude
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2017
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : mars 2017
    Messages : 30
    Points : 20
    Points
    20

    Par défaut La Solution

    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 !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. TreeView et menu contextuel...
    Par agh dans le forum Composants VCL
    Réponses: 6
    Dernier message: 06/04/2009, 12h23
  2. [HTML] probleme avec une liste deroulante et un menu contextuel
    Par Akramweb dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 21/06/2008, 22h17
  3. [PHP-JS] menu contextuel php html
    Par c_klo dans le forum Syntaxe
    Réponses: 6
    Dernier message: 05/07/2006, 14h26
  4. [VB6] menu contextuel dynamique
    Par da40 dans le forum VB 6 et antérieur
    Réponses: 10
    Dernier message: 15/07/2003, 11h53
  5. [VB6] menu contextuel sur clique droit souris
    Par da40 dans le forum VB 6 et antérieur
    Réponses: 7
    Dernier message: 08/07/2003, 11h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo