jQuery EasyUI Layout - membuat XP panel gaya kiri
Dalam keadaan normal, file folder Windows XP Explorer, panel (panel) di sisi kiri berisi beberapa tugas umum. Tutorial ini menunjukkan kepada Anda bagaimana untuk easyui panel (panel) plugin untuk membuat XP kiri panel.
Tentukan panel (panel)
Kita mendefinisikan beberapa panel (panel), panel ini (panel) untuk menampilkan jumlah tugas. Setiap panel (panel) harus memiliki setidaknya lipat / berlangsung tombol tool.
Kode sebagai berikut:
<Div style = "width: 200px; height: auto; background: # 7190E0; padding: 5px;"> <Div class = "easyui-panel" title = "Picture Tasks" dilipat = "true" style = "width: 200px; height: auto; padding: 10px;"> Lihat sebagai slide show <br/> Cetak pesanan <br/> secara online cetak </ Div> <br/> <Class Div = "easyui-panel" title = "File dan Folder Tasks" dilipat = "true" style = "width: 200px; height: auto; padding: 10px;"> Membuat <br/> folder baru Mempublikasikan folder ini ke <br/> Web Berbagi folder ini </ Div> <br/> <Div class = "easyui-panel" title = "Tempat Lain" dilipat = "true" runtuh = "true" style = "width: 200px; height: auto; padding: 10px;"> New York <br/> Gambar <br/> saya <br/> My Computer My Network Places </ Div> <br/> <Div class = "easyui-panel" title = "Detail" dilipat = "true" style = "width: 200px; height: auto; padding: 10px;"> dokumen saya <br/> Berkas folder <br/> <br/> Tanggal dimodifikasi: Oct.3rd 2010 </ Div> </ Div>
panel kustom (panel) dari penampilan
Harap dicatat bahwa pandangan penampilan ini bukan apa yang kita inginkan, kita harus mengubah panel (panel) gambar latar belakang header dan runtuhnya / memperluas tombol ikon.
Hal ini tidak sulit untuk dilakukan, yang perlu kita lakukan adalah untuk mendefinisikan kembali beberapa CSS.
.panel-body {
background: # f0f0f0;
}
.panel-header {
background: url # fff ( 'images / panel_header_bg.gif') no-repeat kanan atas;
}
.panel-alat-runtuhnya {
background: url ( 'images / arrow_up.gif') no-repeat 0px -3px;
}
.panel-alat-memperluas {
background: url ( 'images / arrow_down.gif') no-repeat 0px -3px;
}
Dengan demikian, penggunaan antarmuka pengguna kustom easyui sangat sederhana.