jQuery EasyUI เค้าโครง - สร้างแผงสไตล์ซ้าย XP
ภายใต้สถานการณ์ปกติโฟลเดอร์แฟ้ม Windows XP Explorer ให้แผง (แผง) บนด้านซ้ายมีงานบางอย่างร่วมกัน กวดวิชานี้จะแสดงวิธีการ easyui แผง (แผง) ปลั๊กอินเพื่อสร้าง XP แผงด้านซ้าย
กำหนดแผง (แผง)
เรากำหนดแผงบางคน (Panel), แผงเหล่านี้ (แผง) เพื่อแสดงจำนวนของงานที่ แต่ละแผง (แผง) ควรจะมีปุ่ม / เครื่องมือที่พับน้อยแฉ
รหัสดังต่อไปนี้:
<style Div = "width: 200px; ความสูง: อัตโนมัติพื้นหลัง: # 7190E0; padding: 5px;"> <div class = "easyui แบน" title = "รูปภาพงาน" พับสไตล์ = "true" = "width: 200px; ความสูง: อัตโนมัติ; padding: 10px;"> ดูเป็นสไลด์โชว์ <br/> สั่งพิมพ์ <br/> ออนไลน์ พิมพ์รูปภาพ </ div> <br/> <ระดับ Div = "easyui แบน" title = "ไฟล์และโฟลเดอร์งาน" พับสไตล์ = "true" = "width: 200px; ความสูง: อัตโนมัติ; padding: 10px;"> ทำให้ <br/> โฟลเดอร์ใหม่ เผยแพร่โฟลเดอร์นี้จะ <br/> เว็บ แบ่งปันโฟลเดอร์นี้ </ div> <br/> <div class = "easyui แบน" title = "สถานที่อื่น" พับ = "true" ทรุดสไตล์ = "true" = "width: 200px; ความสูง: อัตโนมัติ; padding: 10px;"> นิวยอร์ก <br/> รูปภาพ <br/> ของฉัน <br/> คอมพิวเตอร์ของฉัน สถานที่เครือข่ายของฉัน </ div> <br/> <div class = "easyui แบน" title = "รายละเอียด" พับสไตล์ = "true" = "width: 200px; ความสูง: อัตโนมัติ; padding: 10px;"> เอกสารของฉัน <br/> แฟ้มโฟลเดอร์ <br/> <br/> วันที่แก้ไข: Oct.3rd 2010 </ div> </ div>
แผงที่กำหนดเอง (Panel) ของลักษณะที่ปรากฏ
โปรดทราบว่าลักษณะมุมมองนี้ไม่ใช่สิ่งที่เราต้องการเราต้องเปลี่ยนแผง (แผง) ภาพพื้นหลังหัวและยุบ / ขยายไอคอนปุ่ม
มันไม่ได้เป็นเรื่องยากที่จะทำเราต้องทำคือการที่จะกำหนดบางส่วนของแบบ CSS
.panel ร่างกาย { พื้นหลัง: # f0f0f0; } .panel หัว { พื้นหลัง: URL # fff ( 'images / panel_header_bg.gif') ไม่มีการทำซ้ำบนขวา; } .panel เครื่องมือยุบ { พื้นหลัง: URL ( 'images / arrow_up.gif') ไม่ซ้ำ 0px -3px; } .panel เครื่องมือขยาย { พื้นหลัง: URL ( 'images / arrow_down.gif') ไม่ซ้ำ 0px -3px; }
ดังนั้นการใช้ easyui ส่วนติดต่อผู้ใช้ที่กำหนดเองเป็นเรื่องง่ายมาก