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

Cheat Sheet For Web Essential

Cheat Sheet ဆိုတာကတော့ ကျွန်တော်တို့တွေ ပုံမှန် များပြားလှတဲ့ reference တွေကို လိုအပ်ပြီး အသုံးဝင်တာတွေ စုစည်းထားတာကို ဆိုတာပါ။ တနည်းပြောရင် quick reference လို့ ဆိုလို့ရပါတယ်။ ကျွန်တော် HTML, CSS , jQuery အကြောင်း MZ Edu မှာ ရေးခဲ့ဘူးပါတယ်။ အခု Web Development လုပ်မယ့်သူတွေအနေနဲ့ HTML, CSS , jQuery တို့ကို သိထားဖို့လိုအပ်ပါတယ်။ ရေးသားရာမှာလည်း လွယ်လွယ်ကူကူ reference လုပ်လို့ရအောင် cheat sheet လေးတွေ ဆောင်ထားဖို့လည်း လိုအပ်ပါတယ်။

Continue reading “Cheat Sheet For Web Essential”

Learning Jquery 1.3

Chapter 2 : Selector

Jquery မှာ CSS မှာ အသုံးပြုတဲ့ selector တွေကို အသုံးပြုထားပြီး CSS လို့ Doucment Object Model (DOM) တွေကို မြန်မြန်ဆန်ဆန် ထိထိရောက် ခေါှယူနိုင်အောင်ပေါ့။ ဒီ Chapter မှာတော့ Selector တွေအကြောင်းပြောပြပြီး Jquery ရဲ့ ကိုယ်ပိုင် selector အနည်းငယ်ကိုလည်း ပြောပြသွားမှာပါ။

The Document Object Model

Jquery မှာ အရမ်းကောင်းမွန်တဲ့ အပိုင်းတစ်ခုပါ။ DOM ထဲမှာ ရှိတဲ့ elements တွေကို လွယ်လွယ်ကူကူ selecting လုပ်လို့ရတယ်။ Document Object Model ဟာ အစီအစဉ်တကျ ရှိတဲ့ family-tree structure ပါ။ HTML ဟာ အခြား markup language တွေလိုပဲ DOM ကို အသုံးပြုထားပါတယ်။ ကျွန်တောှတို့ဟာ same terminology ကို အသုံးပြုပြီး family relastionship တွေကို ခေါှယူနိုင်ပါတယ်။ parents, childern , … စတာတွေမျိုးပေါ့။ HTML မှာ ရှိတဲ့ family tree code လေးကို ဥပမာအနေနဲ့ ကြည့်ရအောင်။
Continue reading “Learning Jquery 1.3”

Learning Jquery 1.3

Chapter 1 : Getting Start

အခုအချိန်မှာတော့ Web လောကမှာ dynamic တွေဖြစ်ကုန်ပြီး site တွေကို ဆွဲဆောင်မှုရှိလာအောင် interactive ဖြစ်လာအောင် developer တွေက ဖန်တီးလာတယ်။ အဲဒီလို ဖန်တီးရာမှာ လွယ်ကူလာအောင် JQuery လိုမျိုး javascript library တွေ အသုံးပြုလာတယ်။ Jquery ဟာ javascript library ဖြစ်ပြီး အခုအချိန်မှာ လူတောှတောှများများ အသုံးပြုရွေးချယ်နေကြပါတယ်။ Jquery မှာ function တွေအများအပြားရှိပြီးတော့ အခြား plugin တွေများပြားလို့လည်း လူသုံးများလာတယ်ဆို မမှားပါဘူး။ Jquery ဟာ HTML သာမက Cascading Style Sheets (CSS) တို့မှာရှိတဲ့ function တွေကို ခေါှပြီး အသုံးပြုလို့ရတယ်။ JQuery ကို အသုံးပြုမယ်ဆိုရင် programming skill အနည်းငယ်ရှိရမှာ ဖြစ်ပြီး web developers တွေအနေနဲ့ကတော့ programming experience ရှိပြီး javascript တတ်ကျွမ်းထားပြီးတွေ ဖြစ်တဲ့အတွက်ကြောင့် web developer တွေအနေနဲ့ jquery ကို လွယ်လွယ်နဲ့ လေ့လာနိုင်ပါတယ်။ အဲ တခြားအပိုင်းတွေ မပြောသေးခင် Jquery ဘာတွေ လုပ်နိုင်လဲဆိုတာ စပြောရအောင်။ Continue reading “Learning Jquery 1.3”