layout do jQuery EasyUI - criar uma borda para o layout da página
layout de borda (layout de borda) oferece cinco regiões: leste, oeste, norte, sul, centro. Aqui estão alguns usos comuns:
- zona norte pode ser usado para exibir local banners.
- sul área pode ser usada para exibir direitos de autor e algumas instruções.
- zona oeste pode ser usado para exibir o menu de navegação.
- zona leste pode ser usado para exibir alguns itens promocionais.
- área central pode ser usado para exibir o conteúdo principal.
Para aplicar o layout (layout), você deve determinar um recipiente (layout) layout, e depois definir algumas áreas. Layout (layout) deve exigir, pelo menos, uma região centro, o seguinte é um layout (layout) Exemplo:
<Div class = "layout easyui" style = "width: 400px; height: 200px;">
<Region Div = "oeste" split = "true" title = "Navigator" style = "width: 150px;">
<P style = "padding: 5px; margin: 0;"> Select language: </ p>
<Ul>
<Li> <a href="javascript:void(0)" onclick="showcontent('java')"> Java </a> </ li>
<Li> <a href="javascript:void(0)" onclick="showcontent('cshape')"> C # </a> </ li>
<Li> <a href="javascript:void(0)" onclick="showcontent('vb')"> VB </a> </ li>
<Li> <a href="javascript:void(0)" onclick="showcontent('erlang')"> Erlang </a> </ li>
</ Ul>
</ Div>
<Div id = "content" região = "center" title = "Language" style = "padding: 5px;">
</ Div>
</ Div>
Criamos um <div> recipiente com um layout fronteira (layout de borda), a disposição (layout) do recipiente é cortado em duas partes, a esquerda é o menu de navegação à direita é o conteúdo principal.
Finalmente, escrever um manipulador de eventos onclick para recuperar os dados, a função 'showContent' é muito simples:
showContent função (idioma) {
. $ ( '# Content') html ( 'Introdução ao' 'linguagem' + linguagem +);
}