jQWidgets Forums

jQuery UI Widgets Forums Navigation Menu, Context Menu context menu on many elements on the page

This topic contains 7 replies, has 2 voices, and was last updated by  support 13 years, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • context menu on many elements on the page #1214

    labbyjoel
    Member

    Hi !

    i’ve been able to implement your plugin on my project, But I hang on a problem.

    I’ve got a page woth many on the same class “.personne”. ( exemple : )

    I’ve binded the mousedown on each like this :


    $('.personne').each(
    function(index,item){
    $(this).bind('mousedown', function (event) {
    var rightClick = isRightClick(event);
    if (rightClick) {
    var scrollTop = $(window).scrollTop();
    var scrollLeft = $(window).scrollLeft();
    contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
    //console.dir(event);
    return false;

    }
    }
    );
    }
    );

    on the itemclick event, I can get the item I clicked on the menu, but I would like to get the element I’ve right clicked ( for example the image ID >

    Can you help me ??

    thanks

    joel

    context menu on many elements on the page #1216

    support
    Participant

    Hi joel,

    The ‘itemclick’ event allows you to get the clicked LI element. To get its id, you can use: var id = clickedElement.id;

     $('#jqxMenu').bind('itemclick', function (event) {
    var clickedElement = event.args;
    var id = clickedElement.id;
    });

    You can also trigger the ‘mousedown’ event of the Menu’s LI elements. The event.target returns the element that was clicked. The code should be added before the initialization of the jqxMenu.

    $('#jqxMenu').find('li').bind('mousedown', function (event) {
    var element = event.target;
    });

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://jqwidgets.com

    context menu on many elements on the page #1217

    labbyjoel
    Member

    Thank you peter for this response but my purpose is not to get the id of the li, but the id of the image on which i bind the mouse down.

    for remember :

    $('.personne').each(function(index,item){$(this).bind('mousedown', function (event) { ...

    with on the page :

    <img class="personne ui-draggable" src="../img/worker.png">
    <img class="personne ui-draggable" src="../img/worker.png">
    <img class="personne ui-draggable" src="../img/worker.png">
    <img class="personne ui-draggable" src="../img/worker.png">
    <img class="personne ui-draggable" src="../img/worker.png">

    I want to get the “it-|-10085” .

    thanks

    joel

    ps: my previous message was not clear as some tags like

    <img>

    disapears.

    context menu on many elements on the page #1221

    support
    Participant

    Hi Joel,

    As the image is inside the LI element, you can get it using the jQuery find function and passing ‘img’ as parameter.

    For example:

            $('#jqxMenu').bind('itemclick', function (event) {
    var element = event.args;
    var $img = $(element).find('img');
    if ($img.length &gt; 0) {
    var imgid = $img[0].id;
    }
    });

    Hope this helps you.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://jqwidgets.com

    context menu on many elements on the page #1227

    labbyjoel
    Member

    Peter,

    The img is not in the LI, but in a table

    <div class="crewTab" style="height: 209px;">
    <table>
    <tbody>
    <tr><td><img src="../img/worker.png" id="it-|-10150" class="personne ui-draggable"></td><td>Afif Dhib</td></tr>
    <tr><td><img src="../img/worker.png" id="it-|-10054" class="personne ui-draggable"></td><td>Alan Claes</td></tr>
    <tr><td><img src="../img/worker.png" id="it-|-10141" class="personne ui-draggable"></td><td>Alexandre Neuville</td></tr>
    <tr><td><img src="../img/worker.png" id="it-|-10001" class="personne ui-draggable"></td><td>Jean-François Mabille</td></tr>
    <tr><td><img src="../img/chief.png" id="it-|-10010" class="personne ui-draggable"></td><td>Joël Labby</td></tr>
    <tr><td><img src="../img/worker.png" id="it-|-10086" class="personne ui-draggable"></td><td>Michaël Marée</td></tr>
    <tr><td><img src="../img/worker.png" id="it-|-10085" class="personne ui-draggable"></td><td>Michel Kill</td></tr>
    </tbody>
    </table>
    </div>
    context menu on many elements on the page #1228

    support
    Participant

    Hi Joel,

    I implemented a small demo for you with the jqxMenu widget. The demo shows how to get the image’s ID when the user right clicks on a table. Each image is in a separate table cell as in the code you sent us.

    Online Sample: jquery-context-menu

    Download: jquery-context-menu.zip

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://jqwidgets.com

    context menu on many elements on the page #1229

    labbyjoel
    Member

    Thank you peter for trying to help me !! It’s highly appreciated !

    I’ve first tried to bind the mouse event on the pictures themselves. I see you bin the event on the table.

    I can tried this way, but I’ve got many tables containing images on the page.

    i’ve put a html dump of the page here : http://www.labsinfo.be/jqw/page.html

    and the function that treat the jqwmenu : http://www.labsinfo.be/jqw/extract.js

    This page is not fully functionnal but I cannot give you access to this application because it’s an intranet application with many use of ajax and ldap connections. But it will give you a good idea of what i do !

    The pictures are dragabble from the left column to the right ones. I jus want to add a context menu on each pictures to be able to implement actions on specific people (like set chief of the crew)

    The problem in your example is that you cannot right click directly on the picture but only on the table case. If you right click on the img, the menu open but the img id is not shown.

    thanks

    joel

    context menu on many elements on the page #1230

    support
    Participant

    Hi Joel,

    I’d like to ask you to send us (if applicable) the ‘dump’ sample to support@jqwidgets.com because we would like to test and debug it locally.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://jqwidgets.com

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.