jQuery မှာ plugin တွေ ဘယ်လောက် အသုံးဝင်သလဲဆိုတာ သိမှာပါ။ ကျွန်တော်တို့ ကိုယ်တိုင်လည်း jquery plugin တွေ ရေးလို့ရပါတယ်။ plugin ဆိုတာကလည်း function လိုပါပဲ။ ကျွန်တော်တို့ ထပ်ခါ ထပ်ခါလုပ်နေရတာကို လွယ်ကူအောင် ဖန်တီးပေးတာပါ။ ဥပမာ။။ အောက်က code လေးကို ကြည့်လိုက်ပါ။
<html>
<head>
<title>jQuery Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src = "bgcolor.js"></script>
<script>
$(document).ready(function(){
changecolor($("#sample"),"red");
changecolor($("#sample2"),"#FF00FF");
});
function changecolor(id,value)
{
$(id).css("background-color",value);
}
</script>
</head>
<body>
<div id="sample">This is sample<div>
<div id="sample2">This is sample<div>
</body>
</html>
အဲဒီမှာ changecolor ဆိုတဲ့ function လေး ရေးထားပါတယ်။ အဲဒါကို ကျွန်တော်တို့ plugin ပြောင်းကြည့်ရအောင်။ function ခေါ်ရေးရင် ရပေမယ့် user friendly ဖြစ်သွားအောင် plugin ပြောင်းရေးတာပါ။ plugin ပြောင်းရေးလိုက်ရင် ကျွန်တော်တို့ အောက်ကလို ပြောင်းပြီး ခေါ်လို့ရသွားမှာပါ။
[lang name=”js”]
$(“#sample”).bgcolor();
$(“#sample2″).bgcolor({
value:”#FF00FF”
});
[/xhtml]
ပိုပြီး user friendly ဖြစ်ပြီး code ကြည့်လိုက်တာနဲ့ နားလည် လွယ်တာပေါ့။
အရင်ဆုံး bgcolor.js မှာ အောက်ကလို ရေးလိုက်ပါတယ်။
(function(jQuery){
jQuery.fn.bgcolor = function(options) {
return this.each(function() {
//write code in here
});
};
})( jQuery );
အဲဒါက jquery plugin ရေးဖို့ပေါ့။
jQuery.fn.bgcolor က bgcolor function ကို extend လုပ်လိုက်တာပေါ့။ selector တွေကနေ တဆင့် bgcolor ဆိုတဲ့ function ခေါ်လို့ရအောင်ပါ။ ကျွန်တော် code ကို အောက်ကလို ပြင်ရေးလိုက်ပါမယ်။
(function(jQuery){
jQuery.fn.bgcolor = function(options) {
var defaults = {
value:"red"
};
var options = jQuery.extend(defaults, options);
return this.each(function() {
$(this).css("background-color",options.value);
});
};
})( jQuery );
defaults က red လို့ပေးထားပါတယ်။ အဲဒါက JSON format ပါ။ JSON format ကို merge လုပ်ဖို့အတွက်
var options = jQuery.extend(defaults, options);
options ဆိုတဲ့ JSON parmater က value ပါလာရင် red ကို ဖျက်ပြီး အသစ်ပြောင်းသွားမှာပါ။
return this.each(function() {
//ဒီမှာ code ရေးရပါတယ်။
}
အဲဒီမှာက ကိုယ် ဖြစ်ချင်တဲ့ code ရေးရပါတယ်။ ကျွန်တောက်တော့ ရောက်လာတဲ့ selector ကို background color ပြောင်းထားပါတယ်။
HTML မှာ
<script src = "bgcolor.js"></script>
ထည့်ပြီးတော့ bgcolor ဆိုတဲ့ function ကို ခေါ်လိုက်ရင် background ပြောင်းသွားပါလိမ့်မယ်။ ပေါ်ချင်တဲ့ အရောင်ကိုတော့ value ကို ထည့်ပြီး ပြောင်းပေးလို့ရပါတယ်။
$("#sample").bgcolor();
$("#sample2").bgcolor({
value:"#FF00FF"
});
စမ်းကြည့်ချင်ရင်တော့ code ကို download ချပြီး စမ်းနိုင်ပါတယ်။