TreeView Menu คุณก็ทำได้ ไม่ยากเลย

สวัสดีมาอีกแล้วครับ บทความดีๆ จาก jQueryTips.com ซึ่งคุณจะหาไม่ได้ที่ไหนอักแล้ว นอกจากที่นี่ที่เดียว เขียนเองสดๆ ไม่มีใช้ตัวช่วย ไม่ใช้สลิง ^_^

วันนี้จะมาขอนำเสอนวิธีเขียน Treeview menu หรือ เมนูแบบรากต้นไม้นั่นเอง โดยที่ผมจะมาเขียนเกี่ยวกับการใช้ ul + li เพื่อสร้างเมนูแบบรากต้นไม้ชนิดไม่จำกัดความลึก เป็นไงมาดูโคดกันก่อน

ตัวอย่าง
http://www.jquerytips.com/example/treeview.html

jQuery Code
$(document).ready(function() {

});

Css Code
ul {
cursor: pointer;
}

ul.orderlist {
padding-left: 10px;
margin-left: 10px;
}

HTML Code

• Menu 1
  • Submenu 1-1
  • Submenu 1-2
    • Submenu 1-2-1
    • Submenu 1-2-2
      • Submenu 1-2-2-1
    • Submenu 1-2-3
  • Submenu 1-3
    • Submenu 1-3-1
  • Submenu 1-4
  • Submenu 1-5
• Menu 2
• Menu 3
  • Menu 3-1
  • Menu 3-2

เอาล่ะทีนี้ผมจะลองอธิบายโคดให้อ่านกันว่ามันทำงานยังไงบ้าง

ส่วนที่ 1
$("ul#mylist ul").addClass('orderlist').hide();
ตรงนี้เป็นการบอกว่า ul ทั้งหมดที่อยู่ภายใต้ ul ที่มี id เป็น mylist ให้ add class ที่ชื่อว่า orderlist ซึ่งเป็นการลด padding และ margin จากปกติ (ดูจาก css) เพื่อความสวยงาม จากนั้นทำการซ่อนตัวเองไปทั้งหมด

ส่วนที่ 2
$("ul#mylist li").each(function() {
if ($(this).children('ul').size() > 0) {
$(this).prepend('expand | ');
}
});
ตรงนี้จะทำการหา li ทั้งหมด ที่อยู่ภายใต้ ul ที่มี id เป็น mylist จากนั้นเราจะใช้คำสั่ง each ใน jQuery เพื่อทำการวนลูป และทำการหา children ที่เป็น ul มานับดูว่า มันยังมี submenu หลงเหลือมั้ย

ถ้าปรากฎว่าเหลือ คือมีค่า > 0 ก็เอา text คำว่า expand ไปใส่ข้างหน้า ของ li ตัวที่ค้นหาเจอ รวมทั้งใส่ bold ให้มันด้วย

ส่วนที่ 3
$("ul#mylist li").toggle(function() {
$(this).children('ul').show();
$(this).find('b:eq(0)').text('collapse | ');
}, function() {
$(this).children('ul').hide();
$(this).find('b:eq(0)').text('expand | ');
});
});
ส่วนสุดท้ายทำงานดังนี้

ให้จับ event โดยการใช้ Toggle ซึ่ง toggle จะทำงานดังนี้ ถ้ามีการคลิกครั้งแรก function ตัวที่ 1 จะทำงาน ถ้ามีการคลิกครั้งที่ 2 function ตัวที่ 2 จะทำงาน แล้วถ้าคลิกครั้งที่ 3 ตัวที่ที่ 1 ก็จะกลับมาทำงานอีก สลับกันไปเรื่อยๆ ในลักษณะ even & odd นั่นเอง ซึ่งตรงนี้เราจะจับทุกครั้งที่มีการคลิก li ตัวไหนก็ตามที่อยู่ภายใต้ ul ที่มี id เป็น mylist

โดยที่ function ชุดแรก จะทำงานแบบนี้
$(this).children('ul').show();
$(this).find('b:eq(0)').text('collapse | ');
ul ซึ่งเป็น child node ของ il (this นั่นเอง) แสดงผล (ยกเลิกการซ่อน)
ต่อมา ให้ li (this) ค้นหา tag < b > ที่ index เท่ากับ 0 จากนั้นเปลี่ยน text จาก expand เป็น collapse

function ตัวที่ 2 ทำงานกลับกัน
$(this).children('ul').hide();
$(this).find('b:eq(0)').text('expand | ');
ตัวที่ 2 ก็ทำงานสลับกับตัวแรกคือ ถ้ามีการ click เกิดขึ้นอีกครั้ง ให้ ul ซึ่งเป็น child node ของ li (this) ตัวนี้ ซ่อนตัว จากนั้นแก้ text จาก collapse กลับเป็น expand เหมือนเดิม

จบแล้วครับเมนูแบบรากต้นไม้ ง่ายซะไม่มี ^_^