jQuery

jQuery

အရင္လို view အတြက္ ခဲရာခဲဆစ္လုပ္ေနစရာမလုိေတာ႔ပါဘူး။ jquery ထဲမွာၾကိဳက္တာေလးရွာျပီး ျပင္သံုးလုိ႕ရပါျပီ။ လွလွပပ form ေလးေတြ ဘယ္လိုလုပ္ထားလဲၾကည္႕ပါ။

• view source ကိုသြားျပီး link ေတြကို click click လုပ္ျပီး ကူးတန္သည္ကူးပါ။
• css နဲ႕ html မွာပါတဲ႔ url ေတြကို file location အရျပင္ေပးပါ။
• css မွာသံုးထားတဲ႔ gif ေတြေတြ႕ရင္ web url ရဲ႕ေနာက္မွာ ဆက္ၾကည္႕လုိက္ျပီး ပံုေတြကိုပါ ကူးခ်င္ကူးလို႕ရပါတယ္။ ဥပမာ ဂလို။

http://www.whitespace-creative.com/jquery/jNice/
အဲဒီမွာ view source လုပ္လုိက္ရင္ [link href="jNice.css" rel="stylesheet" type="text/css" /] ဆိုတာကိုေတြ႕မယ္။ ေတြ႕ရင္ jNice.css ကို click လုိက္တယ္ဆိုပါေတာ႔။
button span {
background: transparent url(/jquery/jnice/elements/btn_right.gif) no-repeat scroll right top;

display: block;
 float: left;
 padding: 0px 4px 0px 0px; /* sliding doors padding */
 margin: 0px;
}

အဲဒီလို css code ေတြ႕မယ္။ highlight လုပ္ထားတဲ႔ပံုက ဘယ္ကေရာက္လာလဲ။ ေရွ႕ဆံုးနားကိုၾကည္႕ /jquery တဲ႔ jquery folder ထဲမွာရိွတယ္။http://www.whitespace-creative.com/jquery/jNice/ ဆိုတဲ႔ link အရ jquery folder ကိုေတြ႕ေနရျပီ။ အဲဒီေတာ႔ က်န္တာကလြယ္လြယ္ေလးပဲ။ http://www.whitespace-creative.com/jquery/jnice/elements/btn_right.gif

အဲဒီလို လုပ္လုိက္ရင္ ပံုေတြ အလကားကူးလာလို႕ရတယ္ေပါ႔ဗ်ာ။ photoshop ရမွာပ်င္းတဲ႔သူေတြအတြက္ေပါ႔။ စီးပြားေရးအတြက္ လုပ္စားမယ္႔သူေတြကေတာ႔ မကူးသင္႔ဘူး။ အခုလည္း သင္ၾကားေရးရည္ရြယ္ခ်က္နဲ႕ကူးျပတာပါ။ ဟဲဟဲ။
url ေတြေတြ႕ရင္ ေသခ်ာၾကည္႕ၾကည္႕၊ အမ်ိဳးေတြမ်ားျဖစ္ေနမလားလို႕။ သူ႕ရဲ႕ folder structure ကိုခန္႕မွန္းၾကည္႕လုိ႕ရတယ္။ ပံုေတြကူးျပီးျပီဆိုရင္ေတာ႔
background: transparent url(/jquery/jnice/elements/btn_right.gif) no-repeat scroll right top;

/jquery/jnice/elements/btn_right.gif ဆိုတာကို ျပင္လို႕ရပါျပီ။ ပံုကို css file နဲ႕ folder တစ္ခုထဲထည္႕ထားရင္ေတာ႔ btn_right.gif ဆိုရင္ရပါျပီ။  background: transparent url(btn_right.gif) no-repeat scroll right top;

ကဲ လုပ္ၾကည္႕ပါဦး။ web မွာ browser ေပၚမူတည္ျပီး tweak တန္သည္ tweak, heck တန္သည္ heck ရတတ္ပါတယ္။ browser နဲ႕အဆင္ေျပေအာင္ ကိုယ္႔ css ေတြ ယိုင္တုိင္တုိင္ မျဖစ္ေအာင္လုပ္ရတာမ်ိဳးပါ။ စင္ကာပူမွာေတာ႔ အစိုးရရံုးေတြက အသံုးမက်ဆံုး IE ကိုပဲသံုးစြဲပါတယ္။ software industry မွာေတာ႔ requirement ကို အတိအက်ေျပာျပီးေရးမွတ္ရပါတယ္။ ဥပမာ IE 6 မွာ best view ရမယ္။ က်န္တာေတြမွာ ယိုင္သည္ရိွေသာ္ တာ၀န္မယူ။စသျဖင္႔ အတိအက် သေဘာတူညီမႈရယူရပါမယ္။ IE 6 လို႕ေျပာထားျပီးရင္ IE 7 upgrade လုပ္လုိ႕ form ၾကီးနည္းနည္းရြဲ႕သြားတယ္ဆိုလည္း မတတ္ႏိုင္ပါဘူး။ out of scope ျဖစ္ပါတယ္။ စင္ကာပူမွာ ဒီလုိပဲ black or white လိုင္းေတြတားထားပါတယ္။ အစိုးရ web page ေတြၾကည္႕ရင္ ဘာ browser နဲ႕ view ရမယ္ဆုိတာပါပါတယ္။ payment လုပ္တာမ်ိဳးေတြပါရင္လည္း အဲဒါကို သတိျပဳဖုိ႕လိုပါတယ္။


ကြ်န္ေတာ္ကေတာ႔ web page လည္း မေရးတတ္ပါဘူး။ development သက္သက္ပဲလုပ္ဖူးပါတယ္။ css ေတြ jquery ေတြ၊ js ေတြ အနည္းအက်ဥ္းေလာက္ပဲသိပါတယ္။ designer ေတြအတြက္ေတာ႔ ဒါေတြဟာ ပိုသိသင္႔ပါတယ္။ testing လုပ္ေပးတဲ႔ site ေတြလည္းရိွတယ္လုိ႕သိရပါတယ္။ javascript အတြက္ကေတာ႔ Mozilla ရဲ႕ firebug က နာမည္ၾကီးပါတယ္။ IE မွာဆိုရင္လည္း developer tools ေတြရိွပါတယ္။ chrome မွာလည္းရိွပါတယ္။ စိတ္၀င္စားရင္ စမ္းၾကည္႕လုိ႕ရပါတယ္။


ref:
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements