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.