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.