Custom Elements Documentation

Styling and Appearance

jQWidgets uses a pair of CSS files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxListMenu:
  • jqx-listmenu - applying to the root jqxListMenu element.
  • jqx-listmenu-header - applying to the jqxListMenu's header.
  • jqx-widget-header - applying to the jqxListMenu's header.
  • jqx-listmenu-item - applying to the jqxListMenu's list items.
  • jqx-fill-state-normal - applying to the jqxListMenu's list items.
  • jqx-fill-state-pressed - applying to a jqxListMenu when the mouse button is pressed.
  • jqx-listmenu-separator - applying to the jqxListMenu's separators. A list item could be set to be separator using the data-role='separator' attribute.
  • jqx-listmenu-header-label - applying to the header's label.
  • jqx-listmenu-arrow-right - applying to the list item's arrow.
  • jqx-listmenu-arrow-right-pressed - applying to the list item when the user press his left mouse button on it.
  • jqx-listmenu-filter-input - applying to the filter input.
  • jqx-listmenu-filter - applying to the filter bar.
  • jqx-listmenu-item-label - applying to each list item's label.
  • jqx-listmenu-auto-separator - applying to the separators which have been created dynamically.
  • jqx-listmenu-item-readonly - applying to the readonly list items.
  • jqx-fill-state-disabled - applied to the jqxListMenu when it is disabled.

When you create a custom style with colors and backgrounds for jqxListMenu, you need to do the following:
  • Add the above CSS classes related to jqxListMenu
  • After each CSS class, add your theme name.
    For example: jqx-listmenu-summer
  • To apply your custom style to jqxListMenu, you need to set its 'theme' property(option) to point to your theme name string.
  • The sample below demonstrates how to set the 'Summer' theme to jqxListMenu.