AJAX TAB JQUERY 选项卡 标签

AJAX TAB JQUERY 选项卡 标签

 

演示

 

 js

JavaScript Code

<script>
$(document).ready(function(){



    var Tabs = {
        'Tab one'   : 'pages/page1.html',
        'Tab two'   : 'pages/page2.html',
        'Tab three' : 'pages/page3.html',
        'Tab four'  : 'pages/page4.html'
    }


    var colors = ['blue','green','red','orange'];


    var topLineColor = {
        blue:'lightblue',
        green:'lightgreen',
        red:'red',
        orange:'orange'
    }

    /* Looping through the Tabs object: */
    var z=0;
    $.each(Tabs,function(i,j){
        /* Sequentially creating the tabs and assigning a color from the array: */
        var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');

        /* Setting the page data for each hyperlink: */
        tmp.find('a').data('page',j);

        /* Adding the tab to the UL container: */
        $('ul.tabContainer').append(tmp);
    })

    /* Caching the tabs into a variable for better performance: */
    var the_tabs = $('.tab');

    the_tabs.click(function(e){
        /* "this" points to the clicked tab hyperlink: */
        var element = $(this);

        /* If it is currently active, return false and exit: */
        if(element.find('#overLine').length) return false;

        /* Detecting the color of the tab (it was added to the class attribute in the loop above): */
        var bg = element.attr('class').replace('tab ','');

        /* Removing the line: */
        $('#overLine').remove();

        /* Creating a new line with jQuery 1.4 by passing a second parameter: */
        $('<div>',{
            id:'overLine',
            css:{
                display:'none',
                width:element.outerWidth()-2,
                background:topLineColor[bg] || 'white'
            }}).appendTo(element).fadeIn('slow');

        /* Checking whether the AJAX fetched page has been cached: */

        if(!element.data('cache'))
        {
            /* If no cache is present, show the gif preloader and run an AJAX request: */
            $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

            $.get(element.data('page'),function(msg){
                $('#contentHolder').html(msg);

                /* After page was received, add it to the cache for the current hyperlink: */
                element.data('cache',msg);
            });
        }
        else $('#contentHolder').html(element.data('cache'));

        e.preventDefault();
    })

    /* Emulating a click on the first tab so that the content area is not empty: */
    the_tabs.eq(0).click();
});

</script>

index.html

 

XML/HTML Code

<div id="main">

<ul class="tabContainer">

</ul>

<div class="clear"></div>

<div id="tabContent">
    <div id="contentHolder">

    </div>
</div>

</div>

 

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