jQWidgets Forums

jQuery UI Widgets Forums Navigation Menu, Context Menu jqxmenu basics – action handler

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 13 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxmenu basics – action handler #1131

    gdcreation
    Member

    Hi guys,

    I’ve found out about jqwidgets only today and it is really looking promising to me. Actually, it seems to do a lot of stuff I lost a lot of time trying to do it right by myself! 🙂

    I am with a very basic question about the jqxmenu component. It is not clear for me in the documentation. I know I sometimes can’t see the answer under my nose, so you can just point me to the correct place in the doc with the answer! 😉

    My question is with the way the actions for each clicked item are handled. I know that I can add an event for each item clicked using code similar to this:

    	$("#myMenu").bind('itemclick', function (event) {
    			// Do something
    	});

    However, it is not very clear the best way to identify what item was clicked and how to manage all possible actions with a big list of menu items.

    I had to create multiple context menus in one page because I have a tree with different node types and each type has a different context menu. I know I could get from the event object the inner html or something similar and create a big if-elseif-else code in the bind of each one of the menus testing the string value, but that doesn’t look very neat. Also, I realized I could bind the click
    event to the ‘li’ node, but that would bypass the jqxmenu events and the menu won’t close after click.

    It would be nice if we could do something like adding an identifier to the menu item and then accessing it directly for the actions. Something like:

    <div id='myMenu'>
    	<ul>
    		<li><a href="#rename">Rename this node</a></li>
    		<li><a href="#create">Create another one</a></li>
    		<li><a href="#delete">Delete forever</a></li>
    	</ul>
    </div>
    (...) 
    
    $("#myMenu).jqxMenu(
         "setAction",
         "rename",
          function(element){ 
              alert('this is the action to rename, for element '+element.id); 
          });

    Is there a better (and nicer) way of doing it that in jqxmenu? Am I missing some basic concept in the component (I would bet on this one!)?

    Any ideas are well appreciated.

    Thanks!

    jqxmenu basics – action handler #1138

    Peter Stoev
    Keymaster

    Hi gdcreation,

    Thank you for writing.

    The ‘itemclick’ event is triggered when the user clicks an item. The event also passes the clicked menuitem LI element.

    Here is how to get the clicked ‘LI’ element and its text.

    $('#jqxMenu').bind('itemclick', function (event) {
    var LI_element = event.args;
    var menuitemText = $(args).text();
    switch (menuitemText) {
    case "Home":
    alert("'Home' clicked");
    break;
    case "Solutions":
    alert("'Solutions' clicked");
    break;
    case "Financial services":
    alert("'Financial services' clicked");
    break;
    }
    });

    The idea about “setAction” function is interesting and we will consider it. In addition, thank you about the feedback regarding the documentation of the ‘itemclick’ event. We appreciate it!

    Please feel free to contact us, if you have additional questions.

    Best Wishes,
    Peter Stoev

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

You must be logged in to reply to this topic.