And oh yeah: they rotate!
I have used several jQuery tab/content rotators/panels/things and, although each has been extensively developed and tested, am always left with the feeling that something is missing:
- This one doesn’t let use put your own HTML in the tab-link
- That one only supports images
- The other one is 10,000 lines of code and you only use it once
- This one cycles too fast/slow
The purpose of Really Simple jQuery Tabs is to be really simple and really flexible.
You can:
- Add HTML to your semantically correct list item tab-links
- Panes are regular DIVS – put images, text, AJAX loaded content, etc. up in that DIV
- Specify (down to milliseconds) how fast to cycle, if you want to cycle at all
- bonus feature: only 844 bytes!
- Completely customize the CSS to affect layout, coloring, etc…
Before you get too far: Check out a simply -styled DEMO
Or, see it in action at: weber.edu/getintoweber
Implement it like this:
|
1 2 3 4 5 |
$().ready(function () { $(".jqtabcontainer").jqtabs(); //OR $(".jqtabcontainer").jqtabs(5000); //cycle time in milliseconds }); |
And the markup looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- jqtab Container --> <div id="t1" class="jqtabcontainer"><!-- Panel Container --> <div class="panels"> <div id="panel1" class="panel first"><img src="http://placekitten.com/300/200" alt="" /> Lorem ipsum dolor sit amet, consecteturelit.</div> <div id="panel2" class="panel">Quisque vitae elit non sem egestas placerat.</div> </div> <!-- End Panels --> <!-- Tab Navigation --> <ul class="navigation"> <li class="active" title="panel1">T1</li> <li title="panel2"><img src="An Image" alt="" /></li> </ul> </div> <!-- End Tabs --> |
Notice that semantic markup? Yeah, me too. It was written to be as flexible and extensible as possible.
