Writing jQuery Plugin Tutorial

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 ချပြီး စမ်းနိုင်ပါတယ်။

Leave a Reply

Your email address will not be published. Required fields are marked *