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 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:

  <script type="text/javascript">
      $(document).ready(function () {
          // the 'layout' JSON array defines the internal structure of the docking layout
          var layout = [{
              type: 'layoutGroup',
              orientation: 'horizontal',
              items: [{
                  type: 'autoHideGroup',
                  alignment: 'left',
                  width: 80,
                  unpinnedWidth: 200,
                  items: [{
                      type: 'layoutPanel',
                      title: 'Toolbox',
                      contentContainer: 'ToolboxPanel'
                  }, {
                      type: 'layoutPanel',
                      title: 'Help',
                      contentContainer: 'HelpPanel'
                  }]
              }, {
                  type: 'layoutGroup',
                  orientation: 'vertical',
                  width: 500,
                  items: [{
                      type: 'documentGroup',
                      height: 400,
                      minHeight: 200,
                      items: [{
                          type: 'documentPanel',
                          title: 'Document 1',
                          contentContainer: 'Document1Panel'
                      }, {
                          type: 'documentPanel',
                          title: 'Document 2',
                          contentContainer: 'Document2Panel'
                      }]
                  }, {
                      type: 'tabbedGroup',
                      height: 200,
                      pinnedHeight: 30,
                      items: [{
                          type: 'layoutPanel',
                          title: 'Error List',
                          contentContainer: 'ErrorListPanel'
                      }]
                  }]
              }, {
                  type: 'tabbedGroup',
                  width: 220,
                  minWidth: 200,
                  items: [{
                      type: 'layoutPanel',
                      title: 'Solution Explorer',
                      contentContainer: 'SolutionExplorerPanel'
                  }, {
                      type: 'layoutPanel',
                      title: 'Properties',
                      contentContainer: 'PropertiesPanel'
                  }]
              }]
          }, {
              type: 'floatGroup',
              width: 500,
              height: 200,
              position: {
                  x: 350,
                  y: 250
              },
              items: [{
                  type: 'layoutPanel',
                  title: 'Output',
                  contentContainer: 'OutputPanel'
              }]
          }];
          $('#jqxDockingLayout').jqxDockingLayout({ theme: 'energyblue', width: 800, height: 600, layout: layout });
      });
  </script>
  

• The sample below demonstrates how to set the 'energyblue' theme to jqxDockingLayout:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>jQuery Docking Layout Styling Sample</title>
      <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
      <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
      <style type="text/css">
          .jqx-layout-group-auto-hide-content-vertical
          {
              width: 200px;
          }
      </style>
      <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
      <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
      <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
      <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
      <script type="text/javascript" src="../../jqwidgets/jqxlayout.js"></script>
      <script type="text/javascript" src="../../jqwidgets/jqxdockinglayout.js"></script>
      <script type="text/javascript">
          $(document).ready(function () {
              // the 'layout' JSON array defines the internal structure of the docking layout
              var layout = [{
                  type: 'layoutGroup',
                  orientation: 'horizontal',
                  items: [{
                      type: 'autoHideGroup',
                      alignment: 'left',
                      width: 80,
                      unpinnedWidth: 200,
                      items: [{
                          type: 'layoutPanel',
                          title: 'Toolbox',
                          contentContainer: 'ToolboxPanel'
                      }, {
                          type: 'layoutPanel',
                          title: 'Help',
                          contentContainer: 'HelpPanel'
                      }]
                  }, {
                      type: 'layoutGroup',
                      orientation: 'vertical',
                      width: 400,
                      items: [{
                          type: 'documentGroup',
                          height: 400,
                          minHeight: 200,
                          items: [{
                              type: 'documentPanel',
                              title: 'Document 1',
                              contentContainer: 'Document1Panel'
                          }, {
                              type: 'documentPanel',
                              title: 'Document 2',
                              contentContainer: 'Document2Panel'
                          }]
                      }, {
                          type: 'tabbedGroup',
                          height: 200,
                          pinnedHeight: 30,
                          items: [{
                              type: 'layoutPanel',
                              title: 'Error List',
                              contentContainer: 'ErrorListPanel'
                          }]
                      }]
                  }, {
                      type: 'tabbedGroup',
                      width: 220,
                      minWidth: 200,
                      items: [{
                          type: 'layoutPanel',
                          title: 'Solution Explorer',
                          contentContainer: 'SolutionExplorerPanel'
                      }, {
                          type: 'layoutPanel',
                          title: 'Properties',
                          contentContainer: 'PropertiesPanel'
                      }]
                  }]
              }, {
                  type: 'floatGroup',
                  width: 200,
                  height: 200,
                  position: {
                      x: 150,
                      y: 150
                  },
                  items: [{
                      type: 'layoutPanel',
                      title: 'Output',
                      contentContainer: 'OutputPanel'
                  }]
              }];
              $('#jqxDockingLayout').jqxDockingLayout({ theme: 'energyblue', width: 700, height: 600, layout: layout });
          });
      </script>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
  <body>
      <div id="jqxDockingLayout">
          <!--autoHideGroup-->
          <div data-container="ToolboxPanel">
              List of tools</div>
          <div data-container="HelpPanel">
              Help topics</div>
          <!--documentGroup-->
          <div data-container="Document1Panel">
              Document 1 content</div>
          <div data-container="Document2Panel">
              Document 2 content</div>
          <!--bottom tabbedGroup-->
          <div data-container="ErrorListPanel">
              List of errors</div>
          <!--right tabbedGroup-->
          <div data-container="SolutionExplorerPanel">
              Solution structure</div>
          <div data-container="PropertiesPanel">
              List of properties</div>
          <!--floatGroup-->
          <div data-container="OutputPanel">
              Output</div>
      </div>
  </body>
  </html>