首页>>TAB标签>>AJAX TAB JQUERY 选项卡 标签(2013-10-01)

AJAX TAB JQUERY 选项卡 标签

AJAX TAB JQUERY 选项卡 标签
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 js

JavaScript Code
  1. <script>  
  2. $(document).ready(function(){  
  3.       
  4.       
  5.       
  6.     var Tabs = {  
  7.         'Tab one'   : 'pages/page1.html',  
  8.         'Tab two'   : 'pages/page2.html',  
  9.         'Tab three' : 'pages/page3.html',  
  10.         'Tab four'  : 'pages/page4.html'  
  11.     }  
  12.       
  13.       
  14.     var colors = ['blue','green','red','orange'];  
  15.       
  16.       
  17.     var topLineColor = {  
  18.         blue:'lightblue',  
  19.         green:'lightgreen',  
  20.         red:'red',  
  21.         orange:'orange'  
  22.     }  
  23.       
  24.     /* Looping through the Tabs object: */  
  25.     var z=0;  
  26.     $.each(Tabs,function(i,j){  
  27.         /* Sequentially creating the tabs and assigning a color from the array: */  
  28.         var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');  
  29.           
  30.         /* Setting the page data for each hyperlink: */  
  31.         tmp.find('a').data('page',j);  
  32.           
  33.         /* Adding the tab to the UL container: */  
  34.         $('ul.tabContainer').append(tmp);  
  35.     })  
  36.   
  37.     /* Caching the tabs into a variable for better performance: */  
  38.     var the_tabs = $('.tab');  
  39.       
  40.     the_tabs.click(function(e){  
  41.         /* "this" points to the clicked tab hyperlink: */  
  42.         var element = $(this);  
  43.           
  44.         /* If it is currently active, return false and exit: */  
  45.         if(element.find('#overLine').length) return false;  
  46.           
  47.         /* Detecting the color of the tab (it was added to the class attribute in the loop above): */  
  48.         var bg = element.attr('class').replace('tab ','');  
  49.   
  50.         /* Removing the line: */  
  51.         $('#overLine').remove();  
  52.           
  53.         /* Creating a new line with jQuery 1.4 by passing a second parameter: */  
  54.         $('<div>',{  
  55.             id:'overLine',  
  56.             css:{  
  57.                 display:'none',  
  58.                 width:element.outerWidth()-2,  
  59.                 background:topLineColor[bg] || 'white'  
  60.             }}).appendTo(element).fadeIn('slow');  
  61.           
  62.         /* Checking whether the AJAX fetched page has been cached: */  
  63.           
  64.         if(!element.data('cache'))  
  65.         {     
  66.             /* If no cache is present, show the gif preloader and run an AJAX request: */  
  67.             $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');  
  68.   
  69.             $.get(element.data('page'),function(msg){  
  70.                 $('#contentHolder').html(msg);  
  71.                   
  72.                 /* After page was received, add it to the cache for the current hyperlink: */  
  73.                 element.data('cache',msg);  
  74.             });  
  75.         }  
  76.         else $('#contentHolder').html(element.data('cache'));  
  77.           
  78.         e.preventDefault();  
  79.     })  
  80.       
  81.     /* Emulating a click on the first tab so that the content area is not empty: */  
  82.     the_tabs.eq(0).click();  
  83. });  
  84.   
  85. </script>  

index.html

 

XML/HTML Code
  1. <div id="main">  
  2.   
  3. <ul class="tabContainer">  
  4.   
  5. </ul>  
  6.   
  7. <div class="clear"></div>  
  8.   
  9. <div id="tabContent">  
  10.     <div id="contentHolder">  
  11.           
  12.     </div>  
  13. </div>  
  14.   
  15. </div>  

 


原文地址:http://www.freejs.net/article_tabbiaoqian_46.html