[sourcecode language=”html”]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>basic jQuery plugin By Pitt Phunsanit</title>
</head>
<body>
<ul id="demo">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
/* jQuery Plugin Template */
(function($){
/* $.fn.ชื่อ plugin */
$.fn.instead = function(options){
/* ค่า default ถ้าไม่ส่งมา */
var settings = $.extend({
id:"instead",
background:"green"
}, options);
/* ทำงาน
– อ้างถึง selected โดยใช้ this
– ใช้ตัวแปรตามรูปแบบ settings.ตัวแปร
*/
this.append(‘<li id="’+settings.id+’" style="background:’+settings.background+’">id = ‘+settings.id+'</li>’);
/* Maintaining Chainability */
return this;
};
})( jQuery );
</script>
<script>
$(function(){
$(‘#demo’)
/* default */
.instead()
/* ปรับแต่ง */
.instead({id:"customID" ,background:"yellow"})
.instead({id:"customID2" ,background:"red"})
/* test chainability */
.css(‘color’, ‘white’);
});
</script>
</body>
</html>
[/sourcecode]
jQuery plugin แบบง่ายๆ
phunsanit administrator
About the author