Theming is missing about jquery-contextmenu

[rodneyrehm]

Are you talking about this? If so, go ahead and integrate it, I'd be happy to merge…

[ova2]

Wow, fast response. Yes, exactly this. :-) I will try to integrate theming later. I plan to use your menu for JSF component(s) in PrimeFaces Extensions project http://code.google.com/p/primefaces-extensions/

Thanks.

[ova2]

Should we always use themable menu then or per configuration "theming"=true/false?

[rodneyrehm]

If the current "style" (cough) can be converted to that UI-themening structure, go ahead. The basic idea would be to enable this widget to run without jQueryUI, though. So whatever you do, make sure it works without any additional components (like jQueryUI). But if they're present, their functionality (in this case that themeroller thingie) may be used.

In short: try to convert it to the theme thing, but make it work without jQuery UI being available.

[ova2]

Understood. Thanks. Nice dynamic menu by the way. This is what I need - build a dynamic menu without Ajax requests, on the client-side only. Look-&-feel should be better though.

[davhue]

I have themeroller-ized contextMenu at least for my limited purposes.
Other people may need to use more/other themeroller classes, I stopped looking when it started working for me.
Here is how I did it:

1. Removed settings for border: font-family: font-size: background: and background-color: from classes in jquery.contextMenu.css so as to remove conflicts with themeroller settings.
2. Added the "ui-widget" themeroller class to the top contextMenu ul, i.e. $.contextMenu({"className":"ui-widget"});
3. Added the "ui-widget-content" themeroller class to all the contextMenu ul's with the following run-time code:
   $(function(){
   $("selector").contextMenu({x: -1000, y: -1000}); //force menu instantiation
   $(".context-menu-list:not(.ui-widget-content)").addClass("ui-widget-content"); //add the class
   $("selector").contextMenu("hide"); //hide menu
   });
4. Added themeroller hover classes with the following run-time code:
   $(function(){
   $(document.body).on("contextmenu:focus", ".context-menu-item", function(e){ $(this).addClass("ui-state-hover"); })
   $(document.body).on("contextmenu:blur", ".context-menu-item", function(e){ $(this).removeClass("ui-state-hover"); })
   });

I believe that this most excellent plugin could be made themeroller friendly with the following adjustments:

1. Move conflicting CSS settings to a separate contextMenu .css file so that implementers could avoid conflicting settings without modifying the standard CSS by not linking the additional .css file.
2. Provide a separate classname option for submenus (i.e. "classNameSub"). This would eliminate the code in step 3. In my case both "className" and "classNameSub" would be set to "ui-widget-content" but that may not be true for everyone.
3. Provide classname options for menu item hover and blur. This would eliminate the code in step 4.

Implementers would still need to figure what themeroller classes they would need (which is not trivial) but contextMenu would accommodate their needs.

[rodneyrehm]

Creating a Custom Theme in jQuery might help

[rodneyrehm]

jQuery UI Theming and jQuery UI Theming API might help on this front.

[jzaefferer]

Here's an incomplete draft that highlights issues on both sides: http://jsbin.com/ojuqix/1/edit

Specifically:

• I had to copy the styles for the ".ui-menu .ui-menu-item a" selector and changed the "a" to "span" to match the markup here. This wouldn't be necessary if you change contextmenu to use "a" in place of "span", or if jQuery UI improves the styles for menu to not require a specific child element. Since 1.10 drops IE6 support, we might as well use a child selector...
• There's no way to customize the active/focus/hover class, so I just added "ui-state-focus" to the first menu item to show what it would look like

Other then that its just a matter of adding the right classes to the root element and each item and their child.

[rodneyrehm]

I've started playing with this in the jqueryui-theme branch. I've noted some issues and questions in demo/jquery-ui-theme.html, in case anybody wants to have a crack at it