I decide to post here my modification of the jquery.contextmenu.js to share it with another people who use it in combination with jqGrid. I described the code in my previous answers about jqGrid on the stackoverflow.com, for example here. I will post in the separate feature request which describes the extention method which generates context menu from the navigator buttons. In the current feature request I want describe only the changes of jquery.contextmenu.js.
I tried to use the existing CSS classes of jQuery UI 1.8.x: ui-menu and ui-menu-item, the classes ui-widget, ui-widget-content, ui-corner-all, ui-widget-shadow and ui-state-hover. Then I added the class ui-menu-icons which will be used in jQuery UI 1.9. I tried to make code so, that it allowes enough flexibility. The aim was to use new jQuery UI Menu Widget in thze future, but first to use existing jquery.contextmenu.js code till jQuery UI 1.9 will be released.
Another aim was to make the code working not only for jQuery UI 1.8.x, but for jQuery UI 1.9 too. So that the first attempts to use jQuery UI 1.9 can be made without requirements to change the code of contextmenu to new jQuery UI menu. The problem was that in the version jQuery UI 1.8.x it was used float: left style actively but in the jQuery UI 1.9 it will be used position: absolute instead. I solved the problem by setting explicitly some 1.9-like styles inline additionaly to adding CSS classes. As the result the produced HTML code will be not perfect (it uses not only CSS classes), but it works very good with both jQuery UI 1.8.x and with jQuery UI 1.9. One minor issue can be fixed by defining
The new version of jquery.contextmenu.js you can get here (I changed the file name to jquery.contextmenu-ui.js). You can include it in the plugins directory of jqGrid.
I created some simple demos based on an old my demo which used jQuery UI Autocomplete. The reason of this was that I wanted to verify that all the changes in the contextmenu plugin do no problems for jQuery UI Autocomplete which uses the same menu classes.
As the demos I used the first and the second demo where I used jQuery UI 1.8.16. The second demo used no icons in the context menu. The next two demos this and this are modification of the previous demos where some jQuery UI 1.8.16 classes will be overwritten with new style settings from jQuery UI 1.9. The demos shows that jQuery UI Autocomplete still works correctly. The last demo uses the last version of jQuery UI 1.9 directly from github: jquery-ui-git.css and jquery-ui-git.js. The demo still work.
I hope that the usage of the modified version of jquery.contextmenu.js can be helpful for other.
Like I wrote before I will post additionally an jqGrid plugin which construct dynamically context menu based the navigator buttons (from navGrid or inlineNav).
Is there a way to use custom images on the context-menu, instead of using the jQuery ui-icons. It works fine if I use jquery UI icons(ui-icon-print), but my custom images are not shown on the context menu.
I would recommend you to specify CSS style background-position: 0 0; in definition of .ui-print class. I recommend you to use background instead of background-image because it reset some other properties which are important for correct displaying of the background image.