jQuery EasyUI Layout-Widget - Layout Layout
jQuery Plugin EasyUI Mit $ außer Kraft setzen .fn.layout.defaults die Standardeinstellungen zurück.
Layout (Layout) ist ein Container mit fünf Regionen (Nord Nord, Süd Süd, Ost-Ost, West und West Central Mitte) von. Der mittlere Bereich des Paneels erforderlich ist, der Randbereich des Paneels ist optional. Jeder Randbereich der Platte kann durch Ziehen des Rahmens der Größe verändert werden, indem Sie auf den Auslöser gefaltet werden, um die Platte zu kollabieren. Layout (Layout) können verschachtelt werden, so dass die Benutzer komplexe Layouts erstellen können.
Verlassen Sie sich
- Platte
- resizable
Verwendung
Layout erstellen (Layout)
1, erstellen Sie das Layout (Layout) Tags.
Add 'easyui-Layout "Klasse dem <div> Tag.
<Div id = "cc" class = "easyui-Layout" style = "width: 600px; height: 400px;">
<Div Daten-Optionen = "Region: 'N', Titel: 'Nord Titel', Split: true" style = "height: 100px;"> </ div>
<Div Daten-Optionen = "Region: 'Süden', Titel: 'Süd Titel', Split: true" style = "height: 100px;"> </ div>
<Div Daten-Optionen = "Region: 'O', Titel: 'Ost', Split: true" style = "width: 100px;"> </ div>
<Div Daten-Optionen = "Region: 'W', Titel:" West ", Split: true" style = "width: 100px;"> </ div>
<Div Daten-Optionen = "Region:" Zentrum ", Titel: 'Mitte Titel'" style = "padding: 5px; Hintergrund: #Eee;"> </ div>
</ Div>
2, erstellen Sie das Layout (Layout) auf der gesamten Seite.
<Body class = "easyui-Layout">
<Div Daten-Optionen = "Region: 'N', Titel: 'Nord Titel', Split: true" style = "height: 100px;"> </ div>
<Div Daten-Optionen = "Region: 'Süden', Titel: 'Süd Titel', Split: true" style = "height: 100px;"> </ div>
<Div Daten-Optionen = "Region: 'O', Titel: 'Ost', Split: true" style = "width: 100px;"> </ div>
<Div Daten-Optionen = "Region: 'W', Titel:" West ", Split: true" style = "width: 100px;"> </ div>
<Div Daten-Optionen = "Region:" Zentrum ", Titel: 'Mitte Titel'" style = "padding: 5px; Hintergrund: #Eee;"> </ div>
</ Body>
3, erstellen Sie eine verschachtelte Layout.
Beachten Sie, dass die interne Aufteilung der West End Platten gefaltet werden.
<Body class = "easyui-Layout">
<Div Daten-Optionen = "Region: 'N'" style = "height: 100px"> </ div>
<Div Daten-Optionen = "Region:" Zentrum "">
<Div class = "easyui-Layout" Daten-Optionen = "fit: true">
<Div Daten-Optionen = "Region:" west ", brach: true" style = "width: 180px"> </ div>
<Div Daten-Optionen = "Region:" Zentrum ""> </ div>
</ Div>
</ Div>
</ Body>
4, Last-Gehalt über Ajax.
Layout (Layout) basiert auf der Platte (Platte) wurde erstellt. Jeder Bereich des Paneels eingebaut in bieten Unterstützung für das dynamische Laden von Inhalten von URL. Verwenden Sie das dynamische Laden Technologie können Anwender ihre Seitenlayout machen schneller angezeigt.
<Body class = "easyui-Layout">
<Div Daten-Optionen = "Region: 'west', href: 'west_content.php'" style = "width: 180px"> </ div>
<Div Daten-Optionen = "Region:" Zentrum ", href: 'center_content.php'"> </ div>
</ Body>
Folding Panel-Layout (Collpase Layout-Panel)
. $ ( '# Cc') Layout (); // Reduzieren Sie den Westen Panel . $ ( '# Cc') Layout ( 'Zusammenbruch', 'West');
Knopf ein Werkzeug durch Western-Panel hinzufügen
$ ( '# Cc'). Layout ( 'add', {
Region: 'W',
Breite: 180,
Titel: 'West-Titel',
Split: true,
Werkzeuge: [{
iconCls: 'icon-Add'
Handler: function () {alert ( 'Add')}
}, {
iconCls: 'icon-entfernen',
Handler: function () {alert ( 'entfernen')}
}]
});
Layoutoptionen (Layout-Optionen)
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| fit | boolean | 当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。 | false |
Regional-Fenster-Optionen (Region Panel-Optionen)
Regional-Fenster-Optionen (Region Panel-Optionen) wird im Panel (Panel) Komponente definiert, die folgenden sind einige der häufigsten und neue Eigenschaften:
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 布局面板（layout panel）的标题文本。 | null |
| region | string | 定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。 | |
| border | boolean | 当设置为 true 时，就显示布局面板（layout panel）的边框。 | true |
| split | boolean | 当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。 | false |
| iconCls | string | 在面板（panel）头部显示一个图标的 CSS class。 | null |
| href | string | 从远程站点加载数据的 URL 。 | null |
| collapsible | boolean | 定义是否显示可折叠按钮。 | true |
| minWidth | number | 面板（panel）最小宽度。 | 10 |
| minHeight | number | 面板（panel）最小高度。 | 10 |
| maxWidth | number | 面板（panel）最大宽度。 | 10000 |
| maxHeight | number | 面板（panel）最大高度。 | 10000 |
Weg
| 名称 | 参数 | 描述 |
|---|---|---|
| resize | none | 设置布局（layout）的尺寸。 |
| panel | region | 返回指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'、'center'。 |
| collapse | region | 折叠指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'。 |
| expand | region | 展开指定的面板（panel），'region' 参数可能的值是：'north'、'south'、'east'、'west'。 |
| add | options | 添加一个指定的面板（panel），options 参数一个配置对象，更多细节请参阅标签页面板（tab panel）属性。 |
| remove | region | 移除指定的面板（panel），'region' 参数可能的值：'north'、'south'、'east'、'west'。 |
jQuery Plugin EasyUI