Friday, April 18, 2008

Alert Message Box ေလးမ်ားလုပ္နည္း


အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ…

ဒီတစ္ခါေတာ႔ အသစ္အဆန္းေလးတစ္ခု ေတြ႔ရွိလုိ႔ ျပန္လည္ ေ၀မွ်ခ်င္ပါတယ္.

ဘာလဲဆုိေတာ႔ Alert Message Box ေလးေတြ လုပ္နည္းပါ.

ကုိယ္႔ဘေလာ႔ဂ္ (သုိ႔) ၀က္ဘ္ဆုိက္ထဲကုိ ၀င္လာတဲ႔ စာဖတ္သူကုိ Message Box ေလးနဲ႔ ၾကိဳဆုိတာပဲျဖစ္ေစ၊ သိေစခ်င္တဲ႔ ေၾကျငာခ်က္ေလးေတြကုိ Highlight လုပ္ျပတာပဲ ျဖစ္ေစျဖစ္ေစ၊ သတိေပးေၾကျငာခ်င္တာေလးေတြကုိ ေျပာျပခ်င္တာပဲ ျဖစ္ေစေပါ႔ အလုိရွိသလုိ အသုံးခ်ႏုိင္ပါတယ္.

Message Box ေလးေတြကုိ လုပ္နည္း အမ်ိဳးမ်ိဳးရွိတဲ႔ အထဲက အဆင္ေျပဆုံး နည္းလမ္းေလးကုိ ေရြးခ်ယ္ျပီး ျပန္လည္ေဆြးေႏြးထားျခင္းသာ ျဖစ္ပါတယ္.

ကဲ. စလုိက္ၾကရေအာင္လားဗ်ာ…

Alert Box with OK Button

အဲဒါေလးကုိ လုပ္ဖုိ႔အတြက္ Template ထဲကုိသြားပါ. Page Elements ကုိသြားပါ. ျပီးေတာ႔ Add a page Element လုပ္ျပီး HTML/Javascript ကုိေရြးပါ. ျပီးရင္ ေအာက္ပါ ကုဒ္ဒင္းေလးေတြကုိ ထည္႔ေပးလုိက္ပါ.


