Fork me on GitHub

Read how to configure a basic feaxure first.

Default feaxures parameters

Sometimes your application may have set of requirements that must be met. For example, all your tabs in your app must have the "heightStyle" set to "auto".

For these situations you can use the defaults options of the feaxure

myFeaxures.register('tabs', {
    'defaults': {
        heightStyle: "auto"
    'files' : ['/vendor/tabs/tabs.css!css', '/vendor/tabs/tabs.js!js'],
    'attach': function(element, options) {

What is really awesome about the defaults option is that it can be a function. Your defaults may be retrieved from a cookie, a global user preferences object or whatever you can think of (it must be a synchronous operation though).

Feaxures parameters per element

At this point you may as yourself: "How can I pass parameters to initialize an enhancement for each element?". There are a few ways that give you full flexibility.


To disable applying the enhancement on an element (eg: for testing purposes or whatever) make the data attribute equal to "false"

<div data-fxr-tabs="false">

A query string

If you're confortable writting query strings you can do that

<div data-fxr-tabs="active=1&show=slideDown">

A javascript object

Be careful with the quotes, though!
<div data-fxr-tabs='{"active":1,"show": "slideDown"}'>

A reference to a container

When your options for a particular enhancement are very big or complex the above options are not enough. You can point to a container if it starts with #

<div data-fxr-tabs="#myTabOptions">

And somewhere in the document you can have the following

<script type="text/feaxures" id="myTabOptions">
    here: "you",
    can: "have",
    a: function() {
        return "very long";
    javascript: "object",
    not: "necesarily a JSON"

You can even have a function that returns an object. The container must start with the word function

<script type="text/feaxures" id="myTabOptions">
function(element) {
    if ($(element).is(':visible')) {
        return {
            my: "very",
            complex: "options"
    return false;

Yes, the function receives the element parameter so you can perform some operations.

Your container has to have a type that is not interpreted by the browser (like text/feaxures, but this is not mandatory).
If your options container is a function it has to run syncronously. Don't do fancy ajax stuff in there!