A working example
Let's jump straight in and see the completed working example. Below we have three tabs. The third has a link to the first and demonstrates how we can activate tabs and link to them. This is discussed in section 3.
Tab control example using click to change tabs
Tab control example using mouseover/hover to change tabs
Section 1: Include the required files.
First off you will need to include the supporting files. Paste the following into the [Additional Javascript] section of your Webpage or Article Template.
| <link rel="stylesheet"type="text/css"href="[ siteroot ]_style/dgtabs.css?v=0"/> |
| <script src="[ siteroot ]_javascript/dgtabs.js"type="text/javascript"></script> |
Section 2: Create your tabs
below is the basic format for the tabs.
- In the first line set the width as required and give the div (this is the wrapper div) a unique classname (in the example below we use 'tabinstance1'), we will use this later in section 4 to initialise the tab control.
- Now define the Tabs. Create a ul tag and give it the class 'dgtabs', then create as many LI's as required one for each Tab.
- Then create a new div element to contain the tab definitions. The class name for the container div should be 'dgtab_container', ensure you have as many tab content divs as there are tabs (above). NOTE: The tab content div's require the class name 'dgtab_content'.
- NOTE: Ensure the rel values for your dgtabs anchors are unique (in this example we use 1 2 and 3 and also ensure the id values for your dgtab_content divs are unqiue, in the example we have used tab1, tab2 and tab3
| <div style="width: 100%;" class="tabinstance1"> |
| <ul class="dgtabs"> |
| <li><a rel="1"href="#tab1">NEWS </a></li> |
| <li><a rel="2"href="#tab2">HEADLINES AROUND THE WEB </a></li> |
| <li><a rel="3"href="#tab3">LATEST VIDEO </a></li> |
| </ul> |
| <div class="dgtab_container"> |
| <div id="tab1"class="dgtab_content"> |
| hello tab 1 |
| </div> |
| <div id="tab2"class="dgtab_content"> |
| hello tab2 |
| </div> |
| <div id="tab3"class="dgtab_content"> |
| Hello tab 3 |
| <a onclick="javascript:seekToTab(1,'tabinstance1');return false;"href="#"> |
| link to tab one |
| </a> |
| </div> |
| </div> |
| <div style="clear: both; font-size: 1px; line-height: 1;"> |
| </div> |
| </div> |
Section 3: Creating a hyperlink to a tab
To link to a tab and have the tab contents displayed and become the active tab use the seekToTab() function as below, there is a is demonstration of this in the working example above.
<a onclick="javascript:seekToTab(1,'tabinstance1');return false;" href="#">
link to tab one
</a>
|
Section 4: Initialise the tab control
You will need to initialise your tab control. For this add a call to initialiseDGTabs() in your javascript block in the same place you added the include files in section 1.
NOTE: The 1st parameter to pass in is the name of the outer wrapper div of your tab control, in this example it is 'tabinstance'.
Change Tabs on
Hover or click
The 2nd parameter specifies how you want this tab control to switch tabs, state either click or hover.
| <script type="text/javascript"language="javascript"> |
| $(document).ready(function() { |
| |
| initialiseDgTabs("tabinstance1","click"); |
| |
| }); |
| </script> |
Section 5: Creating multiple tab controls on a page.
You can have as many tab controls appear on a page as required.
Read section 2 carefully, and ensure the div outer wrapper classname is unique and create an additional call to initialsieDGTabs() for each control you create (see section 4 above), check that your dgtab_content dvs have unique ids and the anchors within the dgtabs UL have unique rel values.