progress bar ေလးတစ္ခုေလာက္ Javascript နဲ႕ ဖန္တီးၾကည့္ရေအာင္ ။
HTML နဲ႕ CSS ေလးေတြအရင္ဖန္တီးလိုက္မယ္။
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wrap">
<div id="progress_bar_wrap">
</div>
<div id="buttons">
<input type="button" id="set_25" value="25%" />
<input type="button" id="set_50" value="50%" />
<input type="button" id="set_75" value="75%" />
<input type="button" id="from_0_to_100" value="0% - 100%" />
</div>
</div>
</body>
</html>
progress_bar_wrap ကုိ CSS နဲ႕ က်မွ Width နဲ႕ Height ထည့္ေပးမယ္ ။ သပ္သပ္ရပ္ရပ္ျဖစ္ေအာင္
wrap ID ထပ္အုပ္ထားလိုက္တယ္ ။ အဲ့ဒါေတြက ကၽြမ္းၿပီးသားဆိုကုိယ့္ဖာသာကုိအဆင္ေျပသလိုလုပ္
လိုက္လို႕ရတယ္ ။ေသခ်ာမရွင္းျပေတာ့ဘူး။
ေလာေလာဆယ္ သံဳးထားတဲ့ CSS ကဒီမွာ ။
*{
padding:0;
margin:0;
}
body{
font-family:Tahoma;
}
#wrap{
margin:100px;
}
#buttons{
margin-top:10px;
}
#progress_bar_wrap{
width:300px;
height:30px;
border:1px solid #222;
}
CSS ကုိအဆင္ေျပသလိုသံုးလိုက္လို႕ရတယ္ အဓိကေျပာခ်င္တာက Progress bar ကုိအသက္သြင္းမယ့္ Javascript ...
ႏွစ္သက္ရာနာမည္နဲ႕ folder တစ္ခု ေဆာက္လိုက္။ အဲဒီထဲမွာ
main.js နဲ႕ progress_bar_lib.js ဆိုၿပီး js ႏွစ္ဖိုင္ေဆာက္လိုက္ပါ ။ တစ္ဖိုင္က function ကိုေရးထားၿပီးေနာက္တစ္ဖိုင္
ကေနလွမ္းေခၚသံုးမွာျဖစ္ပါတယ္ ။အဲဒီႏွစ္ဖိုင္ကုိ HTML ဖိုင္ထဲ add ေပးလိုက္ပါဦး
HTML CSS မွာ Progress bar ပံုကအဆင္သင့္ရၿပီ အဲဒီက Button ေတြကိုႏွိပ္ရင္ Progress က ရာခိုင္ႏွဳန္းနဲ႕အတူ တတ္လာ
ရမယ္။အဲဒီ Button ေတြမွာ onclick() function ထည့္ၿပီး Click လုပ္တိုင္းသက္ဆိုင္ရာ Javascript ကုိ လွမ္းခိုင္းမယ္။
အခု progress_bar_lib.js ကုိဖြင့္
function progress_bar(container){
} main.js ကေနေခၚသံုးဖို႕ progress_bar ဖန္ရွင္ဖန္တီးမယ္ ။Parameter တစ္ခုထည့္ထားလိုက္။ဒီဥပမာအတြက္ေတာ့
container နာမည္နဲ႕ Parameter တစ္ခုထည့္ထားလိုက္တယ္
တစ္ခါတည္းရွင္းသြားမယ္ေနာ္။ အဲဒီဖန္ရွင္ထဲမွာေအာက္ကအတိုင္းေရး ..
var bar=document.createElement('div'); //div tag တစ္ခုကုိ js နဲဖန္တီးၿပီး variable တစ္ခုအေနနဲ႕ထားထားတယ္
var text=document.createElement('div');
bar.style.width='0px'; //ဒါကစ ေနာက္သံုးေၾကာင္းက Button ကုိႏွိပ္လိုက္ရင္ color bar တစ္ခုက % အေနနဲ႕ေဖာ္ျပဖို႕
bar.style.height='100%';
bar.style.background='#eef';
container.appendChild(bar);// color bar နဲ႕ အတူ text တစ္ေၾကာင္းထည့္မယ္ 50%ဆို 50% ျပမယ္။ေအာက္ကကုတ္ကေနရာခ်တာ။
text.style.marginTop='-26px';
text.style.textAlign='center';
text.style.color='#111';
text.style.size='15px';
text.appendChild(document.createTextNode('0%'));
container.appendChild(text);
ဒီအထိရရင္ Main.js ကုိသြား ။ Page load ျဖစ္ၿပီးရင္ အဆင္သင့္ျဖစ္ဖို႕ window.onload အေျခအေနမွာ ဖန္ရွင္တစ္ခုေရးမယ္။
window.onload=function(){
var bar=new progress_bar(document.getElementById('progress_bar_wrap'));// progress_bar_wrap ထဲမွာေဖာ္ျပခ်င္တာကုိထည့္မယ္ေလ။
document.getElementById('set_25').onclick =function(){
bar.setpercentage(25);
}
document.getElementById('set_50').onclick =function(){
bar.setpercentage(50);
}
document.getElementById('set_75').onclick =function(){
bar.setpercentage(75);
}
}
ဒီမွာေခၚသံုးထားတဲ့ setpercentage က Js libiary ထဲကမဟုတ္ဘူးဒီထဲမွာလည္းမရွိဘူး ။
ဒီေတာ့ ဒါေလးကုိ ဟိုဘက္progress_bar_lib.js မွာထပ္ ျဖည့္လိုက္ရေအာင္။
function progress_bar(container)ရဲ႕ အပိတ္ } မေရာက္ခင္မွာ ဖန္ရွင္အသစ္ထပ္ေရးမယ္
this.setpercentage=function(percentage){//this ကလက္ရွိactive ျဖစ္ေနတဲ့ action ကုိညြန္းပါတယ္။
bar.style.width=percentage+'%'; //color အတြက္
text.removeChild(text.firstChild); // text ေဖာ္ျပဖို႕အတြက္ မူလရွိၿပီးသားကုိဖ်က္လိုက္တာ
text.appendChild(document.createTextNode(percentage+'%'));// ဖ်က္ၿပီးမွလက္ရွိ % စာသားကုိျပန္ျပတာ။
}
removeChild နဲ႕ appendChild ၿပီးေတာ့ createTextNode စတာေတြနဲ႕ရင္းႏွီးေအာင္ဒီပံုစံသံုးလိုက္တာပါ။ဒီထက္လြယ္
ေအာင္ေရးလည္းရပါတယ္။အခုဆို ရင္ 25%,50%, နဲ႕ 75% Buttonသံုးခုအလုပ္လုပ္ပါၿပီ။
from_0_to_100 button မွာေတာ့ ႏွိပ္လိုက္ရင္ 0 ကေန 100 ကုိ ေျပးတတ္လာေစခ်င္တာ ။ ဒီေတာ့အဲ့ဒီအတြက္ သပ္သပ္
ထပ္ျဖည့္ေရးရေအာင္ ။
main.js ဘက္က ေစာေစာက button သံုးခုအတြက္ေရးထားတဲ့ေအာက္မွာပဲထပ္ထည့္လိုက္မယ္ ဒီလိုေလးေရးလိုက္
document.getElementById('from_0_to_100').onclick =function(){
var i=0;
var interval=window.setInterval(function(){
if(i>=100 ){
window.clearInterval(interval);
}
bar.setpercentage(i);
i++;
},50);
}
i>=100 ထည့္ေပးရတာက 100 ျပည့္တာနဲ႕ရပ္သြားရေအာင္ပါ ။
setInterval(?? , 50) ရဲ႕ ဒုတိယ Parameter မွာ အခ်ိန္ကုိ မီလီစကၠန္႕နဲ႕ထည့္ေပးရပါတယ္။
50 မီလီစကၠန္႕တိုင္း တစ္တိုးသြားေအာင္လို႕ ပထမ Parameter မွာ nameless function
တစ္ခုျဖည့္ေပးလိုက္တာပါ။ function(){??} အေနနဲ႕ေရးတာေတြဟာ Nameless function ေတြပါ။
အိုေခ ... ဒါဆို id မွာ from_0_to_100 button ေပးထားတဲ့ Button အတြက္လည္းျပည့္စံုသြားပါၿပီ။
ႏွစ္ေခါက္ေလာက္ထပ္ဖတ္ၾကည့္ရင္ ရွင္းလင္းသြားမွာပါ ။စမ္းၾကည့္ပါဦး
No comments:
Post a Comment