Pre-loading Remote Tab Content

Pre-loading remote content using the jQuery UI tabs widget.

by Adam Boduch

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
<div id="tabs">
    <ul>
        <li><a href="content1.html">Tab 1</a></li>
        <li><a href="content2.html">Tab 2</a></li>
        <li><a href="content3.html">Tab 3</a></li>
    </ul>
</div>

CSS

body {
    font-size: 0.8em;
}

JavaScript

// Mock remote tab content.
$.mockjax({
    url: "content1.html",
    responseTime: 100,
    response: function( options ) {
        this.responseText = "<p><em>Tab 1 content</em></p>";
    }
});

$.mockjax({
    url: "content2.html",
    responseTime: 400,
    response: function( options ) {
        this.responseText = "<p><em>Tab 2 content</em></p>";
    }
});

$.mockjax({
    url: "content3.html",
    responseTime: 800,
    response: function( options ) {
        this.responseText = "<p><em>Tab 3 content</em></p>";
    }
});

// Tabs widget instance
$("#tabs").tabs({
    
    // Create event is triggered when the tabs instance
    // is created.
    create: function( e, ui ) {
        
        // Store a reference to the tabs div in $div,
        // and a reference to all tab li elements in
        // $tabs. The exception is the tab we're currently
        // viewing.
        var $div = $( this ),
            $tabs = $div.find( "li" )
                .not( ui.tab );
        
        // For each tab that's not displayed, load
        // it's content.
        $tabs.each( function() {
            $div.tabs( "load", $( this ).index() );
        });
        
    }
    
});