<!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>
