New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Aptabs

Demo

Submitted script - Author: Armel Pingault(Homepage)

Bookmark and Share

Download script

You can download the entire script from this Zip file

Setup

Step 1: Include the css and javascript files

<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: Create your html

To create tags, the main <div> needs to feature the attribute class="apTabs"; you may also specify the width and height of the frame in the "style" attribute.

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.

Example:

<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>

Comments

Jerry Victor
Hello Armel Pingault:
Today,I use your Aptabs plugin in my project,but I am a newcomer to use prototype.In the plugin,I want to expand some new function to apply to my project,such as add tab dynamic,I want to ask you whether the Add function in you script could finish this task.The other question,for example,'add:function(e,tab){.....}',what 'e' it is,it means a javascript standart event?Please answer my question,Thank you very much!
Jerry Victor at 08:33PM, 2011/06/21.
Steve
This doesn't work in IE8.
Steve at 02:49PM, 2011/08/26.
Steve
Can anyone figure out how to get this to work in IE8? Seem like it would be pretty cool! I am getting the following error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.2; .NET4.0E; OfficeLiveConnector.1.5; OfficeLivePatch.1.3)
Timestamp: Wed, 31 Aug 2011 06:28:40 UTC


Message: 'down(...)' is null or not an object
Line: 223
Char: 3
Code: 0
URI: http://www.dhtmlgoodies.com/submitted-scripts/aptabs/src/aptabs.js

thanks!
Steve at 12:23AM, 2011/08/31.
mangesh
it working in firefox but not working in IE7&8
mangesh at 12:22AM, 2011/09/28.
arbyter
great work!! if you upgrade prototype.js to version 1.7 then it works also in IE 8 and 9 !!
arbyter at 09:01AM, 2011/11/21.
Arbyter
Hi Armel
i am using your tab-script, it works well;
Now i have a question; i would like to have twoline Tab-Lables but it does not expand the height of the tabs.
Any succestions?

Arbyter at 08:50AM, 2012/01/06.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com