Cut & Paste apTabs v1.1
|
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 2
Tab 3
Tab 4
Tab 5
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>