ScrollBox ထည္႔နည္း

ScrollBox ထည္႔နည္း

written by Yan at Wednesday, February 20, 2008

Contributor: ရန္ေအာင္

အားလုံးပဲ မဂၤလာပါ.

ဒီတစ္ခါေတာ႔ ကၽြန္ေတာ္တုိ႔ရဲ႔ ဘေလာ႔ဂ္ေလးေတြ၊ ၀က္ဘ္ဆုိဒ္ေလးေတြထဲမွာ Scroll Box ေလးေတြ ထည္႔နည္းကုိ ေျပာျပခ်င္ပါတယ္.
အရင္ဆုံး ဒါေလးကုိ မေလ႔လာခင္ Scroll box ေလးေတြ ဆုိတာ ဘာလဲ. ဘယ္လုိေနရာမွာ အသုံး၀င္ႏုိင္သလဲ ဆုိတာေလးကုိ အရင္စဥ္းစားၾကည္႔လုိက္ၾကရေအာင္.

ကဲဗ်ာ.

ခင္ဗ်ားက စာပုိဒ္အရွည္ၾကီးတစ္ခုကုိ အကုိးအကားအေနနဲ႔ ျပခ်င္တယ္. အကုန္လုံးကုိ ရုိက္ျပလုိက္ရင္လည္း ခင္ဗ်ားရဲ႔ ပုိ႔စ္က အရွည္ၾကီး ျဖစ္သြားမယ္. အဲလုိမ်ိဳးဆုိရင္ ခင္ဗ်ားေပးခ်င္တဲ႔ မက္ေဆ႔ခ်္က ေ၀၀ါးသြားမယ္. ခင္ဗ်ားလုပ္ခ်င္တာက အဲဒီ႔ အကုိးအကား စာပုိဒ္ေလးကို ထည္႔ေပးထားျပီး စာဖတ္သူက ဖတ္ခ်င္ရင္ Scroll Down/Up လုပ္ျပီး ဖတ္၊ တကယ္လုိ႔ ဓာတ္ပုံေတြ အမ်ားၾကီး တင္ခ်င္တယ္ဆုိရင္လည္း ဒီလုိ Scroll box ေလးထဲ ထည္႔ျပီး ျပထားလုိက္ရင္ ဓာတ္ပုံ အယ္လ္ဘမ္ တစ္ခု ပုံစံမ်ိဳးေလး ဖန္တီးလုိ႔ရမယ္၊ စာဖတ္သူက ပုံေတြကုိ သူလုိသလုိ၊ ၾကိဳက္သလုိ Scroll Down/Up လုပ္ျပီး ၾကည္႔. ဒါမ်ိဳးေပါ႔ဗ်ာ.

အဓိကကေတာ႔ Space ကုိ အတတ္ႏုိင္ဆုံး က်ဳံ႔လုိက္ျပီး ေပးခ်င္တဲ႔ အေၾကာင္းအရာကုိ သိသာ ထင္ရွားေအာင္ လုပ္ေပးတာပါပဲ.

ဥပမာေလးကုိ ဒီမွာၾကည္႔ပါ.

မင္းရဲ႔ ဆံႏြယ္ေခြေတြထဲမွာ
တစ္ညတာေလာက္ အိပ္စက္ခြင္႔ရမယ္ဆုိရင္

ငွက္ငယ္ေတြ ၀န္းရံေနတဲ႔
သစ္တစ္ပင္အျဖစ္ကုိေတာင္ စြန္႔လႊတ္၀ံ႔တယ္.

မယုံရင္ ဒီမွာၾကည္႔စမ္း
လြမ္းလြန္းလုိ႔ ျဖစ္လာတဲ႔
မင္းအတြက္ အခ်စ္ပန္း…

<ေရခဲငွက္>

ကဲ. ဘယ္လုိလုပ္ရမလဲ ဆုိေတာ႔ ဒီလုိလုပ္ပါ ခင္ဗ်ာ…

အခု ကၽြန္ေတာ္ေပးလုိက္မယ္႔ Coding ေလးကုိ ေလ႔လာၾကည္႔ပါ.
Your Text Here ဆုိတဲ႔ေနရာမွာ ကုိယ္တင္ျပခ်င္တဲ႔ စာပုိဒ္ေလး၊ ဓာတ္ပုံ စတာေတြကုိ ပုံမွန္အတုိင္း ရိုက္တင္၊ Upload လုပ္ လုပ္ပါ.
အဲဒါပါပဲ.

ဒါဆုိရင္ကိုပဲ Scroll Box ေလး တင္နည္း ျပီးပါျပီ.

ဟင္. ဒါပဲလားဆုိေတာ႔ မဟုတ္ေသးပါဘူး.

အေသးစိတ္ရွင္းျပပါမယ္. ဒါမွ ကုိယ္လုိသလုိ အက်ဥ္းအက်ယ္ ျပဳျပင္ယူႏုိင္မွာေပါ႔ဗ်ာ.

<div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>

Border: 3px solid green 

