[Fusionforge-commits] r6835 - trunk/htdocs

Christian Bayle cbayle at libremir.placard.fr.eu.org
Fri Jan 30 23:36:58 CET 2009


Author: cbayle
Date: 2009-01-30 23:36:58 +0100 (Fri, 30 Jan 2009)
New Revision: 6835

Added:
   trunk/htdocs/tabber.css
   trunk/htdocs/tabber.js
Modified:
   trunk/htdocs/index.php
Log:
Add a nice Tabber


Modified: trunk/htdocs/index.php
===================================================================
--- trunk/htdocs/index.php	2009-01-30 20:48:45 UTC (rev 6834)
+++ trunk/htdocs/index.php	2009-01-30 22:36:58 UTC (rev 6835)
@@ -4,47 +4,54 @@
 		<link rel="shortcut icon" href="favicon.ico">
 		<title>FusionForge home page</title>
 		<style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "main.css"; /*]]>*/</style>
+		<script type="text/javascript" src="tabber.js"></script>
+		<link rel="stylesheet" href="tabber.css" TYPE="text/css" MEDIA="screen">
+		<script type="text/javascript">
+		document.write('<style type="text/css">.tabber{display:none;}<\/style>');
+		</script>
 	</head>
 	<body>
+	<blockquote>
 		<h1>FusionForge home page</h1>
-		<blockquote>
-			<h5>[<a HREF="http://packages.qa.debian.org/g/gforge.html">Forge package</a> |
-			<a HREF="http://fusionforge.org">FusionForge Project</a> |
-			<a href="http://wiki.planetforge.org/">PlanetForge Wiki</a> |
-			<a href="http://planetforge.org/">PlanetForge Agregator</a> |
-			<a href="mib.html">IRC Chat</a> ]</h5>
-			<br>
-			<h4>For debian you should create /etc/apt/sources.list.d/fusionforge file containing one of:</h4>
+		<h4>[<a HREF="http://packages.qa.debian.org/g/gforge.html">Forge package</a> |
+		<a HREF="http://fusionforge.org">FusionForge Project</a> |
+		<a href="http://wiki.planetforge.org/">PlanetForge Wiki</a> |
+		<a href="http://planetforge.org/">PlanetForge Agregator</a> |
+		<a href="mib.html">IRC Chat</a> ]</h4>
+			
 
-			<?php /*
-			<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian etch main
-deb-src http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian etch main</pre>
-			*/ ?>
-
-			<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian lenny main
+		<div id="tabber" class="tabber" >
+			<div class="tabbertab" title="Debian">
+				<h4>For debian you should create /etc/apt/sources.list.d/fusionforge file containing one of:</h4>
+				<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian lenny main
 deb-src http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian lenny main</pre>
-			<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian sid main
+				<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian sid main
 deb-src http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian sid main</pre>
-
-			<h4>For ubuntu you should create /etc/apt/sources.list.d/fusionforge file containing one of:</h4>
-
-			<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian gutsy main
+				<h5>You may have to add the archive key by running:</h5>
+				<pre>wget -q http://<?php echo $_SERVER['SERVER_NAME']; ?>/key -O- | sudo apt-key add -</pre>
+				<h5>then run the usual</h5>
+				<pre>apt-get update ; apt-get install fusionforge</pre>
+			</div>
+			<div class="tabbertab" title="Ubuntu">
+				<h4>For ubuntu you should create /etc/apt/sources.list.d/fusionforge file containing one of:</h4>
+				<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian gutsy main
 deb-src http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian gutsy main</pre>
-			<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian hardy main
+				<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian hardy main
 deb-src http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian hardy main</pre>
-			<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian intrepid main
+				<pre>deb http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian intrepid main
 deb-src http://<?php echo $_SERVER['SERVER_NAME']; ?>/debian intrepid main</pre>