<script type="text/javascript">
alert('You are about to enter an extremely funny site. People who are prone to laughing fits ... Beware!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>


အနီေရာင္နဲ႔ ျပထားတာေလးေတြက ကုိယ္ေပၚေစခ်င္တဲ႔ Message ေလးေတြပါ. အျပာေရာင္ေလးနဲ႔ ျပထားတာေလးကေတာ႔ တကယ္လုိ႔မ်ား user က သူ႔ရဲ႔ Browser မွာ Javascript Functions ကုိ off လုပ္ထားခဲ႔ရင္ ျပန္ဖြင္႔ေအာင္ သတိေပးထားတာပါ.

ျမန္မာလုိ ေပၚေစခ်င္တယ္ဆုိရင္ေတာ႔ Zawgyi-One ကုိ ထည္႔ေၾကျငာေပးရပါမယ္. ဒီမွာ အစမ္းလုပ္ျပထားတာ ၾကည္႔ပါ.


<script type="text/javascript">
alert(<font face="Zawgyi-One">'ေဟ႔ေဟ႔. သတိထားေနာ္. ခင္ဗ်ား အခုသြားေနတာ ကုိရန္ေအာင္ရဲ႔ ဘေလာ႔ဂ္ဗ်. ဟတ္ဟတ္ဟတ္.'</font>)
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>

ဒါမ်ိဳးေလးေပၚလာမွာ ျဖစ္ပါတယ္.




Alert Box with Confirmation Button

ဒါကက်ေတာ႔ စာဖတ္သူကုိ ေရြးခ်ယ္ခြင္႔ေပးတာပါ. ဆက္သြားမလား. ဒါမွမဟုတ္ မဖတ္ေတာ႔ဘဲ ျပန္ထြက္မလားဆိုတာကုိ ေရြးခုိင္းတာေပါ႔.

ခုနကလုိပါပဲ. Template ထဲကုိသြားပါ. Page Elements ကုိသြားပါ. ျပီးေတာ႔ Add a page Element လုပ္ျပီး HTML/Javascript ကုိေရြးပါ. ျပီးရင္ ေအာက္ပါ ကုဒ္ဒင္းေလးေတြကုိ ထည္႔ေပးလုိက္ပါ.


<script type="text/javascript">
confirm('This site contains explicit blogger hacks and tircks. You might bet dizzy. Are you sure you want to continue?');
if (confirm('This site contains explicit blogger hacks and tricks. You might bet dizzy. Are you sure you want to continue?')) {
window.location = "http://mmbloggershelpdesk.blogspot.com/";
}
else {
window.location = "http://www.yanaung.blogspot.com/";
}
</script>


အနီေရာင္နဲ႔ ျပထားတာေလးေတြက သင္ေပၚေစခ်င္တဲ႔ စာေၾကာင္းေလးေတြ ျဖစ္ပါတယ္. အျပာေရာင္ေလးနဲ႔ ျပထားတာေလးကေတာ႔ OK Button ကုိ ႏွိပ္လုိက္ရင္ ေရာက္ရွိသြားမယ္႔ လင္႔ခ္ျဖစ္ပါတယ္. လိေမၼာ္ေရာင္ေလးနဲ႔ ျပထားတာကေတာ႔ Cancel Button ကုိ ႏွိပ္လုိက္ရင္ စာဖတ္သူကုိ ျပန္ျပီးေတာ႔ Redirect လုပ္ေပးမယ္႔ စာမ်က္ႏွာျဖစ္ပါတယ္.

ဒါကေတာ႔ ျမန္မာလုိ ဥပမာေပးထားတာပါ.


<script type="text/javascript">
confirm(<font face="Zawgyi-One">'ေဟ႔ေဟ႔. သတိထားေနာ္. ခင္ဗ်ား အခုသြားေနတာ ကုိရန္ေအာင္ရဲ႔ ဘေလာ႔ဂ္ဗ်. ဟတ္ဟတ္ဟတ္. OK ကုိ ႏွိပ္လုိက္ရင္ ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ေလးကုိ ေရာက္လာမွာ ျဖစ္ျပီးေတာ႔ Cancel ကုိ ႏွိပ္လုိက္ရင္ေတာ႔ Helpdesk Blog ေလးကို ေရာက္သြားပါလိမ္႔မယ္. It’s up to you!'</font>);
if (confirm(<font face="Zawgyi-One">'ေဟ႔ေဟ႔. သတိထားေနာ္. ခင္ဗ်ား အခုသြားေနတာ ကုိရန္ေအာင္ရဲ႔ ဘေလာ႔ဂ္ဗ်. ဟတ္ဟတ္ဟတ္. OK ကုိ ႏွိပ္လုိက္ရင္ ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ေလးီကုိ ေရာက္လာမွာ ျဖစ္ျပီးေတာ႔ Cancel ကုိ ႏွိပ္လုိက္ရင္ေတာ႔ Helpdesk Blog ေလးကို ေရာက္သြားပါလိမ္႔မယ္. It’s up to you!'</font>)) {
window.location = "http://yanaung.blogspot.com/";
}
else {
window.location = "http://mmbloggershelpdesk.blogspot.com/";
}
</script>


ဒီလုိေလး ျဖစ္သြားပါလိမ္႔မယ္...



ဒီေလာက္ပါပဲ…

သိပ္ေတာ႔ အခက္အခဲမရွိလွဘူးလုိ႔ ထင္ပါတယ္.

ကဲ. ေကာင္းက်ိဳးဆုိးက်ဳိးေလးေတြ ဆက္ေဆြးေႏြးၾကည္႔လုိက္ၾကရေအာင္လားဗ်ာ..

ဒီလုိ Message Box ေလးေတြ လုပ္ထားတာဟာ ကုိယ္႔ရဲ႔ ဘေလာ႔ဂ္ (၀ါ) ၀က္ဘ္ဆုိက္အတြက္ လိုအပ္မွသာ လုပ္သင္႔ပါတယ္. ဘာလုိ႔လဲဆုိေတာ႔ အဲဒီ႔ Message Box ေလးေတြဟာ System Dialog Windows ေလးေတြ ျဖစ္ေနလုိ႔ပါပဲ. ဆုိလုိတာက ဒီ Box ေလးေတြ ေပၚဖုိ႔အတြက္ Browser မွာ Javascript ကုိ Enable လုပ္ထားရပါမယ္. ဒီေတာ႔ ကုိယ္႔ရဲ႔ Blog Page (or) Web Page ကုိ Upload လုပ္ေနရတဲ႔ အခ်ိန္ ပုိၾကာသြားႏုိင္ပါတယ္.
ေကာင္းတဲ႔ဖက္က ၾကည႔္မယ္ဆုိရင္ေတာ႔လည္း စာဖတ္သူကုိ Respect ေပးရာက်ပါတယ္.

ဥပမာဗ်ာ. ညစ္ညမ္းတဲ႔ Website တစ္ခုကို ၀င္ေတာ႔မယ္ ဆုိရင္.

“You must be at least 18 years old to enter this site!” ဆုိတဲ႔ Message Box ေလး ေပၚလာျပီး OK ႏွိပ္လုိက္မွ ဆက္ျပီး ခြင္႔ျပဳတာမ်ိဳးဆုိရင္ Internet Law ကုိ လုိက္နာရာက်ပါတယ္.

ဒါက ဥပမာ ေျပာျပတာပါ. တစ္ျခား အသုံး၀င္ေအာင္ သုံးတတ္ရင္ သုံးလုိ႔ျဖစ္မယ္႔ ေနရာေတြ အမ်ားၾကီး ရွိပါေသးတယ္. ၾကိဳက္သလုိသုံးပါ. ဥာဏ္ရွိသလုိ သုံးပါ.

ကၽြန္ေတာ္တုိ႔ ဘေလာ႔ဂ္ေလာကမွာေတာ႔ ဘာစည္းမ်ဥ္းဥပေဒသမွ မရိွေသးပါဘူး. ဒါေပမယ္႔ ဒီ Message box ေလးေတြဟာ စာဖတ္သူရဲ႔ ဥာဏ္ကြန္႔ျမဴးႏုိင္မႈေပၚ မူတည္ျပီး အမ်ိဳးမ်ိဳး အဖုံဖုံ အသုံး၀င္လာႏုိင္တာမုိ႔ ကၽြန္ေတာ္ဖတ္မွတ္ခဲ႔ဖူးတာေလးကုိ ျပန္လည္ေ၀မွ်လုိက္ျခင္းသာ ျဖစ္ပါတယ္ ခင္ဗ်ာ…

မွတ္ခ်က္။

သုံးတဲ႔ Browser နဲ႔ Operating Systems (ME, XP, Vista) စတာေတြေပၚ မူတည္ျပီးေတာ႔ ေပၚလာမယ္႔ Message Box ေလးေတြရဲ႔ ပုံစံလည္း ကဲြျပားျခားနားႏုိင္ပါတယ္.

အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္

ရန္ေအာင္

8 comments:

mmhan said...

This is actually a well written tutorial.

However, I gotta point out that, in this web 2.0 age, pointing out alert as something to do, is like pointing out a child where the lighter is located.

And it's not true that a few lines to call out alert function will slow down the upload or download process. It's just that, when an alert message appears every process of the browser has stopped until 'Ok' is pressed. Hence, this is not a typical or a clever solution to deliver a message the visitor of your site. Personally, I find it very annoying too.


These days, almost every site don't use these alert messages due to lack of control on their appearance. Generally, they'd use Lightbox or Fade In and Out the message on a visible area of the web.

I hope you don't take it the wrong way and get mad @ me though.

Peace ;)

