1. Home
  2. layout do jQuery EasyUI - criar uma borda para o layout da página

O melhor tutorial layout do jQuery EasyUI - criar uma borda para o layout da página em 2024. Neste tutorial você pode aprender Baixar exemplos jQuery EasyUI,

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 +);
	}

Baixar exemplos jQuery EasyUI

jeasyui-layout-layout.zip

Tutoriais quentes

Contact US

layout do jQuery EasyUI - criar uma borda para o layout da página
10/30