-
-			<h5>You may have to add the archive key by running:</h5>
-			<pre>wget -q http://<?php echo $_SERVER['SERVER_NAME']; ?>/key -O- | sudo apt-key add -</pre>
-
-			<h5>then run the usual</h5>
-			<pre>apt-get update ; apt-get install fusionforge</pre>
-
-			<h4>Install CD is <a href="http://www.planetforge.org/downloads/" >Here</a></h4>
-			<h5>For more info you can join FusionForge developpers on IRC at:</h5>
-			<pre>irc.freenode.net channel #fusionforge </pre>
-			<script>
+				<h5>You may have to add the archive key by running:</h5>
+				<pre>wget -q http://<?php echo $_SERVER['SERVER_NAME']; ?>/key -O- | sudo apt-key add -</pre>
+				<h5>then run the usual</h5>
+				<pre>apt-get update ; apt-get install fusionforge</pre>
+			</div>
+			<div class="tabbertab" title="Install CD">
+				<h4>Install CD is <a href="http://www.planetforge.org/downloads/" >Here</a></h4>
+			</div>
+			<div class="tabbertab" title="Chat">
+				<h5>For more info you can join FusionForge developpers on IRC at:</h5>
+				<pre>irc.freenode.net channel #fusionforge </pre>
+				<script>
 				function bigit() {
 					document.getElementById('myiframe').width = '800, *';
 					document.getElementById('myiframe').height = '800, *';
@@ -53,15 +60,15 @@
 					document.getElementById('myiframe').width = '800, *';
 					document.getElementById('myiframe').height = '200, *';
 				}
-			</script>
-			<h6>Join #fusionforge on irc.freenode.net. Choose a nick and enter password if you have one. </h6>
-			<form>
-				<input id="mybutton1" type="button" onClick=bigit() value="Big Window">
-				<input id="mybutton2" type="button" onClick=smallit() value="Small Window">
-			</form>
-			<hr>
-			<iframe id="myiframe" width=800 height=200 scrolling=no style="border:0" src="http://embed.mibbit.com/?server=irc.freenode.net&channel=%23fusionforge&noServerNotices=true&noServerMotd=true&promptPass=true"></iframe>
-
-		</blockquote>
+				</script>
+				<h6>Join #fusionforge on irc.freenode.net. Choose a nick and enter password if you have one. </h6>
+				<form>
+					<input id="mybutton1" type="button" onClick=bigit() value="Big Window">
+					<input id="mybutton2" type="button" onClick=smallit() value="Small Window">
+				</form>
+				<iframe id="myiframe" width=800 height=200 scrolling=no style="border:0" src="http://embed.mibbit.com/?server=irc.freenode.net&channel=%23fusionforge&noServerNotices=true&noServerMotd=true&promptPass=true"></iframe>
+			</div>
+		</div>
+	</blockquote>
 	</body>
 </html>

Added: trunk/htdocs/tabber.css
===================================================================
--- trunk/htdocs/tabber.css	                        (rev 0)
+++ trunk/htdocs/tabber.css	2009-01-30 22:36:58 UTC (rev 6835)
@@ -0,0 +1,109 @@
+/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
+
+/*--------------------------------------------------
+  REQUIRED to hide the non-active tab content.
+  But do not hide them in the print stylesheet!
+  --------------------------------------------------*/
+.tabberlive .tabbertabhide {
+ display:none;
+}
+
+/*--------------------------------------------------
+  .tabber = before the tabber interface is set up
+  .tabberlive = after the tabber interface is set up
+  --------------------------------------------------*/
+.tabber {
+}
+.tabberlive {
+ margin-top:1em;
+}
+
+/*--------------------------------------------------
+  ul.tabbernav = the tab navigation list
+  li.tabberactive = the active tab
+  --------------------------------------------------*/
+ul.tabbernav
+{
+ margin:0;
+ padding: 3px 0;
+ border-bottom: 1px solid #778;
+ font: bold 12px Verdana, sans-serif;
+}
+
+ul.tabbernav li
+{
+ list-style: none;
+ margin: 0;
+ display: inline;
+}
+
+ul.tabbernav li a
+{
+ padding: 3px 0.5em;
+ margin-left: 3px;
+ border: 1px solid #778;
+ border-bottom: none;
+ background: #DDE;
+ text-decoration: none;
+}
+
+ul.tabbernav li a:link { color: #448; }
+ul.tabbernav li a:visited { color: #667; }
+
+ul.tabbernav li a:hover
+{
+ color: #000;
+ background: #AAE;
+ border-color: #227;
+}
+
+ul.tabbernav li.tabberactive a
+{
+ background-color: #fff;
+ border-bottom: 1px solid #fff;
+}
+
+ul.tabbernav li.tabberactive a:hover
+{
+ color: #000;
+ background: white;
+ border-bottom: 1px solid white;
+}
+
+/*--------------------------------------------------
+  .tabbertab = the tab content
+  Add style only after the tabber interface is set up (.tabberlive)
+  --------------------------------------------------*/
+.tabberlive .tabbertab {
+ padding:5px;
+ border:1px solid #aaa;
+ border-top:0;
+
+ /* If you don't want the tab size changing whenever a tab is changed
+    you can set a fixed height */
+
+ /* height:200px; */
+
+ /* If you set a fix height set overflow to auto and you will get a
+    scrollbar when necessary */
+
+ /* overflow:auto; */
+}
+
+/* If desired, hide the heading since a heading is provided by the tab */
+.tabberlive .tabbertab h2 {
+ display:none;
+}
+.tabberlive .tabbertab h3 {
+ display:none;
+}
+
+/* Example of using an ID to set different styles for the tabs on the page */
+.tabberlive#tab1 {
+}
+.tabberlive#tab2 {
+}
+.tabberlive#tab2 .tabbertab {
+ height:200px;
+ overflow:auto;
+}

