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