jQuery plugin แบบมาตราฐาน


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>advance jQuery plugin By Pitt Phunsanit</title>
<body>
<div id="demo">
  <h1>test</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script>
/* jQuery Plugin Template */
(function($){
	/* global data & object */
	var global = new Object
	var methods = {
	/* default methods */
     init : function(options){
		var settings = $.extend({
		id:"instead",
		background:"green"
		}, options);
		this.append('<ul id="'+settings.id+'" style="background:'+settings.background+'"></ul>');
		global.ul = $('#'+settings.id);
		return this;
     },
	/* methods */
     li:function(methodsArguments){
		var arguments = $.extend({
		  id:"liId",
		  color:"blue"
		}, methodsArguments);
		global.ul.append('<li id="'+arguments.id+'" style="color:'+arguments.color+'">set color = '+arguments.color+'</li>');
		return this;
     }
	/* methods ตัวที่ 2 แบบมี internal call */
	 ,link:function(methodsArguments_1){
		var arguments_1 = $.extend({
		  id:"liId",
		  color:"blue",
		  href:"#",
		  label:"link to"
		}, methodsArguments_1);
		/* call methods li */
		methods['li'].apply(this ,arguments)
		$('#'+arguments_1.id ,global.ul).append('<a href="'+arguments_1.href+'">'+arguments_1.label+'</a>');
		return this;
     }
  };
 
	$.fn.instead = function(method){
		/* method calling logic */
		if ( methods[method] ) {
		  return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
		  return methods.init.apply( this, arguments );
		} else {
		  $.error('Method ' +  method + ' does not exist on jQuery.tooltip' );
		}    
	};
})(jQuery);
</script> 
<script>
$(function(){
	$('#demo')
	/* default (init) */
	.instead()
	/* methods li แบบ default */
	.instead('li')
	/* methods li แบบ ปรับแต่ง */
	.instead('li', {id:"customID1" ,color:"red"})
	.instead('link', {id:"customID2" ,color:"white" ,href:"https://plusmagic.wordpress.com/" ,label:"plusmagic.wordpress.com"})
	.instead({id:"customID" ,background:"yellow"})
	.instead('li')
	.instead('li', {id:"customID2" ,color:"red"})
	/* test chainability */
	.css('color', 'pink');	
});
</script>
</body>
</html>

About plusmagic

PHP lover in thailand

Posted on 2012/10/01, 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: