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

Byphunsanit

Advance, jQuery, เจเควียรี

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://pitt.plusmagi.com/" ,label:"pitt.plusmagi.com"})
	.instead({id:"customID" ,background:"yellow"})
	.instead('li')
	.instead('li', {id:"customID2" ,color:"red"})
	/* test chainability */
	.css('color', 'pink');
});
</script>
</body>
</html>

About the author

phunsanit administrator

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

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

Archives

คลังเก็บ