jQuery EasyUI Layout - créer des dispositions complexes dans le panneau
Panel (Panel) vous permet de créer des maquettes personnalisées pour une variété de fins. Dans cet exemple, nous utilisons un panneau (panneau) et la mise en page (layout) plug-in pour créer une boîte de message msn.
Nous utilisons plusieurs mises en page (mise en page) dans la zone du panneau. En haut de la boîte de message nous plaçons une zone de saisie de requête et placer une figure sur la photo de droite. Au milieu de notre région en définissant la propriété partagée est vrai, cette partie a été coupée en deux parties, permet aux utilisateurs de changer la taille de la zone du panneau.
Voici tout le code:
<Div class = "easyui panneau" title = "iconCls mise en page Panel Complex" = "icon-recherche" pliable style = "true" = "padding: 5px; largeur: 500px; height: 250px;"> <Div class = "easyui-layout" adapter = "true"> <Région Div = "nord" border = class = "p-recherche" "false"> <Label> Recherche: </ label> <input> </ input> </ Div> <Région Div = "center" border = "false"> <Div class = "easyui-layout" adapter = "true"> <Région Div = "est" border = class = "p-droite" "false"> <Img src = "images / msn.gif" /> </ Div> <Région Div = "center" border = le style "false" = "border: 1px solid #ccc;"> <Div class = "easyui-layout" adapter = "true"> <Région Div = "sud" split = "true" border = le style "false" = "height: 60px;"> <Style Textarea = "border: 0; width: 100%; hauteur: 100%; redimensionner: none">. Salut, je suis easyui </ textarea> </ Div> <Région Div = "center" border = "false"> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div>
On n'a pas besoin d'écrire de code javascript qui ils ont une conception très puissante de l'interface utilisateur.