การเพิ่มชุดคำสั่ง ฟังก์ชั่นใน plugin สามารถเรียกใช้งาน options
ที่เป็น ฟังก์ชั่น ใน plugin ได้
เนื้อหาตอนที่ 5 นี้ต่อเนื่องจากเนื้อหาก่อนหน้า
ตรวจสอบ ว่ามีการส่งค่า options สำหรับใช้งานใน plugin หรือไม่ ตอนที่ 4
https://www.ninenik.com/content.php?arti_id=473 via @ninenik
ในที่นี้จะเพิ่มค่าเริ่มต้นชื่อ complete เป็น ฟังก์ชั่นเข้าไป ตามด้านล่าง
// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
var defaults={
foreground:"red", // กำหนดสีข้อความ
background:"yellow", // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง
fontStyle:null, // การกำหนด font-style เช่น ตัวเอียง
fontWeight:null, // font-weight เช่น กำหนด อักษรตัวหนา
complete:function(){} // กำหนด ฟังก์ชั่น object
};
จะได้ค่าตัวแปร object เพิ่มเข้ามาชื่อ
settings.complete เป็นตัวแปรฟังก์ชั่น
และในส่วน โค้ตสำหรับ การทำงานของ plugin
ก่อนอื่นต้องตรวจสอบว่า ค่าที่ส่งเข้ามา ฟังก์ชั่นหรือไม่
โดยใช้คำสั่ง $.isFunction() ของ jquery
จากนั้น จะเรียกใช้งานฟังก์ชัน ด้วย .call()
// ตรวจสอบว่า ค่าที่ส่งเข้ามา ฟังก์ชั่นหรือไม่
if($.isFunction( settings.complete ) ) {
settings.complete.call( this ); // เรียกใช้ฟังก์ชั่นที่ส่งเข้ามา
}
หากไม่ได้กำหนด การเรียกใช้งานฟังก์ชั่นที่ส่งเข้ามา
ค่าที่ส่งเข้ามาเป็นฟังก์ชั่น ก็จะไม่สามารถทำงานได้
jquery plugin ทั้งหมด
// JavaScript Document
(function($){
// setbackground คือชื่อของ plugin ที่เราต้องการ ในที่นี้ ใช้ว่า setbackground
$.fn.setbackground = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options
// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
var defaults={
foreground:"red", // กำหนดสีข้อความ
background:"yellow", // กำหนดสีพื้นหลัง ในค่าเริ่มต้นเป็น สีเหลือง
fontStyle:null, // การกำหนด font-style เช่น ตัวเอียง
fontWeight:null, // font-weight เช่น กำหนด อักษรตัวหนา
complete:function(){} // กำหนด ฟังก์ชั่น object
};
// ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด
var settings = $.extend( {}, defaults, options );
/// คืนค่ากลับ การทำงานของ plugin
return this.each(function() {
$(this).css({
"background-color":settings.background,
"color":settings.foreground
});
// ตรวจสอบค่า settings.fontStyle ว่ามีการกำหนดค่าหรือไม่
if(settings.fontStyle){
$(this).css( 'font-style', settings.fontStyle );
}
// ตรวจสอบค่า settings.fontWeight ว่ามีการกำหนดค่าหรือไม่
if(settings.fontWeight){
$(this).css( 'font-weight', settings.fontWeight );
}
// ตรวจสอบว่า ค่าที่ส่งเข้ามา ฟังก์ชั่นหรือไม่
if($.isFunction( settings.complete ) ) {
settings.complete.call( this ); // เรียกใช้ฟังก์ชั่นที่ส่งเข้ามา
}
// โค้ตสำหรับ การทำงานของ plugin
});
};
})(jQuery);
ต่อมา มาดูส่วนของการส่งค่า options ที่เป็นฟังก์ชั่น
สามารถทำได้ดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
</head>
<body>
<div style="margin:auto;width:75%;">
<h4 class="i_h4">How to Create a Basic Plugin</h4>
<p>Sometimes you want to make a piece of functionality available throughout your code. </p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.setbackground.js"></script>
<script type="text/javascript">
$(function(){
// การเรียกใช้งาน plug in
$(".i_h4").setbackground({
foreground:"#FFFFFF", // ส่งค่า options สีข้อความ
background:"green", // ส่งค่า options เพื่อเติมเข้าไปใน plugin
complete:function(){ //
$(this).css("text-decoration","line-through");
}
});
});
</script>
</body>
</html>
เท่านี้ก็สามารถเข้าใจ การกำหนด options ที่เป็นฟังก์ชั่น และ
การเรียกใช้งาน ใน jquery plugin ได้
เนื้อหาที่เกี่ยวข้อง