UILayout is a jQuery-based layout framework. Its core is a size-adaptive center panel. The top, bottom, and left sides of the Panel can be placed in a Foldable, scalable panel, for more information, see Layout, A jQuery-based Layout framework on the project homepage: http://layout.jquery-dev.net /. The reference prototype of this framework is border-layout of ExtJS. Therefore, it is very suitable for converting existing projects using ExtJS into jQuery projects. Its core is a self-adaptive center panel (required). The top, bottom, and left sides of the Panel can be placed in a Foldable, scalable Panel (optional ), you can add any number of headers and footer panels for each panel. UI Layout supports nesting of the inner Layout. Any block element can be used as the Layout container. The most basic Layout container is the body.
Basic usage: Get the container element and call the layout method. You can pass in the configuration parameters (optional) options:
$ ('Body'). layout ([options]); normally, layout references are retained to further control the layout through code.
The Code is as follows:
Var myLayout = $ ('body'). layout ();
// Read layout configuration options
Var is_west_resizable = myLayout. options. west. resizable;
Var north_maxHeight = myLayout. options. north. maxSize;
// Call the layout Function
MyLayout. toggle ("north ");
MyLayout. sizePane ("west", 300 );
// Call the layout tool
MyLayout. addPinBtn ("# myPinButton", "west ");
MyLayout. allowOverflow ("north ");
All panels are based on existing HTML elements, while the ancillary components of the panel (scale and collapse switch) are automatically generated p elements with corresponding class attributes added. Almost all panel elements must be the direct sub-elements of container elements, and form containers are an exception. You can assign the default class name or custom class name and id to the corresponding HTML element to specify the layout panel. The following is an intuitive example:
The Code is as follows:
$ (Document). ready (function (){
$ ("Body"). layout ({
/*
East & west panes require 'id' selectors
Because they are 'nested inside a P'
*/
West _ paneSelector: "# west"
, East _ paneSelector: "# east"
/*
North & south panes are 'children of body'
*/
, North _ paneSelector: ". ui-layout-north" // default configuration, which can be omitted
, South _ paneSelector: ". myclass-south"
/*
Center pane is a 'child of the first form'
Default-selector shown just for reference
*/
, Center _ paneSelector: ". ui-layout-center" // default configuration, which can be omitted
});
});
Corresponding page:
The Code is as follows:
North
South
West
East
In this example, the layout container is the body, the south and North panels are the direct sub-elements of the container, and the south Panel uses the custom class name "myclass-south ", you must specify the jQuery selector in the layout parameter south _ paneSelector. The default class name "ui-layout-north" is used for the north panel ". The east and west panels are not the direct sub-elements of the container. You must specify the id to identify them (class selectors cannot be used), and specify the corresponding id in the layout parameter "west _ paneSelector. The central panel is nested in form. In this case, the Panel can be identified by default class name or custom class name. You can use a custom class selector only when a Panel meets the following two conditions. Otherwise, you can only use the id selector for recognition: 1. The Panel is the direct child element of the form. 2. The form is the direct child element of the container and the first form in the container.
The gap between panels forms the side of the Panel. The Edge concept is relative to the upper, lower, and left sides of the Panel. Because you can set the side of the drag panel to scale the corresponding panel, therefore, these edges are called "zooming". A folding switch is usually attached to the zooming to fold and open the panel. When there is no gap between the two panels, the zooming and folding switches disappear. When the Panel is opened and folded, the width of the scale can be specified as different values. The preceding example is as follows:
