forked from cocoo/easyui-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlayout.html
221 lines (203 loc) · 20.5 KB
/
layout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">
<h3>Layout</h3>
<p>Override defaults with $.fn.layout.defaults.</p>
<p>
The layout is the container that has up to five regions: north, south, east, west and center.
The center region panel is required but edge region panel is optional.
Every edge region panel can be resized by dragging its border,
they also can be collapsed by clicking on its collapsing trigger.
The layout can be nested, thus users can build what complex layout he wants.
</p>
<img src="images/layout.png">
<h4>Dependencies</h4>
<ul>
<li>panel</li>
<li>resizable</li>
</ul>
<h4>Usage Example</h4>
<h5>Create Layout</h5>
<p>1. Create Layout via markup.</p>
<p>Add 'easyui-layout' class to <div/> markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"cc"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-layout"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:600px;height:400px;"</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'north',title:'North Title',split:true"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"height:100px;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'south',title:'South Title',split:true"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"height:100px;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'east',iconCls:'icon-reload',title:'East',split:true"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'west',title:'West',split:true"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'center',title:'center title'"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"padding:5px;background:#eee;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-layout" style="display: none;"> <div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
</textarea>
<p>2. Create layout on whole page.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">body</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-layout"</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'north',title:'North Title',split:true"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"height:100px;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'south',title:'South Title',split:true"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"height:100px;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'east',iconCls:'icon-reload',title:'East',split:true"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'west',title:'West',split:true"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:100px;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'center',title:'center title'"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"padding:5px;background:#eee;"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-layout" style="display: none;"> <body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
</textarea>
<p>3. Create nested layout.</p>
<p>Notice that the west panel of inner layout is collapsed.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">body</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-layout"</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'north'"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"height:100px"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'center'"</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-layout"</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"fit:true"</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'west',collapsed:true"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:180px"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'center'"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-layout" style="display: none;"> <body class="easyui-layout">
<div data-options="region:'north'" style="height:100px"></div>
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',collapsed:true" style="width:180px"></div>
<div data-options="region:'center'"></div>
</div>
</div>
</body>
</textarea>
<p>4. Loading content with ajax</p>
<p>
The layout is created based on panel. Each region panel provides built-in support for
asynchronously loading content from URLs.
Using the async loading technology, users can make their layout page display more faster.
</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">body</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-layout"</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'west',href:'west_content.php'"</span><span> </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:180px"</span><span> </span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class="alt"><span> <span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">data-options</span><span>=</span><span class="attribute-value">"region:'center',href:'center_content.php'"</span><span> </span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span></span></li><li class=""><span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span></li></ol></div><textarea class="html" name="code-layout" style="display: none;"> <body class="easyui-layout">
<div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
<div data-options="region:'center',href:'center_content.php'" ></div>
</body>
</textarea>
<br>
<h5>Collpase Layout Panel</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#cc'</span><span>).layout(); </span></span></li><li class=""><span><span class="comment">// collapse the west panel</span><span> </span></span></li><li class="alt"><span>$(<span class="string">'#cc'</span><span>).layout(</span><span class="string">'collapse'</span><span>,</span><span class="string">'west'</span><span>); </span></span></li></ol></div><textarea class="js" name="code-layout" style="display: none;"> $('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');
</textarea>
<br>
<h5>Add west region panel with tool buttons</h5>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#cc'</span><span>).layout(</span><span class="string">'add'</span><span>,{ </span></span></li><li class=""><span> region: <span class="string">'west'</span><span>, </span></span></li><li class="alt"><span> width: 180, </span></li><li class=""><span> title: <span class="string">'West Title'</span><span>, </span></span></li><li class="alt"><span> split: <span class="keyword">true</span><span>, </span></span></li><li class=""><span> tools: [{ </span></li><li class="alt"><span> iconCls:<span class="string">'icon-add'</span><span>, </span></span></li><li class=""><span> handler:<span class="keyword">function</span><span>(){alert(</span><span class="string">'add'</span><span>)} </span></span></li><li class="alt"><span> },{ </span></li><li class=""><span> iconCls:<span class="string">'icon-remove'</span><span>, </span></span></li><li class="alt"><span> handler:<span class="keyword">function</span><span>(){alert(</span><span class="string">'remove'</span><span>)} </span></span></li><li class=""><span> }] </span></li><li class="alt"><span>}); </span></li></ol></div><textarea class="js" name="code-layout" style="display: none;"> $('#cc').layout('add',{
region: 'west',
width: 180,
title: 'West Title',
split: true,
tools: [{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-remove',
handler:function(){alert('remove')}
}]
});
</textarea>
<p> </p>
<h4>Layout Options</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>fit</td>
<td>boolean</td>
<td>
Set to true to set the layout size fit its parent container.
When creating layout on 'body' tag, it will be auto maximized to the full size of whole page.
</td>
<td>false</td>
</tr>
</tbody></table>
<h4>Region Panel Options</h4>
<p>
The region panel options is defined in panel component, below is some common and added properties:
</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>The layout panel title text.</td>
<td>null</td>
</tr>
<tr>
<td>region</td>
<td>string</td>
<td>Defines the layout panel position, the value is one of following: north, south, east, west, center.</td>
<td></td>
</tr>
<tr>
<td>border</td>
<td>boolean</td>
<td>True to show layout panel border.</td>
<td>true</td>
</tr>
<tr>
<td>split</td>
<td>boolean</td>
<td>True to show a split bar which user can change the panel size.</td>
<td>false</td>
</tr>
<tr>
<td>iconCls</td>
<td>string</td>
<td>An icon CSS class to show a icon on panel header.</td>
<td>null</td>
</tr>
<tr>
<td>href</td>
<td>string</td>
<td>An URL to load data from remote site.</td>
<td>null</td>
</tr>
</tbody></table>
<h4>Methods</h4>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>resize</td>
<td>none</td>
<td>Set the layout size.</td>
</tr>
<tr>
<td>panel</td>
<td>region</td>
<td>Return the specified panel, the 'region' parameter possible values:'north','south','east','west','center'.</td>
</tr>
<tr>
<td>collapse</td>
<td>region</td>
<td>Collapse the specified panel, the 'region' parameter possible values:'north','south','east','west'.</td>
</tr>
<tr>
<td>expand</td>
<td>region</td>
<td>Expand the specified panel, the 'region' parameter possible values:'north','south','east','west'.</td>
</tr>
<tr>
<td>add</td>
<td>options</td>
<td>
Add a specified panel, the options parameter is a config object, see tab panel properties for more details.
</td>
</tr>
<tr>
<td>remove</td>
<td>region</td>
<td>Remove the specified panel, the 'region' parameter possible values:'north','south','east','west'.</td>
</tr>
</tbody></table>
</div>
</body>
</html>