HTML5 Context Menu

ဒီနေ့တော့ နည်းပညာပိုင်းဆိုင်ရာ အကြောင်းအရာလေးတစ်ခု ရေးချင်ပါတယ်။ HTML5 Context Menu API အကြောင်းအနည်းငယ်ပါ။ သိပ် အခက်ကြီးမဟုတ်ပေမယ့် အချို့နေရာ တွေမှာ အသုံးဝင်နိုင်တဲ့ အတွက် ပြောပြချင်ပါတယ်။

Context Menu

ဘယောက်ဆာ တွေတော်တော်များများ မှာ Context Menu ပါပါတယ်။ ဥပမာပြရမယ်ဆိုရင်

Screen Shot 2014-05-29 at 1.40.08Website က စာတွေ ပုံတွေပေါ်မှာ ယူဇာက Right Click ခေါ်ပြီး ပုံတွေသိမ်းတာတို့ စာတွေ ကူးတာတို့ လုပ်ဖို့အတွက် ဘယောက်ဆာက ထည့် ပေးထားတဲ့ မီနူးလေးတစ်ခုပါ။ အပေါ်က ပြထားတာကတော့ မူလကတည်းက ပါလာမယ့် မီနူး တွေပါ။

အဲ့လိုမီနူးမျိုး ကိုယ့်ယူဇာတွေ အတွက်ထည့် ပေးချင်တယ်ဆိုရင် HTML5  နဲ့ဆိုလွယ်သွားပါပြီ။ လောလောဆယ်တော့ Firefox ကပဲ ဒီ Feature ကို Support ပေးထားပါတယ်။ Status ကို ဒီမှာ သွားကြည့်လို့ရပါတယ် ။

ကဲစရေးကြည့်ရအောင် ။

Screen Shot 2014-05-29 at 1.45.39အရင်ဆုံး div တစ်ခုတည်ဆောက်ပြီး contextmenu ကို ID ပေးပါမယ်။ ပေးထားတဲ့ id တန်ဖိုးအတိုင်း တစ်နေရာမှာ Menu Item တွေရေးပေးရပါမယ် ။

Item တွေကို ထည့်တာလဲလွယ်ပါတယ်။ အောက်တွင်ကြည့်ပါ။

Screen Shot 2014-05-29 at 1.47.19ကျွန်တော် menu tag id ကိုအပေါ်က div မှာ ပေးထားတဲ့အတိုင်းပေးထားပါတယ်။ အဲ့လိုပေးလိုက်ပြီဆိုရင် div.something ပေါ်ကို ယူဇာက Right ကလစ်ပေးလိုက်ရင် ကိုယ်ထည့်ထားတဲ့ မီနူးတွေ ပေါ်လာပါလိမ့်မယ်။

Screen Shot 2014-05-29 at 1.49.31Tada ! အိုကေ လွယ်ပါတယ် အချိန်နည်းနည်းအကုန်ခံပြီး လုပ်ပေးလိုက်ရင် End User တွေအတွက် သဘောကျစရာပါ ။ ဒါပေမယ့် လောလောဆယ် Firefox ဘယောက်ဆာတွေမှာပဲ အလုပ်လုပ်မှာ ဆိုတာကိုတော့ သတိထားဖို့လိုပါလိမ့်မယ်။

ကုဒ် ကို Github မှာ တင်ထားတယ်။ Demo လင်ခ့် က တော့ ဒီမှာ ပါ။

No responses

Post a comment

Post Your Comment