မဂၤလာပါ …
ကၽြန္ေတာ္ ဒီတစ္ေခါက္ ေရးမယ့္ နမူနာ ပုံစံကုိ demo မွာ သြားၾကည့္ပါ။ SEO Service website (www.seo.sg) က slider ကုိ သင္မယ္လို႔ ေျပာထားေပမယ့္ ရုတ္တရက္ႀကီး ျမင့္တက္သြားမွာစုိးလို႔၊ if else ေလး အရင္ သင္ၾကတာေပါ့။ ဒီေန႔ေတာ့ မေန႔က သင္ခန္းစာကုိ နည္းနည္းေလး ပုိေကာင္းသြားေအာင္၊ ပုိၿပီး သဘာဝက်သြားေအာင္ ကုဒ္ေလး နည္းနည္း ထပ္ျဖည့္ျပပါမယ္။ မေန႔က jQuery slideToggle Tutorial မွာ Button ကုိႏွိပ္လုိက္ရင္ေတာ့ box ကေတာ့ ေပၚလိုက္ ေပ်ာက္လုိက္ ျဖစ္ပါၿပီ။ ဒါေပမယ့္ Button ေပၚက စာက အေသပဲျဖစ္ေနပါတယ္။ အဲဒါကုိ ကၽြန္ေတာ္က ေျပာင္းခ်င္တာပါ။ ဘယ္လိုမ်ဳိးေျပာင္းခ်င္လဲဆုိေတာ့ –
– box မေပၚတဲ့ အေျခအေနမွာ button ေပၚက စာကုိ Show Box လို႔ ျဖစ္ေစခ်င္ၿပီးေတာ့
– box ေပၚေနတဲ့ အေျခအေနမွာ button ေပၚက စာကုိ Hide Box လုိ႔ ျဖစ္ေစခ်င္တာပါ။
if, else ကုိ အသုံးျပဳၿပီးေတာ့ ေရးမွာျဖစ္ပါတယ္။
ဒီေတာ့ လုိအပ္တဲ့ ျပင္ဆင္ခ်က္ေလး နည္းနည္းလုပ္ပါမယ္။ အရင္သင္ခန္းစာရဲ႕ tag ထဲက button ရဲ႕ value ကုိ Show/Hide Box ကေန Show Box လို႔ ေျပာင္းလိုက္ပါ။ အရင္ သင္ခန္းစာက
|
1 |
<input type="button" value="Show/Hide Box" /> |
ကေန
|
1 |
<input type="button" value="Show Box" /> |
ျဖစ္သြားပါလိမ့္မယ္။ Button ကုိ ကလစ္ႏွိပ္လိုက္တာနဲ႔ jQuery နဲ႔ button ရဲ႕ value က ဘာလဲဆုိတာ စစ္ပါမယ္။ အဲဒီအခ်ိန္မွာ Button ရဲ႕ value က Show Box ျဖစ္ေနခဲ့မယ္ဆုိရင္ Hide Box လို႔ ေျပာင္းမယ္၊ Hide Box ျဖစ္ေနရင္ Show Box လို႔ ေျပာင္းမွာျဖစ္ပါတယ္။ ရွင္းသြားေအာင္ လက္ေတြ႕ေရးၿပီးေတာ့ စမ္းၾကည့္လိုက္ပါဦး။ button ရဲ႕ value ကုိေျပာင္းၿပီးၿပီဆုိရင္ေတာ့ ေနာက္ထပ္ ထဲမွာ jQuery ကုိ နည္းနည္းေလးထပ္ေျပာင္းရပါမယ္။ အရင္သင္ခန္းစာ
|
1 2 3 |
<script src="jquery.js"></script><script>// <![CDATA[ $(document).ready(function(){ $(":button").click(function(){ $("#box").slideToggle(); }); }); // ]]></script> |
ကေန
|
1 2 3 |
<script src="jquery.js"></script><script>// <![CDATA[ $(document).ready(function(){ $(":button").click(function(){ $("#box").slideToggle(); if($(this).val()=="Show Box"){ $(this).val("Hide Box"); } else { $(this).val("Show Box"); } }); }); // ]]></script> |
ျဖစ္သြားပါမယ္။ ရွင္းျပပါမယ္။ ကၽြန္ေတာ္တုိ႔ button ကုိ click ႏွိပ္လိုက္တဲ့အခါမွာ button ရဲ႕ value က Show Box ျဖစ္ေနမလားဆုိတာကုိ
if($(this).val()==”Show Box”)
နဲ႔ စုံစမ္းလိုက္ပါတယ္၊ Show Box ျဖစ္ေနရင္ if ေအာက္က
$(this).val(“Hide Box”);
ကုဒ္နဲ႔ Hide Box လို႔ ေျပာင္းလိုက္ပါတယ္။ သေဘာတရားက Show Box ျဖစ္ေနရင္ Hide Box လို႔ေျပာင္းလုိက္တာ ျဖစ္ပါတယ္။ Show Box မွမဟုတ္ရင္ (Hide Box ျဖစ္ေနခဲ့ရင္)
else {
$(this).val(“Show Box”);
}
ကုဒ္နဲ႔ Show Box ျဖစ္ေအာင္ ျပန္ေျပာင္းလိုက္ပါတယ္။ နားလည္မယ္လုိ႔ ေမွ်ာ္လင့္ပါတယ္။ နားမလည္ရင္ comment ေရးခဲ့ႏုိင္ပါတယ္။ ေနာက္ဆုံး source code ကေတာ့ ေအာက္ပါအတုိင္းျဖစ္ပါတယ္။ တုိက္စစ္ၾကည့္ပါဦး။
|
1 2 3 4 5 6 7 |
jQuery Tutorials <script src="jquery.js"></script><script>// <![CDATA[ $(document).ready(function(){ $(":button").click(function(){ $("#box").slideToggle(); if($(this).val()=="Hide Box"){ $(this).val("Show Box"); } else { $(this).val("Hide Box"); } }); }); // ]]></script> <input type="button" value="Show Box" /> <div id="box"></div> |
HTML က value ဆိုတ့ဲ attrib: က jquery မွာ ေခၚသံုးရင္ val လို့ သံုးရတာလား ဟင္…
အကုိ႔ က်ဴတိုရီယယ္ေတြက အရမ္းေကာင္းပါတယ္။
ေနာက္လဲ jquery နဲ့ပတ္သတ္တာေတြ ထပ္ တင္ေပးပါေနာ္….
jQuery က .val() ဆုိတာက html u value attribute ကုိ လွမ္း select လုပ္လုိက္တာပါ။
က်ေနာ္အစမ္းေရးေနတဲ႔ CMS website တစ္ခုရွိပါတယ္
အဲမွာ blog တစ္ခုထည္႔ၾကည္႔ပါတယ္ blog မွာ ထည္႔သမွ်စာေတြကအကုန္ေပၚေနလို႕ပါ
က်ေနာ္က continute reading ထည္႔ခ်င္တာပါ ။
အခုဒီ post ေတြ႕လို႕ ဒီ post ထဲကလိုစာေတြကို show / hide လုပ္လို႕ရပါမလားဆရာ
ရရင္နည္းလမ္းေလးသိခ်င္ပါတယ္ ။ ေက်းဇူးတင္ပါတယ္