jQuery အားအသုံးပြုပြီး Tabber တစ်ခုတည်ဆောက်ခြင်း
jQuery ဆိုတဲ့ javascript library တစ်ခုကိုသုံးပြီးတော့ Tabber တစ်ခုကိုဖန်တီးကြည့်မှာ ဖြစ်ပါတယ်။ ဘယ်လိုမျိုးလဲဆိုတော့ myanmartutorials ရဲ့ ညာဘက်က sidebar မှာသုံးထားတာမျိုးပါ။ ကျွန်တော်အရင်က မရေးတက်ခင်တုန်းကတော့ jQuery UI တို့ jQuery Toolတို့ အစရှိတဲ့ PlugIn တွေကိုသုံးပါတယ်။ တွေးမိတာက ရေးရတာခက်ခဲလိမ့်မယ်ပေါ့။ ဒါပေမယ့် jQuery ကို နဲနဲပါးပါးနားလည်လာတဲ့ အခါမှာတော့ တစ်ချို့အရာလေးတွေက မခက်ခဲဘူးဆိုတာလေးတွေ တွေ့လာရပါတယ်။ ဒီအတွက်လဲ ကျွန်တော်သိထားတာလေးတစ်ချို့ကို myanmartutorials ကနေ knowledge sharing ပြန်လုပ်လိုက်ပါတယ်။ ကဲ..စလိုက်ကြရအောင်။
Step (1) Markup Layer with HTML
HTML skeleton တစ်ခုကိုအရင်ရေးပါမယ်။
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jQuery Tab Tutorial</title> </head> <body> </body> </html>
ပြီးရင် <head></head> အတွင်းမှာ css အတွက် link ချိတ်ပေးပါမယ်။
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
ဆက်ပြီးတော့ javascript link တွေကိုလဲချိတ်ပေးပါမယ်။
<script type="text/javascript" src="js/jquery-1.6.1.min"></script> <script type="text/javascript" src="js/myTab.js"></script>
ဒီနေရာမှာ myTab.js ဆိုတာက ကျွန်တော်တို့ code ရေးမယ့် javascript file name ဖြစ်ပါတယ်။
ဒီအထိပြီးပြီဆိုရင် ကျွန်တော်တို့ရဲ့ HTML file ထဲမှာ အောက်ကလိုမျိုးဖြစ်သွားပါပြီ။
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jQuery Tab Tutorial</title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/myTab.js"></script> </head> <body> </body> </html>
Body tag ထဲမှာကျွန်တော်တို့ရဲ့ web page အတွက် frame ချကြပါမယ်။
<div class="tab-container"> <ul class="tab"> <li><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> <li><a href="#tab-3">Tab 3</a></li> <li><a href="#tab-4">Tab 4</a></li> </ul> <div class="tab-pane"> <div id="tab-1"> </div> <div id="tab-2"> </div> <div id="tab-3"> </div> <div id="tab-4"> </div> </div> <!-- end of .tab-pane --> </div> <!-- end of .tab-container -->
Tab-1, tab-2, tab-3, tab-4 အစရှိတဲ့ div tag တွေကြားမှာတော့ ကိုပေါ်စေချင်တဲ့ data ကိုထဲ့ပေးရပါမယ်။ ကျွန်တော်ကတော့ <h2>Tab name</h2> နဲ့ dummy text တစ်ပိုဒ်ကိုထဲ့ပေးထားပါတယ်။
Demo file ထဲမှာကြည့်ကြည့်ပါ။ connection အခက်အခဲကြောင့် Screen Shot အများကြီးနဲ့ မပြနိုင်တာတော့ သီးခံပေးပါဗျာ။ ဒီအထိပြီးသွားပြီဆိုရင်တော့ အောက်ကပုံလို browser မှာပေါ်ပါပြီ။
Step (2) Presentation Layer with CSS
Presentation Layer ဆိုတဲ့အတိုင်းပဲ CSS အုပ်ပါတော့မယ်။
CSS code တစ်ခုချင်းစီအတွက် အသေးစိတ်မရှင်းပြတော့ပါဘူး။ (စာရိုက်ရတာပျင်းလို့ 
)မသိတာရှိရင်တော့ မေးနိုင်ပါတယ်။
.tab-container {
width: 400px;
height: 402px;
border: 1px solid #999;
margin-top: 40px;
background: #fff;
}
.tab-container ul.tab {
width: 400px;
height: 50px;
background: #d6f2ff;
border-bottom: 1px solid #999;
}
.tab-container ul.tab li {
display: inline-block;
float: left;
}
.tab-container ul.tab li a {
display: block;
padding: 12px 24px;
margin: 4px 3px 2px 3px ;
text-decoration: none;
color: #666;
outline: none;
font-weight: bold;
}
.tab-container ul.tab li a:hover, .tab-container ul.tab li a.selected {
color: #000;
background: #fff;
padding: 12px 23px 12px 23px;
border: 1px solid #999;
border-bottom: 1px solid #fff;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.tab-pane {
padding: 20px;
width: 360px;
height: 310px;
overflow: auto;
}
ပြီးသွားရင်တော့ အောက်က ပုံလိုဖြစ်သွားပါပြီ။
ဒါကတော့ tab name ပေါ် hover လုပ်ရင် ဖြစ်လာရမယ့်ပုံပါ။
ကဲ..ဒီအထိပြီးသွားရင်တော့ final အဆင့်ကိုသွားပါတော့မယ်။
Step (3) Behaviour Level with jQuery
ကဲထုံးစံအတိုင်း စရေးပါမယ်။ (myTab.js ထဲမှာရေးမှာပါ)
$(document).ready( function() {
});
နောက်ထပ်ဆက်ရေးမယ့် code တွေကို ဒီတွန့်ကွင်းကြားမှာပဲ ရေးသွားမှာဖြစ်ပါတယ်။
$('.tab-pane').css('overflow', 'hidden');
ဒါကဘာလဲဆိုတော့ CSS ရေးတုန်းက Page loading မပြီးခင်မှာ ကိုယ့် Site ရဲ့ form ကိုမပျက်စေချင်တဲ့အတွက် tab-pane ဆိုတဲ့ class မှာ overflow: auto ဆိုပြီးပေးခဲ့ပါတယ်။ ဒါကြောင့် tab-pane မှာ scrollbar ပေါ်နေတာပါ။ အခုတော့ page loading ပြီးချိန်မှာ scrollbar ကိုဖျောက်ပစ်ပါတော့မယ်။ ဒါကြောင့်မို့ tab-pane class ရဲ့ CSS Overflow ဆိုတဲ့ property ရဲ့ value ကို hidden လို့သတ်မှတ်ပေးလိုက်တာပါ။ ဒီနေရာမှာ ဒါဆိုလဲ tab-pane ရဲ့ CSS ကိုအစကထဲက ဒီလိုသတ်မှတ်ပေးလို့ မရဘူးလားလို့ မေးစရာရှိပါတယ်။ ရပါတယ်။ ဒါပေမယ့် ဒီလို ပေးထားလိုက်ရင် page loading လုပ်နေတုန်းမှာ အသုံးပြုတဲ့သူအတွက်က Tab-pane ရဲ့ height ကိုကျော်နေတဲ့ data တွေကို ကြည့်ခွင့်ရမှာ မဟုတ်ပါဘူး။ connection နှေးတဲ့ နေရာတွေအတွက် ကတော့ အထက်ပါနည်းလမ်းက loading မပြီးခင်မှာ site form လဲမပျက် data အကုန်လဲကြည့်ခွင့်ရမှာ ဖြစ်ပါတယ်။
$('.tab-pane div').not('div:first'). hide();
ဒါကတော့ tab-pane ထဲမှာရှိတဲ့ div တွေထဲမှာမှ ပထမဆုံး div မဟုတ်တဲ့ div တွေအားလုံးကို ဖျောက်ပစ်လိုက်တာပါ။
ကျွန်တော်တို့ ရေးထားတဲ့ အထဲမှာဆိုရင်တော့ div ID tab-1 ကလွဲရင်ကျန်တဲ့ div ID tab-2, tab-3, tab-4 တွေကိုဖျောက်ပစ်လိုက်တာပေါ့။ Tab 2 ကိုနှိပ်မှ div tab-2 ကိုပြမယ်လေ။ အဲ့ဒီလို။
$('.tab li:first a').addClass('selected');
ဒါကတော့ class name -> tab ဆိုပြီးပေးထားခဲ့တဲ့ <ul> ရဲ့ child ဖြစ်တဲ့ <li> တွေထဲကမှ ပထမဆုံး <li> ရဲ့ <a> မှာ selected ဆိုတဲ့ class ကို ထပ်ပေါင်းထဲ့ပေးပါလို့ ပြောလိုက်တာ။ အောက်ကပုံလိုဖြစ်သွားမယ်ဗျာ။
Firebug ရဲ့ window မှာကျွန်တော် အနီရောင်နဲ့ တားပြထားတယ်။ browser window မှာလဲ ကျန်တဲ့ tab တွေနဲ့ ကွဲပြားနေတော့ Tab 1 ကိုရွေးထားမှန်း user ကသိလွယ်တာပေါ့ဗျာ။
ပြီးရင်ဒီ code တွေဆက်ရေးကြမယ်ဗျာ။
$('.tab li a').click( function() {
var show_pane = $(this).attr('href');
$('.tab li a').removeClass('selected');
$(this).addClass('selected');
$('.tab-pane div').hide();
$('.tab-pane div' + show_pane).fadeIn(500);
return false;
});
- Line 1 က class name tab ထဲက <li> ရဲ့ <a> ကို နှိပ်လိုက်တဲ့အခါမှာ ဒီ function ကိုလုပ်ပါလို့ပြောလိုက်ပါတယ်။
- Line 2 ကတော့ show_pane ဆိုတဲ့ နာမည်နဲ့ variable တစ်ခုကြေငြာလိုက်ပါတယ်။ အဲ့ဒီ variable ကဘာလဲဆိုတော့ ကိုယ် နှိပ်လိုက်တဲ့ <a> ရဲ့ attribute တစ်ခုဖြစ်တဲ့ href ရဲ့ value လို့ပြောလိုက်ပါတယ်။ ဥပမာ.. Tab 2 ကိုနှိပ်တယ်ဆိုပါတော့။ Tab 2 ရဲ့ attribute href ရဲ့ value က #tab-2 ဗျာ။ ဒီတော့ show_pane ဆိုတာက #tab-2 ဖြစ်သွားပါပြီ။ Tab 3 ကိုနှိပ်ရင် #tab-3 ဖြစ်သွားမယ်ဗျာ။ Tab 4 ဆိုရင် #tab-4 ဖြစ်သွားမယ်။
- Line 3 ကတော့ class name tab ထဲက <li> ရဲ့ <a> မှာ class name selected ဆိုတာရှိရင်ဖြုတ်ပလိုက်လို့ပြောလိုက်တာပါ။
- Line 4 ကတော့ အခုကိုယ်နှိပ်လိုက်တဲ့ <a> မှာ ခုနကဖြုတ်လိုက်တဲ့ selected ဆိုတဲ့ class ကိုပေါင်းထဲ့ခိုင်းပါတယ်။
- Line 5 ကတော့ tab-pane div ထဲမှာရှိတဲ့ div တွေအားလုံးကို ဖျောက်ပစ်ပါတယ်။ (div id=tab-1, tab-2, tab-3, tab-4 တို့ပါ)
- Line 6 ကတော့ tab-pane ထဲမှာဖျောက်ပစ်လိုက်တဲ့ အားလုံးထဲကမှ div id=show_pane ကို fadeIn ဆိုတဲ့ effect လေးနဲ့ပေါ်လာစေပါတယ်။
Div id=show_pane ဆိုတာ ဘယ် div လဲဆိုရင်တော့ Line 2 ကိုပြန်ကြည့်ကြည့်ပါ။
fadeIn နောက်ကကွင်းထဲက 500 ဆိုတာကတော့ fadeIn effect အတွက် duration ဖြစ်ပါတယ်။ millisecond နဲ့ပါ။ တန်ဖိုးများလာလေ ပိုပြီးကြာလာလေပါပဲ။ စမ်းကြည့်ကြည့်ကြပါ။ တန်ဖိုးနဲ့မပေးချင်ရင် fast, slow ဆိုပြီးပေးလဲရပါတယ်။ ဒီလိုပေးမယ်ဆိုရင်တော့ quote ထဲမှာရေးပေးရပါတယ်။ ဥပမာ fadeIn(‘fast’) fadeIn() ကိုမသုံးပဲ show() ဆိုပြီးသုံးလဲရပါတယ်။ သူကတော့ ဘာeffect မှမပါပါဘူး။ slideDown() ဆိုပြီးသုံးလဲရပါတယ်။ သူကတော့ အပေါ်ကနေအောက်ကို ကျလာတဲ့ပုံပါ။ ပိတ်ကားလိုမျိုးပေါ့။ ကျွန်တော်ကတော့ fadeIn ကိုအကြိုက်ဆုံးပဲဗျ။
ကဲနောက်ဆုံးတစ်ကြောင်းကတော့ return ဘာမှမပြန်ဘူးလို့ ပြောလိုက်တာပါ။ ဒါကိုထဲ့မရေးပေးလဲရပေမယ့် browser address bar မှာကြည့်ရင် page address နောက်မှာ #tab-1 … အစရှိသဖြင့် ဝင်လာပါတယ်။ return false ဆိုရင်တော့ ဘာတန်ဖိုးမှ ဝင်မလာပါဘူး။
အောက်က ၂ ပုံမှာ ကြည့်ကြည့်ပါ။
With return false
Without return false
ကဲ အခုဆိုရင်ကိုယ်ပိုင် tabber လေးတစ်ခုရေးပြီးသွားပါပြီ။ နောက်ထပ် ကျွန်တော်သိထားတာလေးတွေကိုလဲ tutorials တွေ ထပ်ရေးပေးသွားပါမယ်။
CSS style တွေပြောင်းပြီး အလှပဆုံး tabber တွေရေးကြည့်ရင်း အားလုံးပဲ ကိုယ်တိုင်ရေး tab လေးတွေကို ကြည်နူးစွာခံစားနိုင်ပါစေဗျာ။
Facebook comments:
