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 jqxDockingLayout.
- jqx-docking-layout - applied to the jqxDockingLayout.
- jqx-layout - applied to the jqxDockingLayout.
- jqx-widget - applied to the jqxDockingLayout.
- jqx-widget-content - applied to the jqxDockingLayout.
- jqx-rc-all - applied to the jqxDockingLayout.
- jqx-layout-group-root - applied to the root layout group.
- jqx-layout-group-default - applied to layout groups.
- jqx-layout-group-document - applied to document groups.
- jqx-layout-group-tabbed - applied to tabbed groups.
- jqx-layout-group-auto-hide - applied to auto hide groups.
- jqx-layout-group-auto-hide-content-horizontal - applied to the content sections
of horizontally-aligned auto hide groups.
- jqx-layout-group-auto-hide-content-vertical - applied to the content sections of
vertically-aligned auto hide groups.
- jqx-docking-layout-group-floating - applied to float groups.
- jqx-layout-pseudo-window - applied to pseudo-jqxWindows in tabbed and auto hide
groups.
- jqx-layout-pseudo-window-header - applied to pseudo-jqxWindow headers.
- jqx-layout-pseudo-window-title - applied to pseudo-jqxWindow titles.
- jqx-layout-pseudo-window-pin-icon - applied to pseudo-jqxWindow pin icons.
- jqx-layout-pseudo-window-pinned-icon - applied to pseudo-jqxWindow unpin icons.
- jqx-layout-pseudo-window-close-icon - applied to pseudo-jqxWindow close icons.
- jqx-layout-pseudo-window-content - applied to pseudo-jqxWindow content sections.
- jqx-layout-resize-feedback - applied to the horizontal and vertical resize feedbacks.
- jqx-layout-resize-feedback-horizontal - applied to the horizontal resize feedback.
- jqx-layout-resize-feedback-vertical - applied to the vertical resize feedback.
- jqx-layout-resize-feedback-warning - applied to the resize feedbacks when a minimum
width has been reached.
- jqx-docking-layout-overlay - applied to the overlay with squares which appears when
a float group is dragged (drag overlay).
- jqx-docking-layout-overlay-square - applied to the squares in the drag overlay.
- jqx-docking-layout-square-disabled - applied to squares in the drag overlay to indicate
a drop operation is not allowed.
- jqx-docking-layout-overlay-inner-square - applied to the inner, dialog-resembling,
squares in the drag overlay.
- jqx-docking-layout-overlay-inner-square-header - applied to the header of the drag
overlay inner squares and the "mini windows" of edge squares.
- jqx-docking-layout-overlay-inner-square-content - applied to the content of the
drag overlay inner squares and the "mini windows" of edge squares.
- jqx-docking-layout-overlay-highlight - applied to the highlighted part of the content
of the drag overlay inner squares.
- jqx-docking-layout-drop-overlay - applied to the overlay which appears when a float
group is about to be docked.
- jqx-docking-layout-overlay-square-edge - applied to the squares which appear at
the left, right, top and bottom of the widget when a float group is dragged.
- jqx-docking-layout-overlay-mini-window-edge-horizontal - applied to the inner, dialog-resembling,
squares in the left and right edge squares.
- jqx-docking-layout-overlay-mini-window-edge-vertical - applied to the inner, dialog-resembling,
squares in the top and bottom edge squares.
- jqx-docking-layout-overlay-inner-square-content-horizontal - applied to the content
of the "mini windows" of the left and right edge squares.
- jqx-docking-layout-overlay-inner-square-content-vertical - applied to the content
of the "mini windows" of the top and bottom edge squares.
- jqx-docking-layout-overlay-square-edge-arrow - applied to the arrows of the edge
squares.
When you create a custom style with colors and backgrounds for jqxDockingLayout,
you need to do the following:
- Add the above CSS classes related to jqxDockingLayout
- After each CSS class, add your theme name.
For example:
jqx-docking-layout-energyblue
- To apply your custom style to jqxDockingLayout, you need to set its 'theme' property
(option) to point to your theme name string:
- The sample below demonstrates how to set the 'energyblue' theme to jqxDockingLayout:
[フレーム]