မဂၤလာပါ..
ဒီတစ္ေခါက္ေတာ့ နည္းနည္းေလး ပုိခက္တဲ့ သင္ခန္းစာကုိ ဆက္သြားပါမယ္။ ဒီသင္ခန္းစာမဖတ္ခင္ အရင္က ေရးဖူးတဲ့
01. What is jQuery
ႏွစ္ခုကုိ ဖတ္ဖူးထားရပါမယ္။
ဒီတစ္ေခါက္သင္ခန္းစာမွာေတာ့ css ေလးလည္း နည္းနည္းပါပါမယ္။ ဒီေတာ့ ကၽြန္ေတာ္တုိ႔ coding စေရးရေအာင္ဗ်ာ။
notepad++ ကုိဖြင့္လိုက္ပါ။ body tag “<body>” ထဲမွာ ေရးရမယ့္ html code ကေတာ့ ေအာက္ပါအတုိင္း ျဖစ္ပါတယ္။ (code တစ္ေၾကာင္း ႏွစ္ေၾကာင္းေလာက္ ေရးၿပီးတုိင္း browser မွာ refresh လုပ္ပါ)
|
1 2 |
<input type="button" value="Show/Hide Box" /> <div id="box"></div> |
အရင္တစ္ေခါက္ကအတုိင္းပါပဲ id ကုိ box လို႔ေပးထားတဲ့ div ေလးတစ္ခု ပုိလာတာပဲရွိတာပါ။ div မွာလည္း အဖြင့္နဲ႔ အပိတ္ ဆုိၿပီးရွိပါတယ္။ အဲဒီ box ဆုိတဲ့ div ကုိ ေလးေထာင့္အတုံးပုံစံေပၚေနဖုိ႔အတြက္ ေခါင္းပုိင္း အဖြင့္ အပိတ္ထဲမွာ css နည္းနည္းေရးရပါမယ္။ ေအာက္ပါအတုိင္းပါ
|
1 |
ဒီ code မွာ #box မွာ # ဆုိတာက ကၽြန္ေတာ္တုိ႔ html မွာ ေရးခဲ့တဲ့ div ေတြကုိ css ကေန ျပန္ေခၚရင္ # တပ္ၿပီး ေခၚရပါတယ္။ ဒါေၾကာင့္ html မွာ <div id=”box”> ကုိ css မွာ ျပန္ေခၚေတာ့ #box ျဖစ္သြားပါတယ္။ width နဲ႔ height ကုိေတာ့ သိမွာပါ။ display မွာ တန္ဖုိးေတြ အမ်ားႀကီးရွိပါတယ္။ အမ်ားႀကီးရွိတဲ့ထဲကမွ အသုံးအမ်ားဆုံး block, inline, none သုံးခုေလာက္ကုိ မွတ္ထားပါ။ အခု display:none ဆုိတာ ဒီ box ဆုိတဲ့ div ကုိ ဘာမွမျပပါနဲ႔လုိ႔ ေျပာလုိက္တာပါ (box div က ရွိေတာ့ရွိေနပါတယ္။ ခလုတ္ႏွိပ္မွ ေပၚလာေစခ်င္လို႔ မျပခုိင္းေသးတာပါ)
Background ကုိ ရွင္းျပဖုိ႔အတြက္ ကၽြန္ေတာ္ စာပုိဒ္ အသစ္တစ္ပုိဒ္ စလိုက္ပါတယ္။ မ်ားမ်ား ရွင္းျပေပးမွာမုိ႔လို႔ပါ။ background ဆုိတာ ေနာက္ခံပါ၊ ေနာက္ခံပုံလည္း ျဖစ္ႏုိင္သလို၊ ေနာက္ခံအေရာင္လည္းျဖစ္ႏုိင္ပါတယ္။ ေနာက္ခံကုိ အေရာင္ေပးမယ္ဆုိရင္ေတာ့ ေအာက္ပါအတုိင္း သုံးမ်ဳိးနဲ႔ ေပးလို႔ရပါတယ္။
red, yellow, black,…
(စသျဖင့္ အေရာင္နာမည္ေတြ အသုံးျပဳၿပီး ေသာ္လည္းေကာင္း)
rgb(0, 0, 0)
(rgb ဆုိတာ red, green, blue လို႔ အဓိပၸါယ္ရပါတယ္။ အေနာက္က “0” ေနရာမွာ 0 ကေန 255 အတြင္း ေပးလို႔ရပါတယ္။ ကၽြန္ေတာ္တုိ႔ လိုခ်င္တဲ့အေရာင္ကုိ r, g, b သုံးေရာင္ကုိ လုိတုိး ပုိေလွ်ာ့လုပ္ၿပီး ရေအာင္လုပ္လို႔ရပါတယ္၊ ဒါေၾကာင့္မုိ႔ ေနာက္ထပ္ r, g, b သုံးေရာင္နဲ႔ အေရာင္ေပးတဲ့ စနစ္ေနာက္တစ္မ်ဳိးက)
#aabbcc
(ဒီစနစ္က # မွာေတာ့ div ကုိ ဆုိလိုတာမဟုတ္ပဲ hexacode လို႔ ဆုိလိုတာျဖစ္ပါတယ္။ ဒီစနစ္မွာ a တုိ႔ b တုိ႔ c တုိ႔ ေနရာေတြမွာ 0 ကေန f အထိ ေပးလို႔ရပါတယ္။ ဆုိလိုတာက 0 ကေန 9 အထိ၊ ၿပီးရင္ a ကေန f အထိ ျဖစ္ပါတယ္။ 0 ကေန f အထိ စုစုေပါင္း 16 လုံးရွိပါတယ္။ 16 ကုိ hexa လို႔ ေခၚပါတယ္၊ ဒါေၾကာင့္ ဒီအေရာင္ေပးတဲ့ စနစ္ကုိ hexacode စနစ္လို႔ ေခၚပါတယ္။ ေရွ႕ a ႏွစ္လုံးက red အတြက္ျဖစ္ပါတယ္။ a ႏွစ္လုံးမတူလည္းရပါတယ္၊ ဒါေပမယ့္ တူရင္ေတာ့ ႏွစ္လုံးေနရာမွာ တစ္လုံးတည္းေရးလို႔ရပါတယ္။ b ႏွစ္လုံးက green အတြက္ျဖစ္ၿပီးေတာ့ c ႏွစ္လုံးကေတာ့ blue အတြက္ျဖစ္ပါတယ္။ (ကၽြန္ေတာ္ေပးထားတဲ့ အေရာင္ကုဒ္ကုိၾကည့္ပါ တူလို႔ တစ္လုံးစီပဲေပးထားပါတယ္)။
ဒါဆုိရင္ ကၽြန္ေတာ္တုိ႔အတြက္ က်န္တာ script ပဲ က်န္ပါေတာ့တယ္။ <head> tag ထဲမွာ ေအာက္ပါအတုိင္း ရုိက္ထည့္ပါ။
|
1 2 3 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>// <![CDATA[ $(document).ready(function(){ $(":button").click(function(){ $("#box").slideToggle(); }); }); // ]]></script> |
ဒီထဲမွာ အသစ္ဆုိလို႔
$(“#box”).slideToggle();
တစ္ခုပဲ ရွိပါတယ္။ click လုပ္တဲ့အထိ jQuery tutorial 01 နဲ႔ အတူတူပါပဲ။ အရင္ သင္ခန္းစာမွာေတာ့ click လုပ္လိုက္တဲ့အခါမွာ click လုပ္ခံရတဲ့ button ကုိ ေဖ်ာက္ပစ္တာပါ။ ဒီတစ္ခါမွာေတာ့ click လုပ္လိုက္ရင္ box div ကုိ ေဖာ္လိုက္ ေဖ်ာက္လိုက္ လုပ္မွာျဖစ္တဲ့အတြက္ အရင္တစ္ေခါက္နဲ႔ နည္းနည္းေလး ကြာပါတယ္။
အရင္တစ္ေခါက္က $(this) ေနရာမွာ ကၽြန္ေတာ္တုိ႔ ေဖာ္/ေဖ်ာက္ ခ်င္တဲ့ $(“#box”) ျဖစ္သြားပါတယ္။ jQuery မွာလည္း div ကုိ select လုပ္ရင္ # ထည့္ေပးရပါတယ္။ ေနာက္ function ကေတာ့ အသစ္ပါ။ အရင္ post က .hide() အစား ဒီတစ္ေခါက္ post မွာေတာ့ .slideToggle() ဆုိတဲ့ function ကုိ သုံးပါမယ္။ ဒီ function ကပဲ box div ကုိ ေပၚလိုက္ ေပ်ာက္လိုက္ ျဖစ္ေအာင္ လုပ္ေပးမွာ ျဖစ္ပါတယ္။ ေနာက္ဆုံး ကုဒ္ အျပည့္အစုံကေတာ့ ေအာက္ပါအတုိင္း ျဖစ္ပါတယ္။ အခုထိ ေရးလာတာမတူေသးတဲ့လူမ်ား တုိက္ၾကည့္ၿပီး လြဲေနတာေလးေတြျပင္လိုက္ပါ။ မတူတာျပင္ဆုိလို႔ အေပၚေအာက္ ကြာတာအစ လုိက္မျပင္ပါနဲ႔ ေခါင္းပုိင္းမွာထည့္ရမယ့္ ကုဒ္ကုိ ေခါင္းပုိင္းမွာ ထည့္ထားရင္ ရပါၿပီ။ အေပၚေအာက္ကြာတာ ျပႆနာ မရွိပါဘူး။
|
1 2 3 4 5 6 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>// <![CDATA[ $(document).ready(function(){ $(":button").click(function(){ $("#box").slideToggle(); }); }); // ]]></script> <input type="button" value="Show/Hide Box" /> <div id="box"></div> |
slideToggle() ရဲ႕ ကြင္းစနဲ႔ ကြင္းပိတ္ ၾကားမွာ ေပၚလာမယ့္ ေပ်ာက္သြားမယ့္ အျမန္ႏႈန္းကုိ milisecond နဲ႔ ထည့္ႏုိင္ပါတယ္။ ဥပမာ ေပၚတာ ေပ်ာက္တာ တစ္စကၠန္႔ေလာက္ ၾကာခ်င္တယ္ဆုိရင္ slideToggle(“1000”) လို႔ ေရးရပါမယ္။ အျမန္ႏႈန္းကုိ ဂဏန္းေတြနဲ႔ ေပးလို႔ရသလို စာသားနဲ႔လည္း ေပးလို႔ရပါတယ္။ (ဥပမာ။ ။ fast, slow). ေက်းဇူးတင္ပါတယ္။ ေနာက္တစ္ေခါက္ သင္ခန္းစာမွာေတာ့ seo service website (www.seo.sg) က slider ကုိ ေရးၾကည့္ပါမယ္။