jQuery EasyUI Layout - creare layout complessi nel pannello
Pannello (pannello) consente di creare layout personalizzati per una varietà di scopi. In questo esempio, si usa un pannello (pannello) e il layout (layout) plug-in per creare una finestra di messaggio MSN.
Usiamo più layout (layout) nella zona del pannello. Nella parte superiore della finestra di messaggio che mettere una casella di input di query, e poniamo una figura sulla foto a destra. Nel mezzo della nostra regione impostando la proprietà spaccatura è vero, questa parte è stato tagliato in due parti, permette agli utenti di modificare la dimensione dell'area pannello.
Ecco tutto il codice:
<Div class = titolo "easyui-pannello" = "iconCls layout del pannello Complesso" = "icona-ricerca" pieghevole = "true" style = "padding: 5px; width: 500px; height: 250px;"> <Div class = "easyui-layout di" fit = "true"> <Regione Div = "nord" border = "false" class = "p-ricerca"> <Label> Ricerca: </ label> <input> </ input> </ Div> <Regione Div = "center" border = "false"> <Div class = "easyui-layout di" fit = "true"> <Regione Div = "est" border = "false" class = "p-destra"> <Img src = "images / msn.gif" /> </ Div> <Regione Div = "center" border = stile "false" = "border: 1px solid #ccc;"> <Div class = "easyui-layout di" fit = "true"> <Regione Div = "sud" split = "true" border = stile "false" = "height: 60px;"> <Style Textarea = "border: 0; width: 100%; height: 100%; ridimensionare: none">. Ciao, sono easyui </ textarea> </ Div> <Regione Div = "center" border = "false"> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div>
Non abbiamo bisogno di scrivere alcun codice JavaScript che hanno un design molto potente dell'interfaccia utente.