AJAX TAB JQUERY 选项卡标签

 
  JavaScript Code 
 
 
  <script>
$(document).ready(function(){
varTabs={
'Tabone':'pages/page1.html',
'Tabtwo':'pages/page2.html',
'Tabthree':'pages/page3.html',0);">'Tabfour':'pages/page4.html'
}
varcolors=['blue','green','red','orange'];
vartopLineColor={
blue:'lightblue',0);">green:'lightgreen',0);">red:'red',0);">orange:'orange'
}
/*LoopingthroughtheTabsobject:*/
varz=0;
$.each(Tabs,function(i,j){
/*Sequentiallycreatingthetabsandassigningacolorfromthearray:*/
vartmp=$('<li><ahref="#"class="tab'+colors[(z++%4)]+'">'+i+'<spanclass="left"/><spanclass="right"/></a></li>');
/*Settingthepagedataforeachhyperlink:*/
tmp.find('a').data('page',j);
/*AddingthetabtotheULcontainer:*/
$('ul.tabContainer').append(tmp);
})
/*Cachingthetabsintoavariableforbetterperformance:*/
varthe_tabs=$('.tab');
the_tabs.click(function(e){
/*"this"pointstotheclickedtabhyperlink:*/
varelement=$(this);
/*Ifitiscurrentlyactive,returnfalseandexit:*/
if(element.find('#overLine').length)returnfalse;
/*Detectingthecolorofthetab(itwasaddedtotheclassattributeintheloopabove):*/
varbg=element.attr('class').replace('tab','');
/*Removingtheline:*/
$('#overLine').remove();
/*CreatinganewlinewithjQuery1.4bypassingasecondparameter:*/
$('<div>',{
id:'overLine',0);">css:{
display:'none',0);">width:element.outerWidth()-2,
background:topLineColor[bg]||'white'
}}).appendTo(element).fadeIn('slow');
/*CheckingwhethertheAJAXfetchedpagehasbeencached:*/
if(!element.data('cache'))
{
/*Ifnocacheispresent,showthegifpreloaderandrunanAJAXrequest:*/
$('#contentHolder').html('<imgsrc="img/ajax_preloader.gif"width="64"height="64"class="preloader"/>');
$.get(element.data('page'),function(msg){
$('#contentHolder').html(msg);
/*Afterpagewasreceived,addittothecacheforthecurrenthyperlink:*/
element.data('cache',msg);
});
else$('#contentHolder').html(element.data('cache'));
e.preventDefault();
/*Emulatingaclickonthefirsttabsothatthecontentareaisnotempty:*/
the_tabs.eq(0).click();
});
</script>
 
 

index.html

XML/HTML Code

div

"main"

ulclass="tabContainer">
</ul>
divclass="clear"></div>
divid="tabContent">
divid="contentHolder">
div>
div>

AJAX TAB JQUERY 选项卡 标签

AJAX TAB JQUERY 选项卡 标签

猜你在找的Ajax相关文章

AJAX TAB JQUERY 选项卡标签

AJAX TAB JQUERY 选项卡标签