အဲဒါေလးက ဘာေျပာလဲ ဆုိေတာ႔ Box အစိမ္းေရာင္ေလး တစ္ခုလုပ္မယ္. ေဘာင္ကုိ 3 pixel အထူေပးမယ္လုိ႔ ဆုိလုိပါတယ္. အေရာင္ေတြ အမ်ိဳးမ်ိဳး ေျပာင္းယူႏုိင္သလုိ border ကုိလည္း Dashed တုိ႔ Dotted တုိ႔ စသျဖင္႔ ေပးႏုိင္ပါတယ္.

height:100px , width:150px

ဒါေလးကေတာ႔ Box ေလးရဲ႔ အျမင္႔နဲ႔ အက်ယ္ကုိ ေျပာပါတယ္. နံပါတ္ေလးေတြကုိ လုိသလုိ ကစားၾကည္႔ျပီး ကုိယ္႔စိတ္ၾကိဳက္ Box အရြယ္အစားေလးကုိ ဖန္တီးယူႏုိင္ပါတယ္. color:black ဒါကေတာ႔ Box ေလးထဲမွာ ေပၚမယ္႔ စာသားေလးေတြရဲ႔ အေရာင္ပါ. Red, Orange, Green စသျဖင္႔ စိတ္ၾကိဳက္ေျပာင္းေပးႏုိင္ပါတယ္.
background-color:white

ဒါကေတာ႔ Box ေလးရဲ႔ ေနာက္ခံ အေရာင္ပါ. ကုိယ္ေရြးခ်ယ္တဲ႔ ေနာက္ခံ အေရာင္နဲ႔ Text အေရာင္ကုိ လုိက္ဖက္ေအာင္ ေရြးခ်ယ္ေပးသင္႔ပါတယ္. ဥပမာ. အျဖဴေနာက္ခံမွာ အမည္းစာလုံးေပၚေအာင္ လုပ္သလုိမ်ိဳးေပါ႔ဗ်ာ.
ကဲ. ဒီေလာက္ပါပဲ.

အစမ္းလုပ္ျပထားတဲ႔ Box ေလးကုိ ေလ႔လာၾကည္႔ႏုိင္ပါတယ္. မရွင္းလင္းတာရွိရင္လည္း ေကာ္မန္႔မွာ ဆက္သြယ္ေမးျမန္းႏုိင္ပါတယ္.
အားလုံးပဲ ေပ်ာ္ရႊင္ခ်မ္းေျမ႔စြာ ဘေလာ႔ဂင္းႏုိင္ၾကပါေစခင္ဗ်ာ…

ခ်စ္ခင္ေလးစားလ်က္

ရန္ေအာင္

အေျပာင္းအလဲ

ႏွစ္ဦးတူယွဥ္၊ ဒီအပင္ေအာက္
ပန္းေၾကြေကာက္စဥ္၊ ရင္တထိတ္ထိတ္
ဒီအရိပ္မွာ၊ ခ်စ္စိတ္ေ၀ခဲ႔ဖူးပါတယ္.

သစ္ျမစ္ဆုံခြ၊ ယွဥ္ထုိင္ၾကရင္း
ျမေခ်ာင္းေရေၾကာ၊ ပန္းေၾကြေမွ်ာမိ
ၾကည္႔ရင္းၾကည္ႏူး၊ ေခ်ာင္းနဖူးမွာ
စိတ္ကူးႏုသစ္ခဲ႔ဖူးတယ္.

ခင္ကပစ္ေတာ႔
ဒီသစ္ပင္ေအာက္၊ ပန္းမေကာက္ခ်င္
ႏြမ္းေျခာက္ေသြ႔ဆိတ္၊ ဒီအရိပ္မွာ
လြမ္းစိတ္ရာေထာင္ ေ၀ဖူးတယ္.

ခင္မၾကင္ေတာ႔
ညင္ညင္ေရစီး၊ တမ္းတညည္းဟန္
ခင္႔ရယ္သံလား၊ ၀ုိး၀ါးထင္မိ
ၾကည္႔ေလရာရာ၊ ေ၀ဒနာႏွင္႔
ေရျပာအလွ ကင္းဖူးတယ္.

ေဩာ္… ႏွစ္ေတြၾကာလုိ႔
တစ္ခါတစ္ေခါက္၊ ဒီကုိေရာက္လွ်င္
တုိ႔ငယ္စဥ္က၊ ေႏွာင္မွ်င္တြယ္ရစ္
အခ်စ္အလြမ္း၊ ဖမ္းစားညိွဳ႔ငင္
ဒီသစ္ပင္ကား၊ ေခ်ာင္းေရစား၍
ကမ္းပါးျပဳိေနာက္ ပါေလျပီ…

ဒီကျပန္လွ်င္၊ ရင္မခုန္တတ္
မလြမ္းတတ္ေတာ႔၊ စိတ္ဓာတ္ရင္႔က်က္
ခံစားခ်က္တုိ႔၊ ပ်က္ျပယ္ခဲ႔ရ
အနည္က်ျပီ…
ဘ၀ဆုိတာ… ဒါပဲ ခင္…

ေမာင္စိန္၀င္း (ပုတီးကုန္း)

Read More...

Posted in Hacks, ScrollBox » 6 comments »