Categories:

Home / Free JavaScripts / Content Management scripts / Here

Cut & Paste apTabs v1.1

Credit: Armel Pingault

Last updated: Dec 1st, 08' to v1.1. Ability to create new tab with Ajax or iFrame content. Script now IE8 beta 2 compatible.

Description (text from author's site): apTabs is an open source HTML/JavaScript Tabs solution using the Prototype framework. Regular H2 header tags are used to render the tabs themselves, and DIVs for the tab contents. A novel feature is the ability to scroll the tabs horizontally to display lots of tabs in a confined space. The apTabs script offers numerous advantages:

  • apTabs is unobtrusive.
  • The script installation has been largely simplified.
  • apTabs works on all modern browsers.

apTabs has been successfully tested in IE6-7, IE8 beta2, Opera9, Chrome 0.3, Safari 3.1 Win, and Firefox 2-3.

Demo:

Tab 1

Tab content 1. Select 2nd tab by clicking here.

Tab 2

Tab content 2. Select 3rd tab by clicking here.

Tab 3

Tab content 3. Notice how this tab cannot be user closed. Select 4th tab by clicking here.

Tab 4

Tab content 4. Select 5th tab by clicking here.

Tab 5

apTabs has been successfully tested in IE6-7, Opera9, Chrome 0.3, Safari 3.1 Win, and Firefox 2-3.

Create a new tab "Ajax" with Ajax content

Create a new tab "iFrame" with iFrame content

Directions: Simply download "apTabs_1.1.0.zip", and refer to demo.htm for the full source code. Below lists the installation info in case you need that extra help:

Step 1: Insert the below code in the <head> tag of your HTML page:

<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/aptabs.js"></script>
<link rel="stylesheet" type="text/css" href="css/aptabs.css" />

Step 2: To add apTabs to your page, a  main <div> needs to carry the CSS class "apTabs"; you should also set the width and height of this DIV in the "style" attribute. Then, to create a new tab, you will only need to add a <h2> tag with the name of the tab followed by the tab content in a <div> tag.

<div class="apTabs" style="width:500px; height:100px">
    <h2>Tab 1</h2>
    <div>Tab content 1</div>
    <h2>Tab 2</h2>
    <div>Tab content 2</div>
    <h2>Tab 3</h2>
    <div>Tab content 3</div>
</div> 

And that's it!

Options

You have the possibility to customize options in the aptabs.js script:

Browser Version
tagName Tag name (En majuscule)
path Path to the images directory
tabWidth Tab width
contentPadding Content padding
scrollSpeed Scroll speed
defaultWidth Default width
defaultHeight Default height
defaultTab Default selected tab: 1 = 1st tab

How to prevent a tab from closing ?

You can prevent a tab from closing by adding the attribute class = "noclose" to the tab.

<h2 class="noclose">Tab</h2> 

How to select a tab ?

You can create a link to a tab as follows:

<a onclick="apTabs.show('apTabs', 2)">Installation</a> 

Or if the link lies inside a tab:

<a onclick="apTabs.show(this, 2)">Installation</a>

How to create a new tab ?

<a onclick="apTabs.add('apTabs', {title: 'Ajax', ajax: 'ajax.php'})">New tab</a> 

Or

<a onclick="apTabs.add('apTabs', {title: 'iFrame', iframe: 'iframe.html'})">New 
tab</a>

JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.