Feb 9, 2010

jQuery.ScrollTopControl အေၾကာင္း (link to top)

jQuery.ScrollTo by Ariel Flesler
ဒီတေလာ ေၾကာ္ျငာေလးေတြ႕လုိ႔ ၾကည့္လုိက္ပါတယ္။ အဲဒီမွာ လုပ္ထားတာေလးကုိ ေတြ႔လုိ႔ အရမ္းၾကိဳက္သြားျပီး code ေတြကုိ ရွာၾကည့္လုိက္ပါတယ္။ အဲဒီမွာ jQuery ကုိ သံုးထားတာေတြ႕ရပါတယ္။ အခုေနာက္ပုိင္းမွာ javascript ေလာကမွာ jQuery လုိအသင့္သံုးေလးေတြ ေတာ္ေတာ္ေခတ္စားလာပါတယ္။ အရမ္းလဲ လွျပီး အသင့္သံုးလုိက္ရံုပါပဲ။အဲဒီ code ကုိရွာရင္းနဲ႔ အဲဒါကုိေတာ့ မေတြ႔ေသးပါဘူး။ အရင္ေတြ႔တာက page အရမ္းရွည္ေနတဲ့ ဘေလာ့ေတြမွာ သံုးတတ္ၾကတာေလးပါ။ visitor က ဖတ္ရင္းဖတ္ရင္းနဲ႔ page ေအာက္ဆံုးကုိေရာက္သြားရင္ အေပၚဆံုးကုိ mouse သံုးျပီး ေရႊ႔စရာ မလုိေအာင္ ေအာက္မွာ scroll to top ဆုိတဲ့ symbol ေလးကုိ ထည့္ေပးတတ္ၾကပါတယ္။ အဲဒါကုိ ႏွိပ္လုိက္ရင္ page အေပၚဆံုးကုိ ခ်က္ခ်င္း ေရာက္သြားမယ္ေပါ့။ အခုေျပာမွာက အဲလုိလုပ္တာပဲ ဒါေပမယ့္ အေပၚဆံုးကုိ ခ်က္ခ်င္းေရာက္မသြားဘဲ တျဖည္းျဖည္းနဲ႔ mouse ေလးကုိ scroll လုပ္ျပီးေရာက္သြား သလုိမ်ိဳးေလး ျဖစ္သြားတာေအာင္ animation ထည့္လုိက္တာပါပဲ။ jQuery ကုိ သံုးထားပါတယ္။ လုပ္တာက ေတာ္ေတာ္ေလးကုိ လြယ္ပါတယ္။
၁။ ေပးထားတဲ့ Project ထဲက scrolltopcontrol.js နဲ႔ jquery.min.js ကို အသံုးျပဳသြားမွာ ျဖစ္ပါတယ္။
၂။ ပံုအေနနဲ႔ က အဲဒီ Project ထဲမွာက up.png ကုိ အသံုးျပဳထားပါတယ္။ ၾကိဳက္သလုိျပင္လုိ႔ ရပါတယ္။ ပံုကုိ upload တင္ပါ။ ျပီးရင္ ရလာတဲ့ link ကုိ scrolltopcontrol.js ကုိ ဖြင့္ျပီး controlHTML: ဆုိတဲ့ စာေလးကုိ ရွာပါ။ အဲဒီနားမွာ ပံုရဲ့ uploaded link ေလးထည့္ရမယ့္ေနရာ ရွိပါတယ္။ အဲမွာ ထည့္လုိက္ပါ။
၃။ ျပီးရင္ ထပ္ျပီး အဲဒီ js ဖုိင္ေတြကုိ upload တင္ေပးပါဦး။
၄။ အဲဒီရလာတဲ့ လင့္ေတြကုိ ေအာက္ပါအတုိင္းေရးျပီး </head> ရဲ့ အထက္ေလးမွာထည့္လုိက္ပါ။
< script type="text/javascript" src="http://smartboy.googlecode.com/files/jquery.min.js"></script>
< script type="text/javascript" src="http://smartboy.googlecode.com/files/scrolltopcontrol.js"></script>
Project download here
MORE INFO => http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm and http://tobielangel.com/examples/auto-scrolling-page-navigation