Last updated on August 6, 2018
ถ้าพิจารณา popover ของ Bootstrap เทียบกับ popover ของ Facebook ก็แทบจะไม่มีอะไรต่างนอกจาก design แต่ interaction มีจุดที่ต่างกันอยู่ interaction ของแต่ละตัวเป็นแบบนี้ครับ
Notificaiton ของ Facebook
- เมื่อคลิกปุ่มจะโชว์ popover
- เมื่อคลิกซ้ำจะปิด popover
- เมื่อคลิกในพื้นที่ popover popover ก็จะยังเปิดอยู่
- เมื่อคลิกนอกพื้นที่ popover popover จะปิด
Bootstrap Popover
คอนฟิก Boostrap Popover ให้ใกล้เคียงกับ Facebook notification โดยเลือก trigger : ‘click’ นอกนั้นใช้ default การทำงานเป็นดังนี้
- เมื่อคลิกปุ่มจะโชว์ popover
- เมื่อคลิกซ้ำจะปิด popover
- เมื่อคลิกในพื้นที่ popover popover จะไม่ปิด
- เมื่อคลิกนอกพื้นที่ popover popover จะไม่ปิด
การทำงาน 1-3 เหมือนกันแต่ข้อ 4 ไม่เหมือนกันถ้าเทียบความสะดวกในการใช้งานของผู้ใช้ interaction แบบ facebook จะดีกว่าเพราะไม่จำเป็นต้องกลับไปคลิกที่ปุ่มเพื่อปิด popover
เพื่อให้ได้การทำงานแบบที่ว่าเราต้องเขียนโค้ดเพิ่มเติมนิดหน่อยจากเดิมที่ใช้ trigger: ‘click’ เราจะเปลี่ยนไปใช้ trigger : ‘manual’ แล้วเขียน action ของ event เอง
Markup
<ul id="navbar-notify" class="nav"> <li id="notif-popover-area"> <a href="javascript:void(0)" alt="Notification" title="Notification" id="notif-popover"> <i class="icon-globe icon-large"></i> </a> </li> </ul>
Javascript
$('#notif-popover').popover({ placement: 'bottom', content: 'Text', title: 'Notification', trigger: 'manual' }).click(function(e) { var notifOpenned = $(this).next().length; if(!notifOpenned) { $(this).popover('show'); } else { $(this).popover('hide'); } }); // hide popover when mouse out of popover $('body').click(function(e) { var notifElm = $('#notif-popover'), notifOpenned = notifElm.next().length, isOnNotif = $(e.target).parents('#notif-popover-area').length; if(notifOpenned && !isOnNotif) { notifElm.popover('hide'); } });
ส่วน javascript มีสิ่งที่ยุ่งยากนิดหน่อยคือการหาว่าพื้นที่ที่ผู้ใช้คลิกเป็นพื้นที่ภายใน popover หรือไม่
วิธีที่ผมใช้คือกำหนด id ให้กับ element ที่เป็น parent (ตัวอย่างนี้กำหนด id=”notif-popover-area” ให้กับ<li> ) ของปุ่มที่รับ event click เพื่อเปิด popover เพราะเมื่อมีการคลิกปุ่ม Bootstrap จะสร้าง <div> element ถัดไปจากปุ่มนั้น
การเช็กว่าเป็นพื้นที่ popover ทำได้โดยดูว่า element นั้นมี parent เป็น notif-popover-area หรือไม่ ถ้าใช่ก็ต้องทำอะไรแต่ถ้าไม่ใช่พื้นที่ popover ก็จะถูกปิด
เป็นเรื่อง UI และ UX เล็กๆ น้อยๆ แต่บันทึกไว้หน่อยแล้วกันเพราะมีคนใช้ Bootstrap เยอะและใช้งานลักษณะนี้บ่อย ใครที่ต้องการใช้งานแบบนี้ก็ลองเอาไปใช้ดูครับ
พี่คับ มีหน้า popover ทั้งหมดให้ดูมั้ยคับ ทำแล้วมันไม่ขึ้นอ่ะคับ
ลองใช้พวก Firebug debug โค้ดดูครับว่า error ตรงไหนบ้าง ถ้ามีตัวอย่างโค้ดให้ช่วยดูก็ยินดีครับ