မင်္ဂလာပါ။
ကျွန်တော်ကတော့ Spiceworks Myanmar Co.,Ltd ၏ System Team မှာ အလုပ်လုပ်နေသော ဌေးမင်းခေါင် ဖြစ်ပါတယ်။ ကျွန်တော် ယနေ့ ရှင်းပြမည့် အကြောင်းအရာကတော့ JQuery Library မှာ အသုံးပြုမည့် အခြေခံ function များအကြောင်း ဖြစ်ပါတယ်။
JQuery CDN
JQuery အသုံးပြုမယ်ဆိုရင် ကျွန်တော်ကတော့ CDN (Content Delivery Network) နဲ့ ချိတ်ဆက်ပြီး သုံးပါတယ်။
Cloudflare
JQuery ချိတ်တဲ့အခါ .min ပါတဲ့ ဖိုင်ကို ချိတ်သင့်ပါတယ်။ ၎င်းအဓိပ္ပါယ်က ၎င်း jquery ဖိုင်သည် Minimize ( ဖိုင်အရွယ်အစား သေးအောင် ချုံ့ထားခြင်း ) ဖြစ်ပါသည်။
JQuery Events
JQuery Events များကို Binding လုပ်တဲ့ နည်းလမ်းများကို ကျွန်တော်သိသလောက် ရေးပြပေးပါ့မယ်။
HTML
JavaScript ( On Events )
$('.btn').on('click', function(){
alert("HELLO WORLD");
});
On Binding Events ကတော့ Page ရှိ/Dynamically ထည့်မည့် class အားလုံး အကျုံးဝင်ပါတယ်။ ၎င်း၏ကောင်းတဲ့ အချက်ကတော့ Page Loading မှာ မရှိသေးဘဲ Loading ပြီးမှ ထွက်လာမယ့် Class Elements အားလုံးအတွက် အလုပ်လုပ်ပေးမှာ ဖြစ်ပါတယ်။
Dynamic အတွက် စမ်းသပ်မည်ဆိုလျှင်
$('.btn').on('click', function(){
alert("HELLO WORLD");
$('body').append('button class="btn">Click Me');
});
JavaScript ( One Time )
$('.btn').click(function(){
alert("HELLO WORLD");
$('body').append('button class="btn">Click Me');
});
၎င်းကတော့ JS Run တဲ့ အချိန် ရှိနေတဲ့ Class Element အပေါ်မှာဘဲ အလုပ်လုပ်ပါတယ်။ ထပ် append လုပ်မည့် elements ပေါ်မှာတော့ Effect သက်ရောက်မှု ရှိမှာ မဟုတ်ပါဘူး။ ခလုတ်ကို နှိပ်လိုက်ရင် HELLO WORLD Alert ပေါ်လာမှာ ဖြစ်ပြီး ခလုတ်တစ်ခု Append လုပ်မှာ ဖြစ်ပါတယ်။ ၎င်း အသစ်ထွက်လာတဲ့ ခလုတ်ကို နှိပ်ရင် .click function အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။
နောက်တစ်ခုကတော့ binding click ဖြစ်ပါတယ်။
JavaScript ( Binding )
$('.btn').binding('click', function(){
alert("HELLO WORLD");
});
Binding ကတော့ မိမိ ထည့်ချင်တဲ့ အခြေအနေကျမှ Events Action ကို ထည့်တာ ဖြစ်ပါတယ်။
Applying CSS Class
.red{
color: red;
}
$('#btn').click(function(){
$(this).addClass('red');
});
Click Action မှာ Class Name ကို ထည့်တာ ဖြစ်ပါတယ်။
$('#btn').click(function(){
$(this).removeClass('red');
});
Click Action မှာ Class Name ကို ပြန်ဖြုတ်မှာ ဖြစ်ပါတယ်။
ယခုလို အချိန်ပေး ဖတ်ရှုပေးသည့်အတွက် ကျေးဇူးတင်ပါတယ်။
