jQuery EasyUI Layout - membuat layout yang kompleks di panel
Panel (Panel) memungkinkan Anda untuk membuat layout kustom untuk berbagai tujuan. Dalam contoh ini, kita menggunakan panel (panel) dan tata letak (layout) plug-in untuk membuat kotak pesan msn.
Kami menggunakan beberapa layout (tata letak) di daerah panel. Di bagian atas kotak pesan kita menempatkan sebuah kotak input query, dan menempatkan angka pada gambar kanan. Di tengah-tengah wilayah kami dengan menyetel properti perpecahan benar, bagian ini dipotong menjadi dua bagian, memungkinkan pengguna untuk mengubah ukuran area panel.
Berikut adalah semua kode:
<Div class = "easyui-panel" title = "Kompleks Panel Layout" iconCls = "icon-search" dilipat = "true" style = "padding: 5px; width: 500px; height: 250px;"> <Div class = "easyui-layout" cocok = "true"> <Wilayah Div = "utara" border = "false" class = "p-search"> <Label> Cari: </ label> <input> </ input> </ Div> <Wilayah Div = "center" border = "false"> <Div class = "easyui-layout" cocok = "true"> <Wilayah Div = "timur" border = "false" class = "p-benar"> <Img src = "images / msn.gif" /> </ Div> <Wilayah Div = "center" border = "false" style = "border: 1px # ccc padat;"> <Div class = "easyui-layout" cocok = "true"> <Wilayah Div = "selatan" split = "true" border = "false" style = "height: 60px;"> <Textarea style = "border: 0; width: 100%; height: 100%; mengubah ukuran: none">. Hi, Saya easyui </ textarea> </ Div> <Wilayah Div = "center" border = "false"> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div>
Kami tidak perlu menulis kode javascript bahwa mereka memiliki desain yang sangat kuat dari user interface.