<!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;
};
}) ;
</script>
<script>
$ (function () {
$ ('#demo') /* default */
.instead () /* ปรับแต่ง */
.instead ({id:"customID" ,background:"yellow"}) .instead ({id:"customID2" ,background:"red"}) /* test chainability */
.css ('color', 'white') ;
}) ;
</script>
</body>
</html>