Yan said...

Thanks for your discussion and correction to my post, bro!

No offense is taken coz your words are well said and I can see why you are pointing out the misconception.

That's the way we should have grown up and that's how I have developed myself too.

So, welcome to your comment, bro!

And to everybody whoever reading this post, please be advised that this post is just sharing whatever I found out and please also attend to ko mg mg han's comment too.

Cheers all...

Regards,

Yan.

Hteink Min said...

heheh.. မဆိုးဘူး ေကာင္းတယ္.. အားရင္ ထည့္လိုက္ဦးမယ္
ေက်းဇြန္း

Unknown said...

Thanks for your knowledge bro.. :)really great!!! Happy New Year :)

mmhan said...

Eek...

I should have kept quiet.

Now I got myself a new name. :|

မင္းက်န္စစ္။ said...

ပိုမိုက္သြားပီ ကိုရန္ေရ။ အရင္က တခါထည့္ဖူးတယ္။ တန္းပလိတ္ အတြင္းမွာ ထည့္တာ။ ျမန္မာေဖာင့္ေတာ့ မရလိုက္ဘူး။ မစဥ္းစားမိလုိက္တာ း) ခုေတာ့ အားလံုး အဆင္ေျပသြားျပီ။ လုိရင္ သံုးေတာ့မယ္။ ေက်းဇူး ကိုရန္ေရ။

mabaydar said...

friendster မွာသူမ်ားေတြလုပ္တာေတြ႔ဖူးတယ္.. friendster မွာဆိုရင္ code ကိုဘယ္နား ထည့္ရမလဲ သိခ်င္တယ္

သီဟ said...

ကိုရန္ေအာင္ေရ..
ကြၽန္ေတာ္ ေဝါ႔ပရတ္မွာ စမ္းထည္႔ၾကည္႔ပါတယ္..
ထည္႔ရတာက တက္ခ္ေဘာက္ မွာပါ..သို႔ေပမယ္႔
ဆိုက္ရဲ႔ဝဘ္ေပ႔ခ်္ ကိုေၿပာင္းတိုင္း ပို႔စ္ ေတြခ်ိန္းတိုင္း အဲ႔ မက္ေစ
ကေပၚေပၚလာပါတယ္..
ၾကာ၇င္ လူအၿမင္ကပ္မွာေသခ်ာတယ္..အဲ႔တာ ဘယ္လိုလုပ္ရပါ႔မလဲခင္ဗ်ာ..
ခင္မင္ေလးစားစြာၿဖင္႔
သီဟ