Revision [10678]

This is an old revision of TabNavigation made by GmBowen on 2005-08-14 06:31:06.

 

Content Tabs


Do you have LONG pages of text? This mod can be used to provide a tabbed navigation through those long pages showing only part of the content at once. It's kinda primitive, but it does seem to work pretty well.

The following is a modified version of scripts obtained from http://www.javascriptkit.com/script/script2/contenttabs.shtml that provides tabs on a web page. As far as I can tell from the site, scripts can be modified and redistributed. Going to that link provides a good example of how they work...that's how they work in a wiki page too.

Limitations: It does not work if you're using headers of any sort. It does seem to work with bold, italics, etc. Also, actions of any sort cannot be included in them. The colours are hard coded in the scripts. I'm sure there's some way of making it more part of the wiki stylesheet, but I'm not sure how to do that (particularly for the js file). It'd be nice if the section headings could be set as part of the {{tabstart}}, but since they're determined in the js file, I don't think that's possible (admittedly, it might well be possible to pass the names across as variables & I just don't know how).

Usage: Add code such as the following to your wiki page. That will provide tabs across the top & bottom of the page that navigates between the different pieces of content. Note that you can have as many of the {{tabmid}} indicators as you wish, but you must start and stop the whole section with the appropriate tags.

{{tabstart}}
This is the start
{{tabmid}}
This is the middle
{{tabmid}}
This is almost the end
{{tabmid}}
This is the end
{{tabmid}}
This is absolutely the end
{{tabend}}



You need three short scripts saved to the actions directory. They are

tabstart.php
<div id="cyclelinks"></div>

<p class="dropcontent">

tabmid.php

</p>

<p class="dropcontent">
tabend.php

</p>

<div id="cyclelinks2" align="right"></div>
In addition, the following lines need to be added to the header.php file...

<script src="scripts/contentdivider.js" type="text/javascript">
Content Tabs Script- By JavaScriptKit.com (http://www.javascriptkit.com)
For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
This notice must stay intact for use
</script>
Place these **AFTER** the line in header.php....

<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
Save the following code in a directory in wikka root called "scripts" as contentdivider.js

if (window.addEventListener
window.attachEvent){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

Content Tabs script- By JavaScriptKit.com (http://www.javascriptkit.com)
Last updated: July 25th, 05'

var showrecords=1
specify number of contents to show per tab
var tabhighlightcolor="lightyellow" specify tab color when selected
var taboriginalcolor="lightgrey"
specify default tab color. Should echo your CSS file definition.

Stop editing here

document.getElementsByClass=function(tag, classname){
var tagcollect=document.all? document.all.tags(tag): document.getElementsByTagName(tag)
IE5 workaround
var filteredcollect=new Array()
var inc=0
for (i=0;i<tagcollect.length;i){
if (tagcollect[i].className
classname) filteredcollect[inc]=tagcollect[i]
}
return filteredcollect
}


function contractall(){
var inc=0
while (contentcollect[inc]){
contentcollect[inc].style.display="none"
inc
}
}

function expandone(whichpage){
var lowerbound=(whichpage-1)*showrecords
var upperbound=(tabstocreate
whichpage)? contentcollect.length-1 : lowerbound+showrecords-1 contractall()
for (i=lowerbound;i<=upperbound;i
)
contentcollect[i].style.display="block"
}

function highlightone(whichtab){
for (i=0;i<tabscollect.length;i){
tabscollect[i].style.backgroundColor=taboriginalcolor
tabscollect[i].style.borderRightColor="white"
tabsfootcollect[i].style.backgroundColor="white"
}
tabscollect[whichtab].style.backgroundColor=tabhighlightcolor
tabscollect[whichtab].style.borderRightColor="gray"
tabsfootcollect[whichtab].style.backgroundColor="#E8E8E8"
}

function generatetab(){
contentcollect=document.getElementsByClass("p", "dropcontent")
tabstocreate=Math.ceil(contentcollect.length/showrecords)
linkshtml= linkshtml2=
for (i=1;i<=tabstocreate;i
){
linkshtml+='<span class="tabstyle" onClick="expandone('+i+');highlightone('+(i-1)+')"><b>Page '+i+'</b></span>'
linkshtml2+='<a href="#" class="tabsfootstyle" onClick="expandone('+i+');highlightone('+(i-1)+');return false">Page '+i+'</a> '
}
document.getElementById("cyclelinks").innerHTML=linkshtml
document.getElementById("cyclelinks2").innerHTML=linkshtml2
tabscollect=document.getElementsByClass("span", "tabstyle")
tabsfootcollect=document.getElementsByClass("a", "tabsfootstyle")
highlightone(0)
expandone(1)
}

if (window.addEventListener)
window.addEventListener("load", generatetab, false)
else if (window.attachEvent)
window.attachEvent("onload", generatetab)
save the following code in the css directory as tabstyle.css

.dropcontent{
display:block;
}

.tabstyle{
cursor: pointer;
cursor: hand;
width:70px;
font: bold 12px Arial;
background-color: lightgrey;
border-top: 1px solid gray;
border-right: 3px outset white;
}

.tabstyle b{
color: blue;
margin-left: 3px;
margin-right: 12px;
}

#cyclelinks2{
margin-right:12px;
}

#cyclelinks2 .tabsfootstyle{
font: bold 12px Arial;
text-decoration:none;
background-color:white;
margin-right:3px;
}
%%


CategoryUserContributions
There are no comments on this page.