Widget de layout jQuery EasyUI - Layout Layout
jQuery EasyUI plug-in Por $ .fn.layout.defaults substituir os padrões predefinidos.
Layout (layout) é um recipiente com cinco regiões (Norte norte, sul sul, Eastern leste, oeste e centro-oeste Central) de. A região central do painel é requerido, a região de bordo do painel é opcional. Cada região borda do painel pode ser redimensionada arrastando o quadro a ser dobrado, clicando no gatilho para recolher o painel. Layout (layout) podem ser aninhados, assim os usuários podem criar layouts complexos.
depender
- painel
- redimensionável
uso
Criar layout (Layout)
1, crie as tags (layout) de layout.
Adicionar classe "-disposição easyui 'para a tag <div>.
<Div id = classe "cc" = "layout easyui" style = "width: 600px; height: 400px;">
<Div-opções de dados = "região: 'norte', título: 'North Título', divisão: true" style = "height: 100px;"> </ div>
<-Opções de dados Div = "região:" sul ", título: 'South Título', dividido: true" style = "height: 100px;"> </ div>
<-Opções de dados Div = "região: 'leste', título:" Oriente ", dividido: true" style = "width: 100px;"> </ div>
<-Opções de dados Div = "região:" Ocidente ", título:" Ocidente ", dividido: true" style = "width: 100px;"> </ div>
<-Opções de dados Div = "região:" centro ", título: 'title centro" "style =" padding: 5px; background: #eee; "> </ div>
</ Div>
2, criar o layout (Layout) em toda a página.
<Class corpo = "easyui layout">
<Div-opções de dados = "região: 'norte', título: 'North Título', divisão: true" style = "height: 100px;"> </ div>
<-Opções de dados Div = "região:" sul ", título: 'South Título', dividido: true" style = "height: 100px;"> </ div>
<-Opções de dados Div = "região: 'leste', título:" Oriente ", dividido: true" style = "width: 100px;"> </ div>
<-Opções de dados Div = "região:" Ocidente ", título:" Ocidente ", dividido: true" style = "width: 100px;"> </ div>
<-Opções de dados Div = "região:" centro ", título: 'title centro" "style =" padding: 5px; background: #eee; "> </ div>
</ Body>
3, criar um layout aninhada.
Note que o layout interno dos painéis de West End são dobrados.
<Class corpo = "easyui layout">
<-Opções de dados Div = "região: 'norte'" style = "height: 100px"> </ div>
<-Opções de dados Div = "região:" centro "">
<div class = "layouts easyui"-opções de dados = "fit: true">
<Div-opções de dados = "região:" Ocidente ", entrou em colapso: true" style = "width: 180px"> </ div>
<-Opções de dados Div = "região:" centro ""> </ div>
</ Div>
</ Div>
</ Body>
4, o conteúdo de carga via ajax.
Esquema (layout) baseia-se no painel (o painel) o foi criado. Cada área do painel para proporcionar apoio interno para a carga dinâmica de conteúdo de URL. Use a tecnologia de carregamento dinâmico, os usuários podem fazer o seu layout de página exibido mais rápido.
<Class corpo = "easyui layout">
<-Opções de dados Div = "região: 'west', href: 'west_content.php'" style = "width: 180px"> </ div>
<-Opções de dados Div = "região:" centro ", href: 'center_content.php" "> </ div>
</ Body>
layout de painel de dobramento (collpase layout do painel)
. $ ( '# Cc') layout (); // Recolher o painel de oeste . $ ( '# Cc') layout ( 'colapso', 'ocidental');
Botão para adicionar uma ferramenta pelo painel Ocidental
$ ( "# Cc '). Layout (' add ', {
Região: 'west',
width: 180,
Título: 'Oeste Título',
Split: verdadeiro,
ferramentas: [{
iconCls: 'icon-add',
handler: function () {alert ( 'add')}
}, {
iconCls: 'icon-remove',
handler: function () {alert ( 'remover')}
}]
});
Opções de layout (Opções de layout)
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| fit | boolean | 当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。 | false |
Opções Painel Regional (Região Opções do Painel)
Opções Painel Regional (Opções do Painel Região) é definida no componente de painel (painel), a seguir, algumas propriedades comuns e novas:
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| 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 |
caminho
| 名称 | 参数 | 描述 |
|---|---|---|
| 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 EasyUI plug-in