Mittwoch, 16. Juni 2010

MicroTab 0.1 Released

Hey, there's been another Micro release. This time it's MicroTabs. If you want a small (1 Kb) and easy to use tab plugin with no (in my view) lame animations. Check it out.


How To
The HTML
<div class="micro"> 
    <a href="#">Title</a> 
    <div>Content</div> 
</div> 

The JavaScript
$('.microtabs').microTabs({
    selected: 1 // yeah this is the only option - which tab do you want to show on startup?
});

And some CSS
.microtabs { margin:20px 20px; max-width:800px;}

.microtabs-button { 
 padding: 10px; 
 background-color:#333; 
 color:#fff; 
 text-decoration:none; 
 font-family:Segoe UI, Helvetica, Arial; 
}
.microtabs-button:hover { color:#abcdef; }
.microtabs-selected { 
 background-color: #fff; 
 color: #333; 
 border-right:1px solid black; 
 border-top:1px solid black; 
 border-left:1px solid black; 
}

.microtabs-element { 
 background-color:#fff; 
 color:#555; 
 padding:10px; 
}

.microtabs-header { margin-bottom: -1px; }
.microtabs-container { border: 1px solid black; 

Demonstration
Get a look at the demo here.

Download
Source code
Compressed version (for production)

4 Kommentare:

  1. Hi!

    I noticed that the plugin didn't work if you had more than one set of tabs on a page. I edited the plugin by replacing the click handler for the header links with this:

    a.click(function() {
    obj.find('.microtabs-button').removeClass('microtabs-selected');
    $(this).addClass('microtabs-selected');
    obj.find('.microtabs-element').hide();
    obj.find('.mt-e-' + n).show();
    return false;
    });

    AntwortenLöschen
  2. Thanks mate!

    Yeah I noticed it as well and corrected it in the current release - which will be uploaded as soon as I have some time :-)

    AntwortenLöschen
  3. I refined the click handler further, after discovering that nested tabs weren't working quite right. Here's my new code:

    a.click(function() {
    var headers = obj.children('.microtabs-header'),
    elements = obj.children('.microtabs-container').children('.microtabs-element');


    headers.find('.microtabs-button').removeClass('microtabs-selected');
    $(this).addClass('microtabs-selected');
    elements.hide();
    elements.filter('.mt-e-' + n).show();
    return false;
    });

    AntwortenLöschen

Socialize!