Document the use of the show event to set the title of a dynamic menu

[cperthuis]

Hi,

This is a suggestion to improve the documentation.

For menus using the 'build' function, the only way I found to set the menu title was to do it in the show event.

        $.contextMenu({
            selector: '.ui-timeline-key',
            className: 'ui-contextmenu-title-key',
            build: function ($trigger, e) {
                return {
                    callback: function (key, options) {
                        var m = "clicked: " + key;
                        window.console && console.log(m) || alert(m);
                    },
                    items: keyContextMenuItems
                };
            },
            events: {
                show: function (options) {
                    //this refers to the triggering element
                    //read a custom data of the triggering element
                    var keyName = this.attr('data-key'); 
                    //set a custom menu title using the javascript method
                    $('.ui-contextmenu-title-key').attr('data-menutitle', "key " + keyName);
                    return true;
                }
            }
        });

I thihk it would be nice to add it to the documentation, I almost gave up on the lib because this appeared to not be supported. Most of my usage cases require dynamic menus and having a dynamic title is a really nice feature.

Thanks!

[bbrala]

Might add this as a snippet to the documentation. :)

Maybe as an example?

[JamoCA]

I gave up trying to use the menu title... I couldn't get it display. I'm not sure if it was due to jQuery 3 or conflicting CSS/JS.

As part of the menu build, I set a label based on a table cell of the row I was hovering over so that the context of the menu wasn't lost when the focus changed and the table row was no longer highlighed. (I'm using TableSorter and am integrating contextMenu to minimize repetitive link code requirements.)

build: function($trigger, e) {
    var menuLabel = $trigger.closest('tr').find('td:nth-child(1)').text();

In the menu items, the first item has the label dynamically appended, uses a custom className and is disabled from being selectable.

items: {
   header: {
      name: "Item ##" + menuLabel,
      disabled:true,
      className: 'contextmenu-item-header'
   },
   ....
}

I created a CSS class with a contrasting background and set it to important so that it would override default "disabled" styles.

.contextmenu-item-header {font-weight:bold !important; background-color:##000 !important; color:##fff !important;}

[bbrala]

Hmm, i think the test build currently breaks on 3, see #407. Haven't had the time to fix.