Fork me on GitHub

WTF, can Feaxures do more than this? Of course! Here are the other options that you can use for your feaxures:

files

In the progressive enhancement game, the files option can be the card up your sleeve. Here you can load files specific to the client:

myFeaxures.register('tabs', {
    'autoLoad: true,
    'files' : function() {
        var files = ['/vendor/tabs/tabs.css!css', '/vendor/tabs/tabs.js!js'];
        if (browser === 'IE6') {
            files.push['/vendor/tabs/tabs.ie6.css!css'];
        }
        return files;
    },
    'attach': function(element, options) {
        $(element).tabs(options);
    }
});

autoLoad

Assuming you know an enhancement is used very often you can auto-load it (so you don't have to write scripts in the head)

myFeaxures.register('tabs', {
    'autoLoad: true,
    'files' : ['/vendor/tabs/tabs.css!css', '/vendor/tabs/tabs.js!js'],
    'attach': function(element, options) {
        $(element).tabs(options);
    }
});

selector

Do you worry about the performance of the [data-fxr-tabs] selector? Use a class based selector instead

myFeaxures.register('tabs', {
    'selector': '.tabs',
    'files' : ['/vendor/tabs/tabs.css!css', '/vendor/tabs/tabs.js!js'],
    'attach': function(element, options) {
        $(element).tabs(options);
    }
});
The data-fxr-tabs attribute must be there as it is used to retrieve the initialization options.

Event callbacks

onLoad

myFeaxures.register('tabs', {
    'onLoad': function(data) {
        // the feaxures files were loaded, maybe some parts of the application
        // must be notified about this
    },
    'files' : ['/vendor/tabs/tabs.css!css', '/vendor/tabs/tabs.js!js'],
    'attach': function(element, options) {
        $(element).tabs(options);
    }
});

onLoadError

myFeaxures.register('tabs', {
    'onLoadError': function(data) {
        // send a message to the webmaster. some files are probably missing
    },
    'files' : ['/vendor/tabs/tabs.css!css', '/vendor/tabs/tabs.js!js'],
    'attach': function(element, options) {
        $(element).tabs(options);
    }
});

The data sent to the onLoad and onLoadError events is an object

{
    feature: "tabs"
}

onAttach

myFeaxures.register('tabs', {
    'onAttach': function(data) {
        // tell Google Analytics that users are using this feaxure
    },
    'files' : ['/vendor/tabs/tabs.css!css', '/vendor/tabs/tabs.js!js'],
    'attach': function(element, options) {
        $(element).tabs(options);
    }
});

The data sent to this event contains the element and options used for the initialization.

{
    feature: "tabs",
    element: domElementHere,
    options: {
        the: 'computed options for this element',
    }
}

onDetach

myFeaxures.register('tabs', {
    'onDetach': function(data) {
        // tell Google Analytics that users have done something
        // that results in the feaxure being removed
    },
    'files' : ['/vendor/tabs/tabs.css!css', '/vendor/tabs/tabs.js!js'],
    'attach': function(element, options) {
        $(element).tabs(options);
    }
});

Tired of writting all those callbacks?

I feel you, bro/sis! Here's what you can do:

myFeaxures.on('load', function(data){
    // do whatever you want here
});

The same goes for the loadError, attach, detach events.