1. Home
  2. jQuery EasyUI Disposición - crear la izquierda panel de estilo XP

El mejor tutorial de jQuery EasyUI Disposición - crear la izquierda panel de estilo XP en 2024. En este tutorial podrás aprender Descargar ejemplos de jQuery EasyUI,

jQuery EasyUI Disposición - crear la izquierda panel de estilo XP

En circunstancias normales, la carpeta de archivos de Windows XP Explorer, el panel (panel) en el lado izquierdo contiene algunas tareas comunes. En este tutorial se muestra cómo easyui Panel (panel) plugin para crear XP izquierda del panel.

Definir Panel (panel)

Definimos algunos Panel (panel), estos paneles (panel) para mostrar el número de tareas. Cada panel (panel) debe tener al menos botón de la herramienta de plegado / desplegado.

Código de la siguiente manera: 

	<Div style = "width: 200px; height: auto; background: # 7190E0; padding: 5px;">
		<Div class = "de pantalla easyui" title = "Tareas de imágenes" colapsable = "true" style = "width: 200px; height: auto; padding: 10px;">
			Ver como una presentación de diapositivas <br/>
			solicite impresiones en línea <br/>
			Imprime las imágenes
		</ Div>
		<br/>
		<Div class = "de pantalla easyui" title = "Tareas de archivo y carpeta" colapsable = "true" style = "width: 200px; height: auto; padding: 10px;">
			Hacer una nueva carpeta <br/>
			Publicar esta carpeta en la Web <br/>
			Compartir esta carpeta
		</ Div>
		<br/>
		<Div class = "del panel easyui" title = plegable = "true" colapsado = estilo "verdadero" "Otros sitios" = "width: 200px; height: auto; padding: 10px;">
			<br/> New York
			Mi <br/> Fotos
			Mi ordenador <br/>
			Mis sitios de red
		</ Div>
		<br/>
		<Div class = "del panel easyui" title = = plegable estilo "verdadero" "Detalles" = "width: 200px; height: auto; padding: 10px;">
			Mis documentos <BR/>
			Archivo de carpetas <br/>
			Fecha de modificación: Oct.3rd 2010
		</ Div>
	</ Div>

panel personalizado (el panel) de la apariencia

Tenga en cuenta que esta vista de la apariencia no es lo que queremos, tenemos que cambiar el panel (panel) Imagen fondo de la cabecera y el colapso / ampliar botón de icono.

No es difícil de hacer, que tenemos que hacer es redefinir algunos de los CSS. 

	.panel-body {
		background: # f0f0f0;
	}
	.panel-header {
		background: url #fff ( 'images / panel_header_bg.gif') no-repeat arriba a la derecha;
	}
	.panel-herramienta-colapso {
		background: url ( 'images / arrow_up.gif') no-repeat 0px -3px;
	}
	.panel-herramienta-{ampliar
		background: url ( 'images / arrow_down.gif') no-repeat 0px -3px;
	}

Por lo tanto, la interfaz de usuario personalizada easyui uso es muy simple.

Descargar ejemplos de jQuery EasyUI

jeasyui-layout-xp.zip

Hot Tutorials

Contact US

jQuery EasyUI Disposición - crear la izquierda panel de estilo XP
10/30