jQuery EasyUI Layout -Crear panel lateral estilo XP

Normalmente, en las carpetas del Explorador de Windows XP, el panel (panel) izquierdo contiene algunas tareas comunes. Este tutorial le muestra cómo crear un panel lateral XP mediante el plugin de panel (panel) de EasyUI.

Definir algunos paneles (panel)

Definimos algunos paneles (panel), que se utilizan para mostrar algunas tareas. Cada panel (panel) debe tener al menos botones de herramienta para contraer/expandir.

El código se muestra a continuación:

    <div style="width:200px;height:auto;background:#7190E0;padding:5px;">
        <div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
            View as a slide show<br/>
            Order prints online<br/>
            Print pictures
        </div>
        <br/>
        <div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
            Make a new folder<br/>
            Publish this folder to the Web<br/>
            Share this folder
        </div>
        <br/>
        <div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
            New York<br/>
            My Pictures<br/>
            My Computer<br/>
            My Network Places
        </div>
        <br/>
        <div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;">
            My documents<br/>
            File folder<br/><br/>
            Date modified: Oct.3rd 2010
        </div>
    </div>

Personalizar la apariencia del panel (panel)

Tenga en cuenta que esta apariencia no es la que queremos; debemos cambiar la imagen de fondo del encabezado del panel (panel) y los iconos de los botones de contraer/expandir.

Hacer esto no es difícil; solo necesitamos redefinir algunos CSS.

    .panel-body{
        background:#F0F0F0;
    }
    .panel-header{
        background:#fff url('images/panel_header_bg.gif') no-repeat top right;
    }
    .panel-tool-collapse{
        background:url('images/arrow_up.gif') no-repeat 0px -3px;
    }
    .panel-tool-expand{
        background:url('images/arrow_down.gif') no-repeat 0px -3px;
    }

Por lo tanto, definir la interfaz de usuario con EasyUI es muy sencillo.

Descargar ejemplos de jQuery EasyUI

jeasyui-layout-xp.zip