[Sommaire] [Imprimer]

   1  /*
   2  Dynamic Tabs 1.0
   3  Copyright (c) 2005 Rob Allen (rob at akrabat dot com)
   4  
   5  Permission is hereby granted, free of charge, to any person 
   6  obtaining a copy of this software and associated documentation 
   7  files (the "Software"), to deal in the Software without restriction,
   8  including without limitation the rights to use, copy, modify, merge,
   9  publish, distribute, sublicense, and/or sell copies of the Software,
  10  and to permit persons to whom the Software is furnished to do so,
  11  subject to the following conditions:
  12  
  13  The above copyright notice and this permission notice shall be 
  14  included in all copies or substantial portions of the Software.
  15  
  16  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
  17  EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
  18  OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
  19  NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
  20  HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  21  WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
  23  DEALINGS IN THE SOFTWARE.
  24   
  25  */
  26  
  27  
  28  function getChildElementsByClassName(parentElement, className)
  29  {
  30      var i, childElements, pattern, result;
  31      result = new Array();
  32      pattern = new RegExp("\\b"+className+"\\b");
  33  
  34  
  35      childElements = parentElement.getElementsByTagName('*');
  36      for(i = 0; i < childElements.length; i++)
  37      {
  38          if(childElements[i].className.search(pattern) != -1)
  39          {
  40              result[result.length] = childElements[i];
  41          }
  42      }
  43      return result;
  44  }
  45  
  46  
  47  function BuildTabs(containerName, headerName, tablistName)
  48  {
  49      var i, tabContainer, tabContents, tabHeading, title, tabElement;
  50      var divElement, ulElement, liElement, tabLink, linkText;
  51      if (containerName == null)
  52          {
  53          containerName = 'tab-container';
  54          }
  55      if (headerName == null)
  56          {
  57          headerName = 'tab-header';
  58          }
  59      if (tablistName == null)
  60          {
  61          tablistName = 'tab-list';
  62          }
  63  
  64      // assume that if document.getElementById exists, then this will work...
  65      if(! eval('document.getElementById') ) return;
  66  
  67      tabContainer = document.getElementById(containerName);
  68      if(tabContainer == null)
  69          return;
  70  
  71      tabContents = getChildElementsByClassName(tabContainer, 'tab-content');
  72      if(tabContents.length == 0)
  73          return;
  74  
  75      divElement = document.createElement("div");
  76      divElement.id = headerName;
  77      ulElement = document.createElement("ul");
  78      ulElement.id = tablistName;
  79  
  80      tabContainer.insertBefore(divElement, tabContents[0]);
  81      divElement.appendChild(ulElement);
  82  
  83      for(i = 0 ; i < tabContents.length; i++)
  84      {
  85          tabHeading = getChildElementsByClassName(tabContents[i], 'tab');
  86          title = tabHeading[0].childNodes[0].nodeValue;
  87  
  88  
  89          // create the tabs as an unsigned list
  90          liElement = document.createElement("li");
  91          tabLink = document.createElement("a");
  92          linkText = document.createTextNode(title);
  93  
  94          tabLink.className = "tab-item";
  95  
  96          tabLink.setAttribute("href","javascript://");
  97          tabLink.setAttribute( "title", tabHeading[0].getAttribute("title"));
  98          if (! (containerName == "tab-container"))
  99            {
 100            tabLink.onclick = new Function ("ActivateTab(" + i + ",'"+containerName+"','"+tablistName+"')");
 101            }
 102          else
 103            {
 104            tabLink.onclick = new Function ("ActivateTab(" + i + ")");
 105            }
 106  
 107          ulElement.appendChild(liElement);
 108          liElement.appendChild(tabLink);
 109          tabLink.appendChild(linkText);
 110  
 111          // remove the H1
 112          tabContents[i].removeChild
 113      }
 114  }
 115  
 116  function ActivateTab(activeTabIndex, containerName, tablistName)
 117  {
 118      var i, tabContainer, tabContents, tabList, tabs;
 119      if (containerName == null)
 120          {
 121          containerName = 'tab-container';
 122          }
 123      if (tablistName == null)
 124          {
 125          tablistName = 'tab-list';
 126          }
 127  
 128  
 129      tabContainer = document.getElementById(containerName);
 130      if(tabContainer == null)
 131          return;
 132  
 133      tabContents = getChildElementsByClassName(tabContainer, 'tab-content');
 134      if(tabContents.length > 0)
 135      {
 136          for(i = 0; i < tabContents.length; i++)
 137          {
 138              tabContents[i].style.display = "none";
 139          }
 140  
 141          tabContents[activeTabIndex].style.display = "block";
 142  
 143  
 144          tabList = document.getElementById(tablistName);
 145          tabs = getChildElementsByClassName(tabContainer, 'tab-item');
 146          if(tabs.length > 0)
 147          {
 148              for(i = 0; i < tabs.length; i++)
 149              {
 150                  tabs[i].className = "tab-item";
 151              }
 152  
 153              tabs[activeTabIndex].className = "tab-item tab-active";
 154              tabs[activeTabIndex].blur();
 155          }
 156      }
 157  }
 158  /*BuildTabs('tab-container','tab-header','tab-list');*/
 159  /*ActivateTab(1,'tab-container','tab-list');*/