PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


เริ่มต้นสร้าง jQuery plugin อย่างง่าย ตอนที่ 1

26 February 2014 By
jquery plugin jquery

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



1. สร้างโฟลเดอร์ สำหรับเก็บไฟล์ jQuery plugin ที่เราจะสร้าง ที่นี้สร้างในโฟลเดอร์ js
2. สร้างไฟล์ javascript ในที่นี้กำหนด ชื่อ jquery.setbackground.js
 
โดยสามารถ คัดลอก รูปแบบ โครงสร้าง สำหรับการสร้าง jquery plugin มาใช้งาน
ตามโค้ดด้านล่าง

// JavaScript Document
(function($){
	// setbackground คือชื่อของ plugin ที่เราต้องการ ในที่นี้ ใช้ว่า  setbackground
	$.fn.setbackground = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options
	 
		// ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น
		var defaults={
	
		};
	 
	 	// ส่วนสำหรับ  เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด
		var settings = $.extend( {}, defaults, options );
	 
	 	/// คืนค่ากลับ การทำงานของ plugin
		return this.each(function() {
			// โค้ตสำหรับ การทำงานของ plugin
		});
	 
	};

})(jQuery); 
 
สำหรับการเรียกใช้งาน สามารถทำได้ดังนี้
 
<!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();
});
</script>
</body>
</html>

 
เนื้อหาอย่างย่อส่วนนี้ เป้นเพียงการเริ่มต้น ดูเนื้อหาตอนที่ 2 ต่อ








เนื้อหาที่เกี่ยวข้อง



Tags:: jquery jquery plugin






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


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