Section No. 202, JQuery easyui,layout (layout) components

JQuery easyui,layout (Layout) component

Learning Essentials:

1. Loading mode

2. Layout properties

3. Area Panel Properties

4. Method List

This lesson focuses on the use of layout components in Easyui, which relies on panel (panel) components and resizable (resizing) components.

A Load mode

Class Load mode, this property is typically used with the class method

<BodyID= "box"class= "Easyui-layout">    <Divdata-options= "region: ' North ', title: ' Head title ', Split:true"style= "height:100px;"></Div>    <Divdata-options= "region: ' South ', title: ' Bottom title ', Split:true"style= "height:100px;"></Div>    <Divdata-options= "region: ' East ', title: ' Right title ', Split:true"style= "width:100px;"></Div>    <Divdata-options= "region: ' West ', Title: ' Left title ', Split:true"style= "width:100px;"></Div>    <Divdata-options= "Region: ' Center ', title: ' Middle title '"style= "Padding:5px;background: #eee;"></Div></Body>

Layout () executes an element that conforms to the requirements to lay out a method

$ (function  () {    $ (' #box '). Layout ({        //...     });});

Two Layout properties

Fit Boolean If set to True, the layout component will be adaptive to the parent easily. When you create a layout using the body tag, the entire page is automatically maximized. The default is False.

$ (function  () {    $ (' #box '). Layout ({        fit:true    // if set to True, the layout component will be adaptive to the parent easily. When you create a layout using the body tag, the entire page is automatically maximized. The default is False.     });});

Three Area Panel Properties

Generally written in HTML attribute data-options

The area Panel properties are defined with the Panel component type, and the following are public and new properties:

Title String Layout Panel caption text. The default value is null.

    <data-options= "region        : ' North ',        title: ' Head header ',        split:true"          style= "height:100px;" >    </ Div >

Region string defines the layout panel position, available values are: North (top), South (bottom), East (right), West (left), center (middle). The default value is empty.

    <data-options= "Region        : ' North ',        title: ' Head header ',        split:true"          style= "height:100px;" >    </ Div >

Border Boolean is true when the layout panel border is displayed. The default value is true.

    <data-options= "region        : ' North ',        title: ' Head header ',        border:false,        " style = "height:100px;" >    </ Div >

When Split Boolean is true, the user can change the panel size by dividing the bar. The default value is False.

    <data-options= "region        : ' North ',        title: ' Head header ',        split:true,        " style = "height:100px;" >    </ Div >

Iconcls string a CSS class ID that contains an icon that will be displayed on the panel header. The default value is null.

    <data-options= "region        : ' North ',        title: ' Head title ',        iconcls: ' Icon-remove ',        "style=" height:100px; >    </ Div >

href string is used to read the URL link for remote site data. The default value is null. Loading Data

    <data-options= "region        : ' North ',        title: ' Head header ',        href: ' is_user.php ' ,        "style=" height:100px; " >    </ Div >

The collapsible Boolean defines whether the collapse button is displayed. The default value is true.

    <data-options= "region        : ' North ',        title: ' Head header ',        Collapsible:false,        " style = "height:100px;" >    </ Div >

MinWidth number minimum panel width. The default value is 10.

    <data-options= "region        : ' North ',        title: ' Head header ',        minwidth:200,        " style = "height:100px;" >    </ Div >

MinHeight number minimum panel height. The default value is 10.

    <data-options= "region        : ' North ',        title: ' Head header ',        minheight:200,         "style=" height:100px; " >    </ Div >

MaxWidth number maximum panel width. The default value is 10000.

    <data-options= "region        : ' North ',        title: ' Head header ',        maxwidth:200,        " style = "height:100px;" >    </ Div >

MaxHeight number maximum panel height. The default value is 10000.

    <data-options= "region        : ' North ',        title: ' Head header ',        maxheight:200,         "style=" height:100px; " >    </ Div >

Final format

<BodyID= "box" >    <Divdata-options= "region: ' North ', title: ' Head header ', maxheight:200, Split:true,"style= "height:100px;">    </Div>    <Divdata-options= "region: ' South ', title: ' Bottom title ', Split:true"style= "height:100px;"></Div>    <Divdata-options= "region: ' East ', title: ' Right title ', Split:true"style= "width:100px;"></Div>    <Divdata-options= "region: ' West ', Title: ' Left title ', Split:true"style= "width:100px;"></Div>    <Divdata-options= "Region: ' Center ', title: ' Middle title '"style= "Padding:5px;background: #eee;"></Div></Body>

Four Method List

Section No. 202, JQuery easyui,layout (layout) components