|
Location: Scripting language - JavaScript License: The BSD License Creating tabs with JavascriptPosted by Jason HouleUsing Javascript, CSS, and iFrames to include content into a page without requiring a new page load. |
Skill: BeginnerPosted: 24/12/2008Views: 545Rating: 4.50 /5Popularity: 1.35 |
| Sign Up to vote for this article |
Introduction
I recently had to create a chat application which utilized tabs. In this post I will show you how to create a tab effect using Javascript and iFrames. We will use Javascript, CSS, and iFrames to include content into the page without requiring a new page load. While there are scripts already written to create tabs you may find it necessary to create something of your own to better work with your application. There are many, many different ways to do this, so remember that this is just one and a very simple one at that. Feel free to take this code and modify it any way you want.
Setting things up
First, let's create our HTML page. We will add a div with the id "container". This is where our tabs will be created. Remeber that we are going to keep things as simple as possible.
tabs.html
Next create a file named tabs.js. This file is where we will create the
Tab object and handle all functionality. Create a new object called
Tab. The constructor will take the name, the file or URL to be
displayed, and the name of the container to add the tab to. We will
also set properties for these values in our Tab object. We also need to
create an array to hold the references to our Tab objects.
tabs.js
So here we set the properties of name, content, and also a reference to the object that will contain our tabs. Notice Tab.instances array created at the end of the file. The reason we need this is to be able to reference each instance of Tab and be able to call the instance methods on it.
Now that we have our array of instances we need to add each instance to the array when it is created and we will also need a reference to this instance in the array. The index property will be the index in the array. Add the following to the tabs.js file.
tabs.js
Now that we have a Tab object we need it to actually do something to our page. We will add a function to create the tab. The first thing we need to do is create the container that will actually hold our tabs. I know I mentioned a container earlier but that one was the location of where we wantedt to create the tabs. Of course we do not want to add this every time we create an instance of Tab. We will add a check to see if it is already in place.
tabs.js
Now we need to add some styles to our newly created elements. We will create the tabs.css file.
tabs.css
Let's attach the Javascript file and the CSS file to our HTML file.
tabs.html
All that is great but if you look at the page it still doesn't do anything. Let's fix that. Next we will add the tab elements.
tabs.js
Ok, now that we have the Javascript written to add our tabs we need to actually create some instances of our Tab object. Add the following to the tabs.html page.
tabs.html
Definitely not what you were expecting to see right? That doesn't look like tabs at all. It looks more like a list. A very boring list. We needs to add some styles to our tabs and while we're at it lets add some rollover effects.
tabs.css
Now it looks like tabs but they don't do anything. We need to revisit
our Javascript file and add some event handlers to our tabs. We already
have the styles in place we just need to use them. In the createTab()
function add the following.
tabs.js
The rollovers are working. So far, so good. There are a few things you
may notice that need to be fixed. The first, in the onclick event
handler we call a function called showTab() but that function does not
exist yet. Also, our selected tab does not stay selected when we roll
over it. We need to add a property that will tell us if a tab is
selected or not. These next additions will fix both of these problems.
tabs.js
Here we get a preview to our next step. You probably noticed we are
accessing the properties of an element with the name view followed by
the index in the array. This is where we will display the data when our
tab is selected. Open the tabs.js file. We need to add to the
createTab()function.
tabs.js
The last thing we need to do is add the styles for the view element and the iframe that contains our data.
tabs.css
Conclusion
And there you have it! You probably wouldn't want to do this to include an entire external site as in this example but you could easily alter this to include your own local pages and generate dynamic content into your tabs. For example, if you wanted to have multiple tabs displaying different information about a product you could do something like the following where each call returns various data about a given product.
Well, have fun with it. This is a very simple implementation of Javascript tabs but feel free to take it and make it your own.
License
This article, along with any associated source code and files, is licensed under The BSD License
About the author
| Jason Houle
| Location: |
United StatesSign up to post message on the article message board!