In this example, the layout container is the body, the south and north panels are direct child elements of the container, and the south panel uses the custom class name "myclass-south", which needs to be The jQuery selector is specified in the layout parameter south__paneSelector; the north panel uses the default class name "ui-layout-north". The east and west panels are not direct child elements of the container and need to be identified by specifying an id (class selectors cannot be used), and the corresponding id must be specified in the layout parameter "west__paneSelector". The center panel is nested in the form. At this time, the panel can be identified using the default class name or a custom class name. A custom class selector can be used when a panel meets the following two conditions. Otherwise, it can only be identified by the id selector: 1. The panel is a direct child element of the form. 2. The form is a direct child element of the container, and is The first form in the container.

The gaps between panels constitute the edges of the panels. The concept of edges is relative to the panels in the up, down, left and right directions. Since the edges of the panels can be set and dragged to achieve the scaling of the corresponding panels, these edges are called It is a "zoomizer"; there is usually a folding switch attached to the zoomer that is responsible for folding and opening the panel. When there is no space between the two panels, the scaler and fold switch disappear. The width of the scaler can be specified as different values ​​in the open and collapsed states of the panel. The rendering of the above example is as follows: