jQuery plugin แบบง่ายๆ

Byphunsanit

basic, jQuery, plugin, พื้นฐาน

jQuery plugin แบบง่ายๆ

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>basic jQuery plugin By Pitt Phunsanit</title>
</head>
<body>
<ul id="demo">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
/* jQuery Plugin Template */
(function($){
	/* $.fn.ชื่อ plugin */
	$.fn.instead = function(options){
		/* ค่า default ถ้าไม่ส่งมา */
		var settings = $.extend({
		  id:"instead",
		  background:"green"
		}, options);
		/* ทำงาน
		- อ้างถึง selected โดยใช้ this
		- ใช้ตัวแปรตามรูปแบบ settings.ตัวแปร
		*/
		this.append('<li id="'+settings.id+'" style="background:'+settings.background+'">id = '+settings.id+'</li>');
		/* Maintaining Chainability */
		return this;
	};
})( jQuery );
</script>
<script>
$(function(){
	$('#demo')
	/* default */
	.instead()
	/* ปรับแต่ง */
	.instead({id:"customID" ,background:"yellow"})
	.instead({id:"customID2" ,background:"red"})
	/* test chainability */
	.css('color', 'white');
});
</script>
</body>
</html>

About the author

phunsanit administrator

Leave a Reply
ยกเลิกการตอบ

คุณต้องเข้าสู่ระบบ เพื่อจะพิมพ์ความเห็น

Archives

คลังเก็บ