jQuery EasyUI Layout - Erstellen komplexer Layouts in der Platte
Panel (Panel) können Sie benutzerdefinierte Layouts für eine Vielzahl von Zwecken zu schaffen. In diesem Beispiel verwenden wir ein Panel (Panel) und Layout (Layout) Plug-in ein msn Meldungsfeld zu erstellen.
Wir verwenden mehrere Layouts (Layout) im Bereich der Platte. An der Spitze der Message-Box legen wir eine Abfrage-Eingabefeld, und legen Sie eine Figur auf dem rechten Bild. In der Mitte unserer Region durch die Split-Eigenschaft wahr ist, wurde dieser Teil in zwei Teile geschnitten, ermöglicht es Benutzern, die Größe des Panels Bereich zu ändern.
Hier ist der gesamte Code:
<Div class = "easyui-Panel" title = "Komplexe Panel-Layout" iconCls = "icon-Suche" zusammenklappbar = "true" style = "padding: 5px; width: 500px; height: 250px;"> <Div class = "easyui-Layout" fit = "true"> <Div region = "nördlich" border = "false" class = "p-Suche"> <Label> Suche: </ label> <input> </ input> </ Div> <Div region = "center" border = "false"> <Div class = "easyui-Layout" fit = "true"> <Div region = "östlich" border = "false" class = "p-right"> <Img src = "images / msn.gif" /> </ Div> <Div region = "center" border = "false" style = "border: 1px solid #ccc;"> <Div class = "easyui-Layout" fit = "true"> <Div region = "südlich" split = "true" border = "false" style = "height: 60px;"> <Textarea style = "border: 0; Breite: 100%; height: 100%; die Größe: none">. Hallo, ich bin easyui </ textarea> </ Div> <Div region = "center" border = "false"> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div>
Wir brauchen keine JavaScript-Code zu schreiben, dass sie eine sehr starke Design der Benutzeroberfläche.