jQuery EasyUI Diseño -Crear diseños complejos en paneles
El panel (Panel) le permite crear diseños personalizados para múltiples propósitos. En este ejemplo, usamos los complementos de panel (panel) y diseño (layout) para crear un cuadro de mensajes de MSN.
Usamos múltiples diseños (layout) en los paneles de región. En la parte superior del cuadro de mensajes colocamos un campo de entrada de consulta y a la derecha una imagen de persona. En el área central, establecemos la propiedad split en true para dividir esa parte en dos secciones, permitiendo al usuario cambiar el tamaño de los paneles de región.
El siguiente es todo el código:
<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;"> <div class="easyui-layout" fit="true"> <div region="north" border="false" class="p-search"> <label>Search:</label><input></input> </div> <div region="center" border="false"> <div class="easyui-layout" fit="true"> <div region="east" border="false" class="p-right"> <img src="images/msn.gif.html"/> </div> <div region="center" border="false" style="border:1px solid #ccc;"> <div class="easyui-layout" fit="true"> <div region="south" split="true" border="false" style="height:60px;"> <textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea> </div> <div region="center" border="false"> </div> </div> </div> </div> </div> </div> </div>
No necesitamos escribir ningún código JavaScript; tiene funciones muy potentes para diseñar interfaces de usuario.
Descargar ejemplos de jQuery EasyUI
jeasyui-layout-panel.zip
Otras extensiones