1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <!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>/* 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> |