Added: trunk/htdocs/tabber.js
===================================================================
--- trunk/htdocs/tabber.js	                        (rev 0)
+++ trunk/htdocs/tabber.js	2009-01-30 22:36:58 UTC (rev 6835)
@@ -0,0 +1,523 @@
+/*==================================================
+  $Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
+  tabber.js by Patrick Fitzgerald pat at barelyfitz.com
+
+  Documentation can be found at the following URL:
+  http://www.barelyfitz.com/projects/tabber/
+
+  License (http://www.opensource.org/licenses/mit-license.php)
+
+  Copyright (c) 2006 Patrick Fitzgerald
+
+  Permission is hereby granted, free of charge, to any person
+  obtaining a copy of this software and associated documentation files
+  (the "Software"), to deal in the Software without restriction,
+  including without limitation the rights to use, copy, modify, merge,
+  publish, distribute, sublicense, and/or sell copies of the Software,
+  and to permit persons to whom the Software is furnished to do so,
+  subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be
+  included in all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
+  BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+  ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+  ==================================================*/
+
+function tabberObj(argsObj)
+{
+  var arg; /* name of an argument to override */
+
+  /* Element for the main tabber div. If you supply this in argsObj,
+     then the init() method will be called.
+  */
+  this.div = null;
+
+  /* Class of the main tabber div */
+  this.classMain = "tabber";
+
+  /* Rename classMain to classMainLive after tabifying
+     (so a different style can be applied)
+  */
+  this.classMainLive = "tabberlive";
+
+  /* Class of each DIV that contains a tab */
+  this.classTab = "tabbertab";
+
+  /* Class to indicate which tab should be active on startup */
+  this.classTabDefault = "tabbertabdefault";
+
+  /* Class for the navigation UL */
+  this.classNav = "tabbernav";
+
+  /* When a tab is to be hidden, instead of setting display='none', we
+     set the class of the div to classTabHide. In your screen
+     stylesheet you should set classTabHide to display:none.  In your
+     print stylesheet you should set display:block to ensure that all
+     the information is printed.
+  */
+  this.classTabHide = "tabbertabhide";
+
+  /* Class to set the navigation LI when the tab is active, so you can
+     use a different style on the active tab.
+  */
+  this.classNavActive = "tabberactive";
+
+  /* Elements that might contain the title for the tab, only used if a
+     title is not specified in the TITLE attribute of DIV classTab.
+  */
+  this.titleElements = ['h2','h3','h4','h5','h6'];
+
+  /* Should we strip out the HTML from the innerHTML of the title elements?
+     This should usually be true.
+  */
+  this.titleElementsStripHTML = true;
+
+  /* If the user specified the tab names using a TITLE attribute on
+     the DIV, then the browser will display a tooltip whenever the
+     mouse is over the DIV. To prevent this tooltip, we can remove the
+     TITLE attribute after getting the tab name.
+  */
+  this.removeTitle = true;
+
+  /* If you want to add an id to each link set this to true */
+  this.addLinkId = false;
+
+  /* If addIds==true, then you can set a format for the ids.
+     <tabberid> will be replaced with the id of the main tabber div.
+     <tabnumberzero> will be replaced with the tab number
+       (tab numbers starting at zero)
+     <tabnumberone> will be replaced with the tab number
+       (tab numbers starting at one)
+     <tabtitle> will be replaced by the tab title
+       (with all non-alphanumeric characters removed)
+   */
+  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
+
+  /* You can override the defaults listed above by passing in an object:
+     var mytab = new tabber({property:value,property:value});
+  */
+  for (arg in argsObj) { this[arg] = argsObj[arg]; }
+
+  /* Create regular expressions for the class names; Note: if you
+     change the class names after a new object is created you must
+     also change these regular expressions.
+  */
+  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
+  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
+  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
+  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
+  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
+
+  /* Array of objects holding info about each tab */
+  this.tabs = new Array();
+
+  /* If the main tabber div was specified, call init() now */
+  if (this.div) {
+
+    this.init(this.div);
+
+    /* We don't need the main div anymore, and to prevent a memory leak
+       in IE, we must remove the circular reference between the div
+       and the tabber object. */
+    this.div = null;
+  }
+}
+
+
+/*--------------------------------------------------
+  Methods for tabberObj
+  --------------------------------------------------*/
+
+
+tabberObj.prototype.init = function(e)
+{
+  /* Set up the tabber interface.
+
+     e = element (the main containing div)
+
+     Example:
+     init(document.getElementById('mytabberdiv'))
+   */
+
+  var
+  childNodes, /* child nodes of the tabber div */
+  i, i2, /* loop indices */
+  t, /* object to store info about a single tab */
+  defaultTab=0, /* which tab to select by default */
+  DOM_ul, /* tabbernav list */
+  DOM_li, /* tabbernav list item */
+  DOM_a, /* tabbernav link */
+  aId, /* A unique id for DOM_a */
+  headingElement; /* searching for text to use in the tab */
+
+  /* Verify that the browser supports DOM scripting */
+  if (!document.getElementsByTagName) { return false; }
+
+  /* If the main DIV has an ID then save it. */
+  if (e.id) {
+    this.id = e.id;
+  }
+
+  /* Clear the tabs array (but it should normally be empty) */
+  this.tabs.length = 0;
+
+  /* Loop through an array of all the child nodes within our tabber element. */
+  childNodes = e.childNodes;
+  for(i=0; i < childNodes.length; i++) {
+
+    /* Find the nodes where class="tabbertab" */
+    if(childNodes[i].className &&
+       childNodes[i].className.match(this.REclassTab)) {
+      
+      /* Create a new object to save info about this tab */
+      t = new Object();
+      
+      /* Save a pointer to the div for this tab */
+      t.div = childNodes[i];
+      
+      /* Add the new object to the array of tabs */
+      this.tabs[this.tabs.length] = t;
+
+      /* If the class name contains classTabDefault,
+	 then select this tab by default.
+      */
+      if (childNodes[i].className.match(this.REclassTabDefault)) {
+	defaultTab = this.tabs.length-1;
+      }
+    }
+  }
+
+  /* Create a new UL list to hold the tab headings */
+  DOM_ul = document.createElement("ul");
+  DOM_ul.className = this.classNav;
+  
+  /* Loop through each tab we found */
+  for (i=0; i < this.tabs.length; i++) {
+
+    t = this.tabs[i];
+
+    /* Get the label to use for this tab:
+       From the title attribute on the DIV,
+       Or from one of the this.titleElements[] elements,
+       Or use an automatically generated number.
+     */
+    t.headingText = t.div.title;
+
+    /* Remove the title attribute to prevent a tooltip from appearing */
+    if (this.removeTitle) { t.div.title = ''; }
+
+    if (!t.headingText) {
+
+      /* Title was not defined in the title of the DIV,
+	 So try to get the title from an element within the DIV.
+	 Go through the list of elements in this.titleElements
+	 (typically heading elements ['h2','h3','h4'])
+      */
+      for (i2=0; i2<this.titleElements.length; i2++) {
+	headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
+	if (headingElement) {
+	  t.headingText = headingElement.innerHTML;
+	  if (this.titleElementsStripHTML) {
+	    t.headingText.replace(/<br>/gi," ");
+	    t.headingText = t.headingText.replace(/<[^>]+>/g,"");
+	  }
+	  break;
+	}
+      }
+    }
+
+    if (!t.headingText) {
+      /* Title was not found (or is blank) so automatically generate a
+         number for the tab.
+      */
+      t.headingText = i + 1;
+    }
+
+    /* Create a list element for the tab */
+    DOM_li = document.createElement("li");
+
+    /* Save a reference to this list item so we can later change it to
+       the "active" class */
+    t.li = DOM_li;
+
+    /* Create a link to activate the tab */
+    DOM_a = document.createElement("a");
+    DOM_a.appendChild(document.createTextNode(t.headingText));
+    DOM_a.href = "javascript:void(null);";
+    DOM_a.title = t.headingText;
+    DOM_a.onclick = this.navClick;
+
+    /* Add some properties to the link so we can identify which tab
+       was clicked. Later the navClick method will need this.
+    */
+    DOM_a.tabber = this;
+    DOM_a.tabberIndex = i;
+
+    /* Do we need to add an id to DOM_a? */
+    if (this.addLinkId && this.linkIdFormat) {
+
+      /* Determine the id name */
+      aId = this.linkIdFormat;
+      aId = aId.replace(/<tabberid>/gi, this.id);
+      aId = aId.replace(/<tabnumberzero>/gi, i);
+      aId = aId.replace(/<tabnumberone>/gi, i+1);
+      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
+
+      DOM_a.id = aId;
+    }
+
+    /* Add the link to the list element */
+    DOM_li.appendChild(DOM_a);
+
+    /* Add the list element to the list */
+    DOM_ul.appendChild(DOM_li);
+  }
+
+  /* Add the UL list to the beginning of the tabber div */
+  e.insertBefore(DOM_ul, e.firstChild);
+
+  /* Make the tabber div "live" so different CSS can be applied */
+  e.className = e.className.replace(this.REclassMain, this.classMainLive);
+
+  /* Activate the default tab, and do not call the onclick handler */
+  this.tabShow(defaultTab);
+
+  /* If the user specified an onLoad function, call it now. */
+  if (typeof this.onLoad == 'function') {
+    this.onLoad({tabber:this});
+  }
+
+  return this;
+};
+
+
+tabberObj.prototype.navClick = function(event)
+{
+  /* This method should only be called by the onClick event of an <A>
+     element, in which case we will determine which tab was clicked by
+     examining a property that we previously attached to the <A>
+     element.
+
+     Since this was triggered from an onClick event, the variable
+     "this" refers to the <A> element that triggered the onClick
+     event (and not to the tabberObj).
+
+     When tabberObj was initialized, we added some extra properties
+     to the <A> element, for the purpose of retrieving them now. Get
+     the tabberObj object, plus the tab number that was clicked.
+  */
+
+  var
+  rVal, /* Return value from the user onclick function */
+  a, /* element that triggered the onclick event */
+  self, /* the tabber object */
+  tabberIndex, /* index of the tab that triggered the event */
+  onClickArgs; /* args to send the onclick function */
+
+  a = this;
+  if (!a.tabber) { return false; }
+
+  self = a.tabber;
+  tabberIndex = a.tabberIndex;
+
+  /* Remove focus from the link because it looks ugly.
+     I don't know if this is a good idea...
+  */
+  a.blur();
+
+  /* If the user specified an onClick function, call it now.
+     If the function returns false then do not continue.
+  */
+  if (typeof self.onClick == 'function') {
+
+    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
+
+    /* IE uses a different way to access the event object */
+    if (!event) { onClickArgs.event = window.event; }
+
+    rVal = self.onClick(onClickArgs);
+    if (rVal === false) { return false; }
+  }
+
+  self.tabShow(tabberIndex);
+
+  return false;
+};
+
+
+tabberObj.prototype.tabHideAll = function()
+{
+  var i; /* counter */
+
+  /* Hide all tabs and make all navigation links inactive */
+  for (i = 0; i < this.tabs.length; i++) {
+    this.tabHide(i);
+  }
+};
+
+
+tabberObj.prototype.tabHide = function(tabberIndex)
+{
+  var div;
+
+  if (!this.tabs[tabberIndex]) { return false; }
+
+  /* Hide a single tab and make its navigation link inactive */
+  div = this.tabs[tabberIndex].div;
+
+  /* Hide the tab contents by adding classTabHide to the div */
+  if (!div.className.match(this.REclassTabHide)) {
+    div.className += ' ' + this.classTabHide;
+  }
+  this.navClearActive(tabberIndex);
+
+  return this;
+};
+
+
+tabberObj.prototype.tabShow = function(tabberIndex)
+{
+  /* Show the tabberIndex tab and hide all the other tabs */
+
+  var div;
+
+  if (!this.tabs[tabberIndex]) { return false; }
+
+  /* Hide all the tabs first */
+  this.tabHideAll();
+
+  /* Get the div that holds this tab */
+  div = this.tabs[tabberIndex].div;
+
+  /* Remove classTabHide from the div */
+  div.className = div.className.replace(this.REclassTabHide, '');
+
+  /* Mark this tab navigation link as "active" */
+  this.navSetActive(tabberIndex);
+
+  /* If the user specified an onTabDisplay function, call it now. */
+  if (typeof this.onTabDisplay == 'function') {
+    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
+  }
+
+  return this;
+};
+
+tabberObj.prototype.navSetActive = function(tabberIndex)
+{
+  /* Note: this method does *not* enforce the rule
+     that only one nav item can be active at a time.
+  */
+
+  /* Set classNavActive for the navigation list item */
+  this.tabs[tabberIndex].li.className = this.classNavActive;
+
+  return this;
+};
+
+
+tabberObj.prototype.navClearActive = function(tabberIndex)
+{
+  /* Note: this method does *not* enforce the rule
+     that one nav should always be active.
+  */
+
+  /* Remove classNavActive from the navigation list item */
+  this.tabs[tabberIndex].li.className = '';
+
+  return this;
+};
+
+
+/*==================================================*/
+
+
+function tabberAutomatic(tabberArgs)
+{
+  /* This function finds all DIV elements in the document where
+     class=tabber.classMain, then converts them to use the tabber
+     interface.
+
+     tabberArgs = an object to send to "new tabber()"
+  */
+  var
+    tempObj, /* Temporary tabber object */
+    divs, /* Array of all divs on the page */
+    i; /* Loop index */
+
+  if (!tabberArgs) { tabberArgs = {}; }
+
+  /* Create a tabber object so we can get the value of classMain */
+  tempObj = new tabberObj(tabberArgs);
+
+  /* Find all DIV elements in the document that have class=tabber */
+
+  /* First get an array of all DIV elements and loop through them */
+  divs = document.getElementsByTagName("div");
+  for (i=0; i < divs.length; i++) {
+    
+    /* Is this DIV the correct class? */
+    if (divs[i].className &&
+	divs[i].className.match(tempObj.REclassMain)) {
+      
+      /* Now tabify the DIV */
+      tabberArgs.div = divs[i];
+      divs[i].tabber = new tabberObj(tabberArgs);
+    }
+  }
+  
+  return this;
+}
+
+
+/*==================================================*/
+
+
+function tabberAutomaticOnLoad(tabberArgs)
+{
+  /* This function adds tabberAutomatic to the window.onload event,
+     so it will run after the document has finished loading.
+  */
+  var oldOnLoad;
+
+  if (!tabberArgs) { tabberArgs = {}; }
+
+  /* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */
+
+  oldOnLoad = window.onload;
+  if (typeof window.onload != 'function') {
+    window.onload = function() {
+      tabberAutomatic(tabberArgs);
+    };
+  } else {
+    window.onload = function() {
+      oldOnLoad();
+      tabberAutomatic(tabberArgs);
+    };
+  }
+}
+
+
+/*==================================================*/
+
+
+/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
+
+if (typeof tabberOptions == 'undefined') {
+
+    tabberAutomaticOnLoad();
+
+} else {
+
+  if (!tabberOptions['manualStartup']) {
+    tabberAutomaticOnLoad(tabberOptions);
+  }
+
+}




More information about the Fusionforge-commits mailing list