မဂၤလာပါ..
ဒီေန႔ေတာ့ jQuery သင္ခန္းစာ၊ စသင္ပါေတာ့မယ္။ အရင္ what is jQuery post မွာေတာ့ jQuery အေၾကာင္း အေသးစိတ္ ရွင္းျပထားၿပီးေတာ့ jQuery ကုိ download လုပ္ပုံကုိလည္း ရွင္းျပထားပါတယ္။ Download မလုပ္ရေသးတဲ့ လူမ်ား download လုပ္ထားဖို႔ လိုပါမယ္။ Download လုပ္လို႔ ရလာတဲ့ file ကုိ jquery.js လို႔ နာမည္ေျပာင္းေပးလိုက္ပါ။ desktop ေပၚမွာ test ဆုိတဲ့ folder တစ္ခုေဆာက္ၿပီးေတာ့ jquery.js ကုိ အဲဒီ folder ထဲ ထည့္ထားပါ။ jQuery download လုပ္ၿပီးၿပီဆုိရင္ေတာ့ ကုဒ္ (code) စေရးပါေတာ့မယ္။ အရင္ website building tutorials ေတြမွာတုန္းကေတာ့ ကၽြန္ေတာ္သုံးတဲ့ code ေရးတဲ့ software (text editor) ကုိေတာ့ ေျပာျပထားပါတယ္။ ဒီသင္ခန္းစာမွာေတာ့ notepad++ ကုိ အသုံးျပဳၿပီး ရွင္းျပသြားမွာျဖစ္ပါတယ္။ notepad++ ကုိ ဖြင့္လိုက္ပါ၊ ၿပီးရင္ file>new ကုိ ေခၚလိုက္ပါ။ file အသစ္ထဲမွာ ေအာက္ပါအတုိင္း ေသခ်ာ ရုိက္ထည့္ပါ (ကူးမထည့္ပါနဲ႔)
|
1 |
ၿပီးရင္ ခုန jquery.js သိမ္းထားတဲ့ test folder ထဲမွာပဲ index.html ဆုိတဲ့ နာမည္နဲ႔ သိမ္းလိုက္ပါ။ index ဆုိတာကေတာ့ ဖုိင္နာမည္ပါ။ ဘာျဖစ္လုိ႔ index လို႔ေပးရလဲဆုိေတာ့ တစ္ကယ့္ အင္တာနက္ ဆာဗာေပၚ တင္လိုက္ရင္ website လိပ္စာ ရုိက္ထည့္လုိက္တာနဲ႔ အရင္ဆုံး ေပၚေစခ်င္တဲ့ စာမ်က္ႏွာကုိ index ဒါမွမဟုတ္ default လို႔ ေပးရပါတယ္။ အခုကတည္းက ဖုိင္နာမည္ေပးတာ အက်င့္လုပ္ထားပါ။ ကုိယ့္စက္ထဲမွာ ကုိ run တာေတာ့ ဘာနာမည္ေပးေပးရပါတယ္။ .html ဆုိတာကေတာ့ ဖုိင္အမ်ဳိးအစားပါ၊ .htm ဆုိလည္းရပါတယ္။
<!doctype html> ဆုိတာကေတာ့ browser ကုိ document type က html document ျဖစ္ေၾကာင္းေျပာလိုက္တာပါ။ ဒီလိုေျပာလိုက္မွ browser က ကၽြန္ေတာ္တုိ႔ေရးတဲ့ code ေတြကုိ html အေနနဲ႔ ဘာသာျပန္ၿပီး ေဖာ္ျပရမယ္မွန္းသိမွာပါ။ အခု ကၽြန္ေတာ္တုိ႔ သင္ခန္းစာက jQuery ဆုိေပမယ့္ html က မပါမျဖစ္ပါပဲ။
<head> က အဖြင့္ ေခါင္းပုိင္း အဖြင့္ ျဖစ္ၿပီးေတာ့ </head> က ေခါင္းပုိင္း အပိတ္ျဖစ္ပါတယ္။
<body> က ကုိယ္ထည္ပုိင္း အဖြင့္ျဖစ္ၿပီးေတာ့ </body> က ကုိယ္ထည္အပိတ္ျဖစ္ပါတယ္။
အေျခခံ html document တစ္ခုမွာ ဒီပုံစံက မပါမျဖစ္ပါပဲ။ ဒီအတုိင္း ေရးၿပီးၿပီဆုိရင္ေတာ့ ေခါင္းပုိင္း အဖြင့္နဲ႔ အပိတ္ၾကားမွာ
|
1 |
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
လို႔ ရုိက္ထည့္ပါ။ title ဆုိတာက ကၽြန္ေတာ္တုိ႔ html document မွာ ေခါင္းစဥ္ထုိးတာျဖစ္ပါတယ္။ browser ရဲ႕ tab ေတြမွာ ေပၚပါတယ္။ ေနာက္ script ဆုိတာကေတာ့ jquery ကုိ link ခ်ိတ္မယ့္ စာေၾကာင္းပါ။ script အမ်ဳိးအစားေတြ အမ်ားႀကီး ရွိတာေၾကာင့္ type=”text/javascript” ဆုိၿပီးေတာ့ javascript ျဖစ္ေၾကာင္း ေၾကျငာရပါေသးတယ္။ ေနာက္တစ္ခု src ဆုိတာကေတာ့ source ရဲ႕အတုိေကာက္ပါ
ၿပီးရင္ေတာ့ ကုိယ္ထည္ အဖြင့္နဲ႔အပိတ္ၾကားမွာ
|
1 |
<input type="button" value="hide me" /> |
လို႔ ရုိက္ထည့္ပါ။ user က ဆုံးျဖတ္ရမယ့္အရာမွန္သမွ် input နဲ႔ေရးပါတယ္။ type=”button” ဆုိတာကေတာ့ ႏွိပ္လို႔ရတဲ့ ခလုတ္အမ်ဳိးအစားျဖစ္ပါတယ္လို႔ ေျပာတာပါ။ value ဆုိတာကေတာ့ အဲဒီ button မွာ ေပၚေနေစခ်င္တဲ့စာသားပါ။ အဲဒါရုိက္ထည့္ၿပီးရင္ ဒီတစ္ခါ ေခါင္းပုိင္း အဖြင့္အပိတ္ၾကားထဲမွာ ေအာက္ကအတုိင္း ရုိက္ထည့္ပါ။
|
1 2 3 4 5 6 7 |
<script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $("input:button").click(function(){ $(this).hide(); }); }); // ]]></script> |
ခုနလိုပဲ script အမ်ဳိးအစား ေၾကျငာပါတယ္။ ၿပီးရင္ေတာ့ $ ဆုိတာက jQuery ရဲ႕အစား သုံးတာပါ၊ $ မသုံးခ်င္ရင္ $ ေနရာတုိင္းမွာ jQuery လို႔ လိုက္ေရးၿပီး သုံးလည္းရပါတယ္။ $(document) ဆုိတာက jQuery နဲ႔ ကၽြန္ေတာ္တုိ႔ html document တစ္ခုလုံးကုိ select ေပးလိုက္တာပါ။ .ready() ဆုိတာကေတာ့ ဒီ document ႀကီး အဆင္သင့္ျဖစ္ၿပီဆုိရင္ ဆုိတဲ့အဓိပၸါယ္ပါ။ အဲဒီလို အဆင္သင့္ျဖစ္ရင္ ေနာက္က function() ဆက္လာပါတယ္။ ဘာ function လဲဆုိေတာ့ input:button ဆုိတာ input type က button ျဖစ္ၿပီး .click() ကေတာ့ click လုပ္လိုက္ရင္ဆုိတဲ့ အဓိပၸါယ္ရပါတယ္။ input type button ကုိ click လုပ္လိုက္ရင္ဆုိတဲ့ အဓိပၸါယ္ပါ။ click လုပ္လိုက္ရင္ ဘာဆက္ျဖစ္မလဲဆုိေတာ့ ေနာက္က function ကုိ ဆက္ၾကည့္ပါ။ this ဆုိတာ ဒီဟာဆုိတဲ့ အဓိပၸါယ္အတုိင္းပဲျဖစ္ၿပီးေတာ့ .hide() ဆုိတာကေတာ့ ေဖ်ာက္လိုက္မယ္ေပါ့။ အဲေတာ့ အဓိပၸါယ္က input type button ကုိ click လုပ္ရင္ ဒီဟာကုိ ေဖ်ာက္ပစ္မယ္ လို႔ အဓိပၸါယ္ရပါတယ္။ ဒီဟာဆုိတာ ဘယ္ေကာင္ျဖစ္မလဲ click အႏွိပ္ခံရတဲ့ ေကာင္ပါပဲ။ ဒီေလာက္ဆုိ နားလည္ေလာက္ပါၿပီ။ .hide() ေနရာမွာ .fadeIn(), .fadeOut() စတာေတြကုိလည္း သုံးၿပီး စမ္းၾကည့္ပါ။ အားလုံးနားလည္ဖုိ႔အတြက္ အဓိကထားေရးတာမို႔လို႔ စာအေရးအသားက ဖတ္ရခက္ေနမယ္ဆုိလည္း သည္းခံဖတ္ပါ။ ေက်းဇူးတင္ပါတယ္။
ေနာက္ဆုံး code က ေအာက္ပါအတုိင္းျဖစ္ပါတယ္။ မတူတာရွိရင္ ေသခ်ာ စစ္ေဆးၿပီးေတာ့ လိုက္ေရးၾကည့္ပါ။ ၿပီးရင္ index.html ကုိ browser မွာ ဖြင့္ၿပီးေတာ့ ခလုတ္ေလးကုိ ႏွိပ္ၾကည့္ၾကပါ။
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $("input:button").click(function(){ $(this).hide(); }); }); // ]]></script> <input type="button" value="hide me" /> |
ok nice… Thanks