รูปแบบ jQuery EasyUI - สร้างชายแดนสำหรับเค้าโครงหน้า
รูปแบบที่ชายแดน (รูปแบบที่ชายแดน) มีห้าภูมิภาค: ทิศตะวันออกทิศตะวันตกทิศเหนือทิศใต้, ศูนย์ นี่คือบางส่วนประเพณีทั่วไป:
- พื้นที่ภาคเหนือสามารถใช้ในการแสดงเว็บไซต์แบนเนอร์
- พื้นที่ภาคใต้สามารถนำมาใช้เพื่อแสดงลิขสิทธิ์และคำแนะนำบางอย่าง
- พื้นที่ทางทิศตะวันตกสามารถนำมาใช้เพื่อแสดงเมนูนำทาง
- พื้นที่ทางทิศตะวันออกสามารถนำมาใช้เพื่อแสดงรายการส่งเสริมการขายบางส่วน
- พื้นที่ตรงกลางสามารถนำมาใช้เพื่อแสดงเนื้อหาหลัก
จะใช้รูปแบบ (รูปแบบ) คุณควรตรวจสอบรูปแบบ (รูปแบบ) คอนเทนเนอร์แล้วกำหนดบางพื้นที่ รูปแบบ (รูปแบบ) จะต้องต้องมีอย่างน้อยศูนย์ภูมิภาคต่อไปนี้เป็นรูปแบบ (รูปแบบ) ตัวอย่าง:
<div class = "easyui แบบการจัดวาง" style = "width: 400px; ความสูง: 200px;"> <ภูมิภาค Div = "ตะวันตก" แยก = "true" title = "Navigator" style = "width: 150px;"> <p style = "padding: 5px; margin: 0;"> เลือกภาษา: </ p> <ul> <li> <a href="javascript:void(0)" onclick="showcontent('java')"> Java </a> </ li> <li> <a href="javascript:void(0)" onclick="showcontent('cshape')"> C # </a> </ li> <li> <a href="javascript:void(0)" onclick="showcontent('vb')"> VB </a> </ li> <li> <a href="javascript:void(0)" onclick="showcontent('erlang')"> Erlang </a> </ li> </ ul> </ div> <div id = "เนื้อหา" ภาค = "center" title = "ภาษา" style = "padding: 5px;"> </ div> </ div>
เราสร้างภาชนะ <div> กับรูปแบบเส้นขอบ (รูปแบบที่ชายแดน) รูปแบบ (รูปแบบ) ของภาชนะที่ถูกตัดออกเป็นสองส่วนด้านซ้ายเป็นเมนูนำทางด้านขวาเป็นเนื้อหาหลัก
สุดท้ายเราเขียนตัวจัดการเหตุการณ์ onclick เพื่อดึงข้อมูล 'showcontent' ฟังก์ชั่นง่ายมาก:
ฟังก์ชั่น showcontent (Language) { . $ ( '# เนื้อหา') HTML ( 'รู้เบื้องต้นเกี่ยวกับ' 'ภาษา' + ภาษา +); }