toddmotto/data-tabs

Simple HTML5 data-* jQuery tabs. Markup free and relative to their container for ultimate re-use.

data-tabs's Issues

Turned your idea into a jQuery widget

So, I don;t have enough time right now to proper fork/pull/etc, So I thought I'd just send it to you here.

I took your idea, and turned it into a jQuery widget.
I also added support for ajax loading of the tabs
I also added the ability to watch the hash in the url to determine if we need to auto activate a tab, or change the active one based on the hash.
The html is below the javascript.

Connect:

$(document).ready(function()
{
    $('.toddmotto-tabs').toddmottoTabs();
});

Javascript:

/**
 * Inspired by:
 *  http://toddmotto.com/simple-html5-data-attribute-jquery-tabs-markup-free-and-relative-to-their-container-for-ultimate-reuse/
 */

/*
$('[data-tab]').on('click', function (e) {
                $(this).addClass('active').siblings('[data-tab]').removeClass('active')
                $(this).siblings('[data-content=' + $(this).data('tab') + ']').addClass('active').siblings('[data-content]').removeClass('active')
                e.preventDefault()
            })
*/
(function($) 
{

// should always attach to the div before the ul list
$.widget( "toddmotto.toddmottoTabs", 
{
    options: {},

    // initialize the element
    _create: function() {
        this.element.addClass( "toddmotto-object toddmotto-object-tabs" );
        this.refresh( );
    },
    _destroy: function() {
        this.element
            .removeClass( "toddmotto-object" )
            .removeClass( "toddmotto-object-tabs" );
    },
    refresh: function() {

        // go through each item (ul>li)
        var self = this;

        // hide all of the content blocks first
        this.element.find('.tab-contents .tab-content').removeClass('active').hide();
        // make all of the tabs inactive
        this.element.find('.tab-links a.tab-tab').removeClass('active');

        // take a look at the url to see if we need to automatically active one of them.
        var tabName = window.location.hash; 
        tabName = tabName.replace("#","");
        console.log(tabName);

        if(tabName.length)
        {
            this.activate(tabName);
        }


        // add the event listeners to the tabs
        this.element.find('.tab-links a.tab-tab').each(function(){
            $(this).click(function(event){
                event.preventDefault();
                self.activate($(this).data('tab'));
                window.location.hash = $(this).data('tab');
            });
        });

        // watch the hash tag to see if it changes
        $(window).on('hashchange', function() {
            // make sure a tab this this hash exists
            var tabName = window.location.hash; 
            tabName = tabName.replace("#","");
            if(self.element.find('a.tab-tab[data-tab='+tabName+']'))
            {
                self.activate(tabName);
            }
        });
    },

    activate: function ( tabName ) {

        // mark everything as inactive
        // hide all of the content blocks first
        this.element.find('.tab-contents .tab-content').removeClass('active').hide();
        // make all of the tabs inactive
        this.element.find('.tab-links a.tab-tab').removeClass('active');

        // find the tab
        var tab = this.element.find('a.tab-tab[data-tab='+tabName+']');
        // find the content
        var content = this.element.find('.tab-content[data-content='+tabName+']');

        // activate the tab
        tab.addClass('active');
        // show the content
        content.addClass('active').show();

        // if this tab needs to do an ajax call, do it.
        var href = tab.data('tab-href');
        if(href.length)
        {
            content.html(''); // clear the old html

            var jqxhr = $.ajax({
                type: 'GET',
                url: href,
                dataType: "html",
                beforeSend: function(xhr) {
                    content.html('');
                },
                success: function(response) {
                    content.html(response);
                },
                error: function(event) {
                    console.log(event);
                }       
            });
        }

    }

});


// the default options
$.toddmotto.toddmottoTabs.prototype.options = {

}

})(jQuery);

Html:

<div class="toddmotto-tabs clearfix">
    <div class="tab-links">
        <a href="#site-config" class="tab-tab" data-tab="site-config" data-tab-href="/admin/main/site_config/tab:tab-site-config"><span class="tab-title">Site Config</span><span class="tab-stat"></span></a>
        <a href="#user-management" class="tab-tab" data-tab="user-management" data-tab-href="/admin/user_management/config/tab:tab-user-management"><span class="tab-title">User Management</span><span class="tab-stat"></span></a>
        <a href="#rules" class="tab-tab" data-tab="rules" data-tab-href="/admin/rules/config/tab:tab-rules"><span class="tab-title">Rules</span><span class="tab-stat"></span></a>
        <a href="#tester" class="tab-tab" data-tab="tester" data-tab-href=""><span class="tab-title">Whitelisted Software</span><span class="tab-stat">3</span></a>
    </div><!-- 
    --><div class="tab-contents"> 
        <div id="tab-site-config" data-content="site-config" class="tab-content">I am a successfully called site config</div>
        <div id="tab-user-management" data-content="user-management" class="tab-content">User Management content. Will be replaced with ajax call</div>
        <div id="tab-rules" data-content="rules" class="tab-content">Rules content. Will be replaced with ajax call</div>
        <div id="tab-tester" data-content="tester" class="tab-content">This is an example of a static call.</div>
    </div>
</div>

tab content

Hello,

is it possible to load the tab content from a file/another html doc?