search

swisnl / jQuery-contextMenu

jQuery contextMenu plugin & polyfill
https://swisnl.github.io/jQuery-contextMenu/
MIT License
2.24k stars 746 forks source link

Theming is missing #31

Closed ova2 closed 9 years ago

ova2 commented 12 years ago

Hi,

Great context menu, but theming with jQuery ThemeRoller is totally missing. Can you add theming support please?

Thanks a lot in advance.

rodneyrehm commented 12 years ago

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

ova2 commented 12 years ago

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 commented 12 years ago

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

rodneyrehm commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

Creating a Custom Theme in jQuery might help

rodneyrehm commented 11 years ago

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

jzaefferer commented 11 years ago

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

Specifically:

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

rodneyrehm commented 11 years ago

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