jQuery diseño EasyUI - crear una frontera para el diseño de página
BorderLayout (BorderLayout) ofrece cinco regiones: este, oeste, norte, sur, centro. Éstos son algunos usos comunes:
- zona norte se puede utilizar para mostrar los rótulos sitio.
- zona sur se puede utilizar para mostrar los derechos de autor y algunas instrucciones.
- zona oeste se puede utilizar para visualizar el menú de navegación.
- zona este puede ser utilizado para mostrar algunos artículos de promoción.
- área central se puede utilizar para mostrar la página principal.
Para aplicar la disposición (layout), debe determinar un contenedor de diseño (diseño), y luego definir algunas áreas. Diseño (diseño) debe requerir al menos una región central, la siguiente es una disposición (layout) Ejemplo:
<Class = estilo "easyui-diseño" Div = "width: 400px; altura: 200px;"> <Región Div = "oeste" split = "true" title = estilo "Navigator" = "width: 150px;"> <P style = "padding: 5px; margin: 0;"> Seleccionar idioma: </ 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> <Id = "contenido" región = title = estilo de "Idioma" "centro" Div = "padding: 5px;"> </ Div> </ Div>
Creamos un <div> contenedor con un diseño de frontera (BorderLayout), diseño (diseño) del recipiente se corta en dos partes, la izquierda es el menú de navegación de la derecha es el contenido principal.
Por último, se escribe un controlador de eventos onclick para recuperar los datos, la función 'showcontent' es muy simple:
función showcontent (idioma) { . $ ( '# Contenido') html ( "Introducción a '+ lengua +' lenguaje '); }