jQuery EasyUI Disposición - crear diseños complejos en el panel
Panel (panel) le permite crear diseños personalizados para una variedad de propósitos. En este ejemplo, se utiliza un panel (panel) y el diseño (diseño) plug-in para crear un cuadro de mensaje msn.
Utilizamos varios diseños (diseño) en el área del panel. En la parte superior del cuadro de mensaje se coloca un cuadro de entrada de consulta, y colocar una figura de la imagen de la derecha. En medio de nuestra región, estableciendo la propiedad de división es cierto, esta parte fue cortada en dos partes, permite a los usuarios cambiar el tamaño del área del panel.
Aquí está todo el código:
<Div class = "del panel easyui" title = "iconCls Complejo panel de diseño" = "icono de búsqueda" colapsable = estilo "verdadera" = "padding: 5px; ancho: 500px; altura: 250px;"> <Div class = "easyui-diseño" encaja = "true"> <Región Div = "norte" border = "false" class = "p-búsqueda"> <Label> Buscar: </ label> <input> </ input> </ Div> <Región Div = "center" border = "true"> <Div class = "easyui-diseño" encaja = "true"> <Región Div = "este" border = "false" class = "p-derecha"> <Img src = "images / msn.gif" /> </ Div> <Región Div = "center" border = estilo de "falsa" = "border: 1px #ccc sólido;"> <Div class = "easyui-diseño" encaja = "true"> <Región Div = "sur" split = "true" border = estilo de "falsa" = "height: 60px;"> <Style Textarea = "border: 0; width: 100%; altura: 100%; redimensionar: none">. Hola, soy easyui </ textarea> </ Div> <Región Div = "center" border = "true"> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div>
No necesitamos que escribir ningún código javascript que tienen un diseño muy potente de la interfaz de usuario.