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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
facebox plugin jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ facebox plugin jquery

ดูแล้ว 13,319 ครั้ง




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
ลบรายการนี้ 
 

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



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