[Sommaire] [Imprimer]

   1  /**
   2   * Tabs class for handling HTML/CSS tabs
   3   *
   4   * Copyright (C) 2003 Dipl.-Inform. Kai Hofmann and probusiness AG
   5   *
   6   * This library is free software; you can redistribute it and/or
   7   * modify it under the terms of the GNU Lesser General Public
   8   * License as published by the Free Software Foundation; either
   9   * version 2.1 of the License, or (at your option) any later version.
  10   *
  11   * This library is distributed in the hope that it will be useful,
  12   * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13   * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  14   * Lesser General Public License for more details.
  15   *
  16   * You should have received a copy of the GNU Lesser General Public
  17   * License along with this library; if not, write to the Free Software
  18   * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
  19   *
  20   * Contact information:
  21   * Dipl.-Inform. Kai Hofmann
  22   * Arberger Heerstr. 92
  23   * 28307 Bremen
  24   * Germany
  25   *
  26   *
  27   * probusiness AG
  28   * Expo-Plaza-Nr. 1
  29   * 30539 Hannover
  30   * Germany
  31   *
  32   *
  33   * @version 1.0
  34   * @author hofmann@hofmann-int.de
  35   *
  36   * @argument nrTabs Number of Tabs to handle
  37   * @argument activeCSSclass CSS class name for active tabs (display:inline)
  38   * @argument inactiveCSSclass CSS class name for inactive tabs (display:none)
  39   * @argument HTMLtabID HTML ID name prefix that would be used with the tab number as tab name.
  40   * @argument HTMLtabcontentID HTML ID prefix for the tab content used with the tab number
  41   * @argument HTMLtabselectorID HTML ID prefix for a selectbox used to switch between the tabs
  42   * @argument HTMLtabradioID HTML ID prefix for radio button input fields used to switch between the tabs
  43   * @argument tabPageKey URL parameter name to use for setting/getting the actual tab
  44   */
  45  function Tabs(nrTabs,activeCSSclass,inactiveCSSclass,HTMLtabID,HTMLtabcontentID,HTMLtabselectorID,HTMLtabradioID,tabPageKey)
  46   {
  47    this.nrTabs            = nrTabs;
  48    this.activeCSSclass    = activeCSSclass;
  49    this.inactiveCSSclass  = inactiveCSSclass;
  50    this.HTMLtabID         = HTMLtabID;
  51    this.HTMLtabcontentID  = HTMLtabcontentID;
  52    this.HTMLtabselectorID = HTMLtabselectorID;
  53    this.HTMLtabradioID    = HTMLtabradioID;
  54    this.tabPageKey        = tabPageKey;
  55  
  56    if (typeof(_tabs_prototype_called) == 'undefined')
  57     {
  58      _tabs_prototype_called        = true;
  59      Tabs.prototype.setActive      = setActive;
  60      Tabs.prototype.setInactive    = setInactive;
  61      Tabs.prototype.isActive       = isActive;
  62      Tabs.prototype.getActive      = getActive;
  63      Tabs.prototype.disableAll     = disableAll;
  64      Tabs.prototype.display        = display;
  65      Tabs.prototype.changeToActive = changeToActive;
  66      Tabs.prototype.init           = init;
  67     }
  68  
  69  
  70    /**
  71     * Set tab as active
  72     *
  73     * @argument tabnr The tab number (1-nrTabs) of the tab that should be active
  74     */
  75    function setActive(tabnr)
  76     {
  77      if ((tabnr > 0) && (tabnr <= this.nrTabs))
  78       {
  79        if(document.getElementById(this.HTMLtabID   + tabnr))
  80          document.getElementById(this.HTMLtabID   + tabnr).className = this.activeCSSclass;
  81        if(document.getElementById(this.HTMLtabcontentID + tabnr))
  82          document.getElementById(this.HTMLtabcontentID + tabnr).className = this.activeCSSclass;
  83  
  84        if(document.getElementById(this.HTMLtabselectorID))
  85          document.getElementById(this.HTMLtabselectorID).selectedIndex = tabnr-1;
  86        if(document.getElementById(this.HTMLtabradioID   + tabnr))
  87          document.getElementById(this.HTMLtabradioID   + tabnr).checked = true;
  88       }
  89     }
  90  
  91  
  92  
  93    /**
  94     * Set tab as inactive
  95     *
  96     * @argument tabnr The tab number (1-nrTabs) of the tab that should be inactive
  97     */
  98    function setInactive(tabnr)
  99     {
 100      if ((tabnr > 0) && (tabnr <= this.nrTabs))
 101       {
 102        if(document.getElementById(this.HTMLtabID        + tabnr))
 103          document.getElementById(this.HTMLtabID        + tabnr).className = this.inactiveCSSclass;
 104        if(document.getElementById(this.HTMLtabcontentID + tabnr))
 105          document.getElementById(this.HTMLtabcontentID + tabnr).className = this.inactiveCSSclass;
 106       }
 107     }
 108  
 109  
 110    /**
 111     * Test if tab is active
 112     *
 113     * @argument tabnr The tab number (1-nrTabs) of the tab that should be tested
 114     * @returns boolean - true if tab is active, false otherwise
 115     */
 116    function isActive(tabnr)
 117     {
 118      return(document.getElementById(HTMLtabID + tabnr).className == this.activeCSSclass);
 119     }
 120  
 121  
 122    /**
 123     * Get the active tab number
 124     *
 125     * @returns Tab (1-nrTabs) that is currently active or 0 if non is active.
 126     */
 127    function getActive()
 128     {
 129      for (i = 1; i <= this.nrTabs; ++i)
 130       {
 131        if (this.isActive(i))
 132         {
 133          return(i);
 134         }
 135       }
 136      return(0);
 137     }
 138  
 139  
 140    /**
 141     * Disable all tabs
 142     */
 143    function disableAll()
 144     {
 145      for (i = 1; i <= this.nrTabs; ++i)
 146       {
 147        this.setInactive(i);
 148       }
 149     }
 150  
 151  
 152    /**
 153     * Disable all tabs and then display the tab number given
 154     *
 155     * @argument tabnr Tab number to display
 156     */
 157    function display(tabnr)
 158     {
 159       for (i = 1; i <= this.nrTabs; ++i)
 160       {
 161        if (i == tabnr)
 162         this.setActive(tabnr);
 163        else
 164         this.setInactive(i);
 165       }
 166     }
 167  
 168  
 169    /**
 170     * Loop over all tabs - switch off currently active tabs and display the new tab
 171     *
 172     * @argument tabnr Tab number to display
 173     */
 174    function changeToActive(tabnr)
 175     {
 176      for (i = 1; i <= this.nrTabs; ++i)
 177       {
 178        if (i == tabnr)
 179         {
 180          if (!this.isActive(i))
 181           {
 182            this.setActive(i);
 183           }
 184         }
 185        else
 186         {
 187          if (this.isActive(i))
 188           {
 189            this.setInactive(i);
 190           }
 191         }
 192       }
 193     }
 194  
 195  
 196    /**
 197     * Determine active tab from url parameter or selector and display it.
 198     */
 199    function init()
 200     {
 201      var tab = 0;
 202      // this line is not working in IE 6
 203      //var regexp = new RegExp('(^|&)' + this.tabPageKey + '=[0-9]{1,2}');
 204      var regexp = new RegExp(this.tabPageKey + '=[0-9]{1,2}');
 205      var urlparams = window.location.search;
 206      var urlparamstart = urlparams.search(regexp);
 207  
 208      // getting the active tab from the tabPageKey (url/get-var) if set
 209      if (this.tabPageKey && urlparamstart > -1)
 210       {
 211         urlparamstart = urlparamstart + ((urlparams[urlparamstart] == '&') ? 1 : 0);
 212         var urlparam = urlparams.substr(urlparamstart,urlparams.length - urlparamstart);
 213         var pos = urlparam.indexOf("&");
 214         if (pos > -1)
 215          {
 216           urlparam = urlparam.substr(0,pos);
 217          }
 218         pos = urlparam.indexOf("=");
 219         if (pos > -1)
 220          {
 221           var urlparamvalue = urlparam.substr(pos + 1,urlparam.length - (pos + 1));
 222           tab = urlparamvalue;
 223          }
 224       }
 225      else
 226       {
 227        // getting the active tab from the selector if set
 228        // the check for != '' is needed for Konqueror
 229        if(document.getElementById(this.HTMLtabselectorID) && this.HTMLtabselectorID != '')
 230         tab = document.getElementById(this.HTMLtabselectorID).selectedIndex+1;
 231        else
 232         tab = 1;
 233       }
 234      if ((tab <= 0) || (tab > this.nrTabs))
 235       {
 236        tab = 1;
 237       }
 238      this.display(tab);
 239     }
 240   }