facebox เป็นคำที่นำมาใช้สำหรับเรียก รูปแบบ dialog ที่แสดงคล้ายกับ dialog หรือ popup ของ facebook โดยมีการนำไปพัฒนาทั้งการใช้งาน jQuery และ mootools
การใช้งาน facebox ใน jQuery ศึกษาเพิ่มเติมได้ที่
http://defunkt.github.com/facebox/
การใช้งาน facebox ด้วย mootools ศึกษาเพิ่มเติมได้ที่
http://www.bertramakers.com/moolabs/facebox.php
ถ้าได้ลองเข้าไปดูทั้งสองเว็บตัวอย่างข้างต้น จะเห็นว่า mootools มีรูปแบบการประยุกต์ใช้งาน ที่หลากหลาย และน่าใช้กว่าใน jQuery
แต่โดยส่วนตัว ไม่ต้องการใช้งาน mootools จีงได้นำรูปแบบ และการใช้งาน ใน mootools มาประยุกต์ใช้กับ jQuery ซึ่งอาจจะไม่ครอบคลุม ความสามารถทั้งหมดเหมือนใน mootools แต่ก็เพียงพอสำหรับ การนำไปประยุกต์ใช้งาน
ดาวน์โหลดไฟล์ พร้อมใช้งานได้ที่
https://www.ninenik.com/download/use_facebox.rar
ตัวอย่าง และโค้ด
การสร้าง confirmed dialog
ลบรายการนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $("#delItem").facebox({ title:'กรุณายืนยัน', // หัวข้อ dialog message:'<div style="width:250px;">กรุณายืนยันการลบรายการนี้? </div>', // submitValue: "Yes", // ข้อความในปุ่มตกลง หรือยืนยัน submitFunction:function(){ alert("Yes."); // คำสั่งหรือฟังก์ชัน เมื่อกดปุ่ม ตกลง กำหนดตามต้องการ $(document).trigger('close.facebox'); // ปิด facebox }, submitFocus:true, // เมื่อเปิด facebox มาให้ focus ไปที่ปุ่มตกลง เลยหรือไม่ cancelValue:"No", // ข้อความในปุ่มยกเลิก cancelFunction:function(){ alert("No."); // คำสั่งหรือฟังก์ชัน เมื่อกดปุ่ม ปุ่มยกเลิก กำหนดตามต้องการ $(document).trigger('close.facebox'); // ปิด facebox } }); |
การสร้าง dialog โดยแสดงข้อความจากเนื้อหาที่ซ่อนไว้
คลิกเพื่อแสดง dialog จากเนื้อหาที่ซ่อนไว้
1 2 3 4 5 | $("#show_info").facebox({ title:'แสดงข้อความที่ซ่อน', // หัวข้อ dialog width:'200', // ความกว้าง กำหนด หรือไม่ก็ได้ cancelValue:"Close" // ข้อความในปุ่มยกเลิก}); |
การแสดงรูปภาพ
คลิกเพื่อแสดงรูปภาพ
1 2 3 | $(".show_img").facebox({ cancelValue:"Close" // ข้อความในปุ่มยกเลิก }); |
การแสดงข้อมูลจากไฟล์ ด้วย ajax
ดึงข้อมูลจากไฟล์ gdata.php มาแสดง
1 2 3 4 5 6 7 8 9 10 | $(".use_ajax").facebox({ title:'การแสดงข้อมูลจากไฟล์ ด้วย ajax', // หัวข้อ dialog width:'400', submitValue:"Send", // ข้อความในปุ่มตกลง หรือยืนยัน submitFunction:function(){ $("#contact_form").submit(); $(document).trigger('close.facebox'); // ปิด facebox }, cancelValue:"Cancel" // ข้อความในปุ่มยกเลิก }); |
การแสดงข้อมูลจากไฟล์ ด้วย ajax โดยไม่แสดง Title
การแสดงข้อมูลจากไฟล์ ด้วย ajax โดยไม่แสดง Title
1 2 3 4 5 6 7 8 9 10 | $(".use_ajax_notitle").facebox({ width:'400', // ความกว้าง กำหนด หรือไม่ก็ได้ submitValue:"Send", // ข้อความในปุ่มตกลง หรือยืนยัน submitFunction:function(){ $("#contact_form").submit(); $(document).trigger('close.facebox'); // ปิด facebox }, submitFocus:true, // เมื่อเปิด facebox มาให้ focus ไปที่ปุ่มตกลง เลยหรือไม่ cancelValue:"Cancel" // ข้อความในปุ่มยกเลิก }); |
การปรับแต่ง รูปแบบ และการใช้งาน
property ที่สามารถปรับแต่ง
cancelValue
ใช้กำหนดข้อความสำหรับปุ่มปิด หรือยกเลิกการแสดง facebox อย่างน้อยต้องกำหนด ตัวนี้ กำหนดโดยใส่ข้อความที่ต้องการแสดง เช่น
cancelValue:'Close',
title
หัวข้อที่ต้องการแสดงใน dialog หรือ popup จะกำหนด หรือไม่ ก็ได้
ถ้าไม่กำหนด จะไม่แสดง แถบ title
ตัวอย่างการกำหนด เช่น
title:'หัวข้อไตเติลที่ต้องการแสดง',
message
ใช้สำหรับกำหนดข้อความที่ต้องการแสดงโดยตรง จะกำหนด หรือไม่ ก็ได้
ถ้ามีการกำหนด attribute href ของลิ้งค์หรือปุ่มนั้น จะต้องกำหนดเป็น href="#message" เสมอ
ตัวอย่างการกำหนด เช่น
message:'ยืนยันการลบรายการนี้',
width
ความกว้างของส่วนเนื้อหา dialog หรือ popup จะกำหนด หรือไม่ ก็ได้
ถ้าไม่กำหนด จะแสดงความกว้างตามความกว้างของเนื้อหา
ตัวอย่างการกำหนด
width:'400',
cancelFunction
ฟังก์ชันสำหรับเมื่อคลิกปุ่มปิดหรือยกเลิก dialog จะกำหนด หรือไม่ ก็ได้
ถ้าไม่กำหนด เมื่อคลิกจะปิด facebox ไปอัตโนมัติ
ตัวอย่างการกำหนด
cancelFunction:function(){
alert("No."); // คำสั่งหรือฟังก์ชัน เมื่อกดปุ่ม ปุ่มยกเลิก กำหนดตามต้องการ
$(document).trigger('close.facebox'); // ปิด facebox
}
submitValue
ใช้กำหนดข้อความสำหรับปุ่มตกลง หรือ submit แล้วแต่กรณี จะกำหนด หรือไม่ ก็ได้
ถ้าไม่กำหนด จะไม่แสดงปุ่มนี้
ตัวอย่างการกำหนด
submitValue:'Send',
submitFunction
ใช้สำหรับกำหนดฟังก์ชันที่ต้องการ เมื่อคลิกที่ปุ่ม ตกลง หรือ submit จะกำหนด หรือไม่ ก็ได้
ตัวอย่างการกำหนด
submitFunction:function(){
alert("Yes."); // คำสั่งหรือฟังก์ชัน เมื่อกดปุ่ม ตกลง กำหนดตามต้องการ
$(document).trigger('close.facebox'); // ปิด facebox
}
submitFocus
ใช้สำหรับกำหนด กรณีมีปุ่มตกลง หรือ submit เพื่อให้ focus ไปที่ปุ่มตกลง หรือ submit นั้น
โดยอัตโนมัติ ซึ่งทำให้สามารถกดปุ่ม enter แทนการคลิกที่ปุ่ม ได้เลย
ถ้าไม่กำหนด จะเป็น false โดยอัตโนมัติ
ตัวอย่างการกำหนด
submitFocus:true,
