ประยุกต์ facebox ของ jQuery แทนการใช้ mootools facebox มาใช้งาน

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 แต่ก็เพียงพอสำหรับ การนำไปประยุกต์ใช้งาน

ดาวน์โหลดไฟล์ พร้อมใช้งานได้ที่
http://www.ninenik.com/download/use_facebox.rar

ตัวอย่าง และโค้ด


การสร้าง confirmed dialog
ลบรายการนี้ 
 

$("#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 จากเนื้อหาที่ซ่อนไว้

$("#show_info").facebox({
		title:'แสดงข้อความที่ซ่อน', // หัวข้อ dialog
		width:'200',  // ความกว้าง กำหนด หรือไม่ก็ได้
		cancelValue:"Close" // ข้อความในปุ่มยกเลิก
});	

การแสดงรูปภาพ
คลิกเพื่อแสดงรูปภาพ

 

$(".show_img").facebox({
		cancelValue:"Close" // ข้อความในปุ่มยกเลิก	
});	

การแสดงข้อมูลจากไฟล์ ด้วย ajax
ดึงข้อมูลจากไฟล์ gdata.php มาแสดง

 

$(".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
 

$(".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,