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 plusmagic

PHP lover in thailand

Posted on 2012/09/28, in javaScript, jQuery, programming and tagged , , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: