System

JQuery ( Styling And Events Handling)

မဂၤလာပါ။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar တြင္ အလုပ္လုပ္ကိုင္လ်က္ရွိေသာ ေဌးမင္းေခါင္ ျဖစ္ပါတယ္။ ယေန႔ ကြၽန္ေတာ္ကေတ့ JQuery Library ကို အသုံးျပဳၿပီး DOM မ်ားကို Styling လုပ္ျခင္း၊ Event မ်ား ထည့္သြင္းျခင္း မ်ားႏွင့္ ပတ္သက္၍ ေျပာျပခ်င္ပါတယ္။

အရင္ဦးဆံုး index.html ဖိုင္ေလး အရင္ တည္ေဆာက္ပါမယ္။
ၿပီးရင္ html ကုဒ္မ်ား ထည့္ပါမယ္။

 



	JQuery ( Styling & Events )
	


	

JQuery ကို အသုံးျပဳဖို႔အတြက္ CDN ခ်ိတ္ပါမယ္။
CDN ကို ခ်ိတ္သုံးဖို႔အတြက္ ဒီ link ကို https://code.jquery.com/ ဝင္ၿပီး minified ကို ႏွိပ္လိုက္ပါ။ Pop Up Box ေပၚလာရင္ Copy Icon ကို ႏွိပ္၍ Copy ကူးပါ။

ၿပီးရင္ Tag ေအာက္တြင္ Paste လုပ္ေပးပါ။

 
	

အခုဆို JQuery ခ်ိတ္လို႔ ၿပီးသြားပါၿပီ။

div ႏွစ္ခုနဲ႔ button သုံးခု ထည့္ပါမယ္။

 
	

CSS Style ထည့္ပါမယ္။ Style အဖြင့္ အပိတ္ျဖင့္ ေရးၿပီး ေအာက္က ကုဒ္ကို ထည့္ပါမယ္။

 
	#css_styling{
		border: 1px solid black;
		width: 250px;
		height: 250px;
	}

	.actions{
		margin-top: 10px;
	}

အခုဆိုရင္ div button မ်ား ေနရာခ်ၿပီးပါၿပီ။ Button မ်ားအတြက္ Click Event အရင္ ထည့္ပါမယ္။

နံပါတ္ ၁ ( Single Styling )
Styling တစ္ခုခ်င္းစီ ထည့္ပါမယ္။

 
$('.action.add').click(function(){

	// Apply CSS Styling with Single Styling
	$('#css_styling').css("borderColor", "red"); // Method 1
	$('#css_styling').css("border-color", "red"); // Method 2

});

CSS Styling ကို inline ပုံစံ JQuery ျဖင့္ ထည့္ျခင္း ျဖစ္ပါတယ္။ Method 1 နဲ႔ Method 2 မိမိႀကိဳက္တဲ့ ပုံစံျဖင့္ ေရးလို႔ ရပါတယ္။
အခုဆို Add ခလုတ္ကို ႏွိပ္မယ္ဆိုရင္ div မွာ border အေရာင္ အနီျဖစ္သြားမွာ ျဖစ္ပါတယ္။

နံပါတ္ ၂ ( Multiple Styling )
Styling ကို တစ္ခုထပ္မက ထည့္ခ်င္တယ္။ ကုဒ္ကိုလည္း တစ္လိုင္းတည္း ေရးခ်င္တယ္ဆိုရင္ ေအာက္ပါ အတိုင္း ထည့္ပါမယ္။

 
	$('#css_styling').css({
		"border-color": "red",
		"background-color": "red"
	});

Styling ထည့္လို့ရသလို Animation နဲ့လည္း တြဲထည့္လို့ ရပါတယ္။

 
	$('#css_styling').animate({
		"width": "125px",
		"height": "125px",
	}, 500);

အခုဆိုရင္ ကုဒ္က ေအာက္ပါအတိုင္း ထြက္လာပါမယ္။

 
$('.action.add').click(function(){

	$('#css_styling').css({
		"border-color": "red",
		"background-color": "red"
	});

	$('#css_styling').animate({
		"width": "125px",
		"height": "125px",
	}, 500);

});

အ‌ေပါ္ကုဒ္ကို Run မယ္ဆိုရင္ border မွာ အနီေရာင္ျဖစ္မွာ ျဖစ္ျပီး div size လည္း animation နွင့္အတူ ျကီးလာမွာ ျဖစ္ပါတယ္။

အခုတစ္ခါမွာေတာ့ remove button မွာ click event ကို ထည့္ပါမယ္။ Background Color အ‌ေရာင္ကို ျဖုတ္ဖို့အတြက္ blank ထားလိုက္ရင္ ေပ်ာက္သြားပါမယ္။

 
$('.action.remove').click(function(){
	$('#css_styling').css('background-color', '');
});

Remove All button အတြက္ကေတာ့ ခုနက ထည့္သမွ် ျပန္ျဖုတ္ခ်င္တဲ့အတြက္ style တစ္ခုလံုးကို ျဖုတ္လိုက္ပါမယ္။

 
$('.action.remove_all').click(function(){
	$('#css_styling').removeAttr('style');
});

အခုလို ဖတ္ရႈေပးတဲ့ အတြက္ ေက်းဇူးတင္ပါတယ္။ သာယာေသာ ေန႔ရက္ေလး ျဖစ္ပါေစ။

Hello

Leave a Reply

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