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)
Hi!
AntwortenLöschenI 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;
});
Thanks mate!
AntwortenLöschenYeah I noticed it as well and corrected it in the current release - which will be uploaded as soon as I have some time :-)
I refined the click handler further, after discovering that nested tabs weren't working quite right. Here's my new code:
AntwortenLöschena.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;
});
izmir
AntwortenLöschenizmit
karabük
karaman
kars
GLNC