A jQuery tabs module for todays web!

  • By Aaron Lumsden
  • Last update: Dec 4, 2022
  • Comments: 9

tabulous.js

A jQuery tabs module for todays web!

Documentation

Tabulous.js can be used with any contents you choose in the tabs and it couldn't be more simpler to use.

..:: Getting Started

Include the relevant files

Firstly include jQuery and the tabulous.css and tabulous.js files. Place these before <head> section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="tabulous.js"></script>
<script type="text/javascript" src="js.js"></script>
Create the tabs
  <div id="tabs">
  	<ul>
			<li><a href="#tabs-1" title="">Tab 1</a></li>
			<li><a href="#tabs-2" title="">Tab 2</a></li>
			<li><a href="#tabs-3" title="">Tab 3</a></li>
		</ul>
		<div id="tabs_container">
			<div id="tabs-1">
				<!--tab content-->
			</div>
			<div id="tabs-2">
				   <!--tab content-->
			</div>
			<div id="tabs-3">
				    <!--tab content-->
			</div>
		</div><!--End tabs container-->	
  </div><!--End tabs-->
Initiate the plugin

Once you have created your tabs you will need to initiate the plugin.

At its most basic level you can initiate the plugin like:

	$(document).ready(function ($) {

    $('#tabs').tabulous();  

});

If you want to initiate the plugin with options then you can do so like:

$('#tabs').tabulous({
      effect: 'scale'
    });

..:: Options

						</tbody>
					</table>
Variable Default Value Description Valid Options
effect scale The effect to use for the transition scale / slideLeft / scaleUp / flip

Github

https://github.com/aaronlumsden/tabulous.js

Comments(9)

  • 1

    Current demo doesnt work

    The demo in the repo doesnt work, my guess is that you forgot update the html in the demo after one commit adding "target_class" stuff, the demo in here uses a previous version, and that one works.

  • 2

    tabs overlap problem

    Hello , such a great script. thank you for the plugin. i realized some problem which is related tab containers. i added some elements on label textbox dropdown etc and try to click them.It doesnt work than i digged to html with firebug and i saw tab2 overlap to tab1.so because control event didn't trigger.

    i guess this is problem due to css class: hidescale property : opacity property.

  • 3

    Bug fixes.

    • Allows links inside the tab content without conflicting with the tab links themselves.
    • Refactors the code to target a target_class so that any html element can be used for the tab content.
    • Deletes trailing whitespace.
  • 4

    Create List with JS

    Hi, again a tab-script, just like hundreds others. And again one, that forces the developer to create a separate navigation list on top. Why don't you create these tabs with JavaScript, based on the headlines inside the tabbed-containers?

    This would be correct, because the tabbed effect is made with JS and without JS the tab-list isn't needed anymore.

  • 5

    Images not showing in tabs because of interaction with usemaps

    Hi

    I've noticed that if you put a usemap on an image like : usemap="#Map", the image no longuer shows in the tab.

    I think theres an interaction in the DOM with the use of "#".

    Could you fix that in your script please ?

    Thanks.

  • 6

    Padding causes issue in height of tabbed content

    When giving top/bottom padding, the height of tab becomes an issue. I mean the content overflows over the border as the .height() returns height - padding. So, I've used .css('height') to fix issue.

    Also, we shouldn't use ID, there may be instances to use multiple tabbed content in a single page, so a class selector is better.

  • 7

    Support effect 'none'

    I was really thrilled of using this plugin as per its simplicity, however I strictly need no transition effect between tabs.

    I think it makes really sense to support no transition effect.

  • 8

    Integration preprocessor sass

    Rearranging files and integration of sass Hello, I integrates preprocessor sass in your code. The final compiled css gives an identical result to the base and holds the css css is simplified.

  • 9

    New option 'tabs', improved implementation

    Added new option 'tabs', that specifies jquery-elements, acting as tabs switchers. This is useful for tabs, located in random places of the document. Slightly improved implementation, that is now w3c-standards compilant.

Popular Tag

Related