[Sommaire] [Imprimer]

   1    /****************************************************************************\
   2     * Dynamic Tabs - Javascript Object                                         *
   3     *                                                                          *
   4     * Written by:                                                              *
   5     *  - Raphael Derosso Pereira <raphaelpereira@users.sourceforge.net>        *
   6     * ------------------------------------------------------------------------ *
   7     *  This program is free software; you can redistribute it and/or modify it *
   8     *  under the terms of the GNU General Public License as published by the   *
   9     *  Free Software Foundation; either version 2 of the License, or (at your  *
  10     *  option) any later version.                                              *
  11    \****************************************************************************/
  12  
  13      /*
  14       * Dynamic Tabs - On-The-Fly Tabs in Javascript
  15       *
  16       * Usage:
  17       *        var tabs = new dTabsManager({'id': <DIV id to be used>, 'width': '498px'});
  18       *
  19       *        tabs.addTab({'id': <ID of the Contents DIV (must be absolute)>,
  20       *                     'name': <text to be shown on tab selector>,
  21       *                   'selectedClass': <name of the class to be used when Tab is selected>,
  22       *                   'unselectedClass': <name of the class to be used when Tab is not selected>});
  23       */
  24       
  25      dTabsManager.prototype.init = function(params)
  26      {
  27          /* Attributes definition */
  28          this._Tabs = new Array();
  29          this._Tabs['root'] = null;
  30          this._Tabs['tabIndexTR'] = null;
  31          this._Tabs['tabIndexTDs'] = new Array();
  32          this._Tabs['contents'] = null;
  33          this._Tabs['contentsDIV'] = null;
  34          this._selectedIndex = null;
  35          
  36          this._nTabs   = params['nTabs'] ? params['nTabs'] : 0;
  37          this._maxTabs = params['maxTabs'] ? params['maxTabs'] : 0;
  38  
  39  
  40          /* Create and insert the container */
  41          var table, tbody, tr, td, style;
  42          var _this = this;
  43  
  44          style = document.createElement('link');
  45          style.href = GLOBALS['serverRoot'] + "phpgwapi/js/dTabs/dTabs.css";
  46          style.rel = "stylesheet";
  47          style.type = "text/css";
  48  
  49          this._Tabs['root'] = document.createElement('div');
  50          this._Tabs['root'].id = params['id'];
  51          this._Tabs['root'].style.position = 'absolute';
  52          //this._Tabs['root'].style.visibility = 'hidden';
  53          this._Tabs['root'].style.top = '150px';
  54          this._Tabs['root'].style.left = '0px';
  55          this._Tabs['root'].style.width = params['width'] ? params['width'] : 0;
  56          
  57          table = document.createElement('table');
  58          tbody = document.createElement('tbody');
  59          table.style.border = '0px solid black';
  60          table.style.width  = '100%';
  61          table.style.height = '100%';
  62          table.cellpadding = '10px';
  63  
  64          this._Tabs['tabIndexTR'] = document.createElement('tr');
  65          this._Tabs['tabIndexTR'].style.height = '30px';
  66          this._Tabs['tabIndexTR'].className = 'dTabs_tr_index';
  67          //this._Tabs['tabIndexTR'].style.width  = '100%';
  68          
  69          this._Tabs['emptyTab'] = document.createElement('td');
  70          this._Tabs['emptyTab'].className = 'dTabs_noTabs';
  71          this._Tabs['emptyTab'].innerHTML = '&nbsp;';
  72          this._Tabs['tabIndexTR'].appendChild(this._Tabs['emptyTab']);
  73          
  74          tr = document.createElement('tr');
  75          td = document.createElement('td');
  76  
  77          tr.style.width  = '100%';
  78          tr.style.height = '100%';
  79  
  80          //this._Tabs['contentsDIV'] = document.createElement('div');
  81          //this._Tabs['contentsDIV'].style.position = 'relative';
  82          this._Tabs['contentsDIV'] = td;
  83  
  84          this._Tabs['root'].appendChild(table);
  85          table.appendChild(tbody);
  86          tbody.appendChild(this._Tabs['tabIndexTR']);
  87          tbody.appendChild(tr);
  88          tr.appendChild(td);
  89          //td.appendChild(this._Tabs['contentsDIV']);
  90          tr.appendChild(this._Tabs['contentsDIV']);
  91          
  92          this._Tabs['contents'] = new Array();
  93  
  94          var create = function ()
  95          {
  96              document.body.appendChild(style);
  97              document.body.appendChild(_this._Tabs['root']);
  98              _this.created = true;
  99          }
 100  
 101          this.created = false;
 102          //JsLib.postponeFunction(create);
 103          create();
 104      }
 105  
 106      /*
 107          @method addTab
 108          @abstract Inserts a tab
 109      */
 110      dTabsManager.prototype.addTab = function (params)
 111      {
 112          var _this = this;
 113  
 114          if (this.created)
 115          {
 116              return this.addTabIE(params);
 117          }
 118  
 119          //JsLib.postponeFunction(function(){ _this.addTabIE(params);});
 120      }
 121  
 122      dTabsManager.prototype.addTabIE = function (params)
 123      {
 124          if (typeof(params) != 'object')
 125          {
 126              return false;
 127          }
 128  
 129          if (!params['id'] || !Element(params['id']) || 
 130              Element(params['id']).tagName.toLowerCase() != 'div' ||
 131              Element(params['id']).style.position.toLowerCase() != 'absolute')
 132          {
 133              return false;
 134          }
 135          
 136          if (this._Tabs['contents'][params['id']])
 137          {
 138              this.replaceTab(params);
 139              return;
 140          }
 141  
 142          //var contents, tdIndex;
 143          var element = Element(params['id']);
 144          
 145      //    element.parentNode.removeChild(element);
 146          element.style.top = parseInt(this._Tabs['tabIndexTR'].style.height) + 5 + 'px';
 147          element.style.left = this._Tabs['root'].style.left;
 148          element.style.zIndex = '-1';
 149          
 150          this._Tabs['contents'][params['id']] = element;
 151          
 152          this._Tabs.tabIndexTDs[params['id']] = document.createElement('td');
 153          
 154          var _this = this;
 155          this._Tabs.tabIndexTDs[params['id']].innerHTML           = '&nbsp;&nbsp;'+(params['name'] ? params['name'] : 'undefined')+'&nbsp;&nbsp;';
 156          this._Tabs.tabIndexTDs[params['id']].selectedClassName   = 'dTabs_selected';
 157          this._Tabs.tabIndexTDs[params['id']].unselectedClassName = 'dTabs_unselected';
 158          this._Tabs.tabIndexTDs[params['id']].className           = 'dTabs_unselected';
 159          this._Tabs.tabIndexTDs[params['id']].onclick             = function() {_this._showTab(params['id']);};
 160  
 161          /* Old Version
 162          this._Tabs.tabIndexTDs[params['id']].innerHTML           = params['name'] ? params['name'] : 'undefined';
 163          this._Tabs.tabIndexTDs[params['id']].selectedClassName   = params['selectedClass'];
 164          this._Tabs.tabIndexTDs[params['id']].unselectedClassName = params['unselectedClass'];
 165          this._Tabs.tabIndexTDs[params['id']].className           = params['unselectedClass'];
 166          this._Tabs.tabIndexTDs[params['id']].onclick             = function() {_this._showTab(params['id']);};
 167          */
 168  
 169          this._Tabs.tabIndexTR.removeChild(this._Tabs['emptyTab']);
 170          this._Tabs.tabIndexTR.appendChild(this._Tabs.tabIndexTDs[params['id']]);
 171          this._Tabs.tabIndexTR.appendChild(this._Tabs['emptyTab']);
 172  
 173          this._Tabs.contentsDIV.appendChild(this._Tabs['contents'][params['id']]);
 174  
 175          this._nTabs++;
 176  
 177          if (this._nTabs == 1)
 178          {
 179              this._showTab(params['id']);
 180          }
 181          
 182          return;
 183      }
 184  
 185      dTabsManager.prototype.enableTab = function(id)
 186      {
 187          var _this = this;
 188  
 189          var enable = function()
 190          {
 191              if (_this._Tabs.contents[id])
 192              {
 193                  _this._Tabs.tabIndexTDs[id].className = 'dTabs_unselected';
 194                  _this._Tabs.tabIndexTDs[id].onclick = function() {_this._showTab(id);};
 195              }
 196          }
 197          
 198          if (!this.created)
 199          {
 200              JsLib.postponeFunction(enable);
 201          }
 202          else
 203          {
 204              enable();
 205          }
 206      }
 207  
 208      dTabsManager.prototype.disableTab = function(id)
 209      {
 210          var _this = this;
 211  
 212          var disable = function ()
 213          {
 214              if (_this._Tabs.contents[id])
 215              {
 216                  _this._Tabs.tabIndexTDs[id].className = 'dTabs_disabled';
 217                  _this._Tabs.tabIndexTDs[id].onclick = null;
 218              }
 219          }
 220          
 221          if (!this.created)
 222          {
 223              JsLib.postponeFunction(disable);
 224          }
 225          else
 226          {
 227              disable();
 228          }
 229      }
 230  
 231      /****************************************************************************\
 232       *                         Private Methods                                  *
 233      \****************************************************************************/
 234