lib/yui/tabview/tabview.js

   1 /*
   2 Copyright (c) 2007, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.net/yui/license.txt
   5 version: 2.3.0
   6 */
   7 (function() {
   8
   9     /**
  10      * The tabview module provides a widget for managing content bound to tabs.
  11      * @module tabview
  12      * @requires yahoo, dom, event, element
  13      *
  14      */
  15     /**
  16      * A widget to control tabbed views.
  17      * @namespace YAHOO.widget
  18      * @class TabView
  19      * @extends YAHOO.util.Element
  20      * @constructor
  21      * @param {HTMLElement | String | Object} el(optional) The html
  22      * element that represents the TabView, or the attribute object to use.
  23      * An element will be created if none provided.
  24      * @param {Object} attr (optional) A key map of the tabView's
  25      * initial attributes.  Ignored if first arg is attributes object.
  26      */
  27     YAHOO.widget.TabView = function(el, attr) {
  28         attr = attr || {};
  29         if (arguments.length == 1 && !YAHOO.lang.isString(el) && !el.nodeName) {
  30             attr = el; // treat first arg as attr object
  31             el = attr.element || null;
  32         }
  33
  34         if (!el && !attr.element) { // create if we dont have one
  35             el = _createTabViewElement.call(this, attr);
  36         }
  37         YAHOO.widget.TabView.superclass.constructor.call(this, el, attr);
  38     };
  39
  40     YAHOO.extend(YAHOO.widget.TabView, YAHOO.util.Element);
  41
  42     var proto = YAHOO.widget.TabView.prototype;
  43     var Dom = YAHOO.util.Dom;
  44     var Event = YAHOO.util.Event;
  45     var Tab = YAHOO.widget.Tab;
  46
  47
  48     /**
  49      * The className to add when building from scratch.
  50      * @property CLASSNAME
  51      * @default "navset"
  52      */
  53     proto.CLASSNAME = 'yui-navset';
  54
  55     /**
  56      * The className of the HTMLElement containing the TabView's tab elements
  57      * to look for when building from existing markup, or to add when building
  58      * from scratch.
  59      * All childNodes of the tab container are treated as Tabs when building
  60      * from existing markup.
  61      * @property TAB_PARENT_CLASSNAME
  62      * @default "nav"
  63      */
  64     proto.TAB_PARENT_CLASSNAME = 'yui-nav';
  65
  66     /**
  67      * The className of the HTMLElement containing the TabView's label elements
  68      * to look for when building from existing markup, or to add when building
  69      * from scratch.
  70      * All childNodes of the content container are treated as content elements when
  71      * building from existing markup.
  72      * @property CONTENT_PARENT_CLASSNAME
  73      * @default "nav-content"
  74      */
  75     proto.CONTENT_PARENT_CLASSNAME = 'yui-content';
  76
  77     proto._tabParent = null;
  78     proto._contentParent = null;
  79
  80     /**
  81      * Adds a Tab to the TabView instance.
  82      * If no index is specified, the tab is added to the end of the tab list.
  83      * @method addTab
  84      * @param {YAHOO.widget.Tab} tab A Tab instance to add.
  85      * @param {Integer} index The position to add the tab.
  86      * @return void
  87      */
  88     proto.addTab = function(tab, index) {
  89         var tabs = this.get('tabs');
  90         if (!tabs) { // not ready yet
  91             this._queue[this._queue.length] = ['addTab', arguments];
  92             return false;
  93         }
  94
  95         index = (index === undefined) ? tabs.length : index;
  96
  97         var before = this.getTab(index);
  98
  99         var self = this;
 100         var el = this.get('element');
 101         var tabParent = this._tabParent;
 102         var contentParent = this._contentParent;
 103
 104         var tabElement = tab.get('element');
 105         var contentEl = tab.get('contentEl');
 106
 107         if ( before ) {
 108             tabParent.insertBefore(tabElement, before.get('element'));
 109         } else {
 110             tabParent.appendChild(tabElement);
 111         }
 112
 113         if ( contentEl && !Dom.isAncestor(contentParent, contentEl) ) {
 114             contentParent.appendChild(contentEl);
 115         }
 116
 117         if ( !tab.get('active') ) {
 118             tab.set('contentVisible', false, true); /* hide if not active */
 119         } else {
 120             this.set('activeTab', tab, true);
 121
 122         }
 123
 124         var activate = function(e) {
 125             YAHOO.util.Event.preventDefault(e);
 126             var silent = false;
 127
 128             if (this == self.get('activeTab')) {
 129                 silent = true; // dont fire activeTabChange if already active
 130             }
 131             self.set('activeTab', this, silent);
 132         };
 133
 134         tab.addListener( tab.get('activationEvent'), activate);
 135
 136         tab.addListener('activationEventChange', function(e) {
 137             if (e.prevValue != e.newValue) {
 138                 tab.removeListener(e.prevValue, activate);
 139                 tab.addListener(e.newValue, activate);
 140             }
 141         });
 142
 143         tabs.splice(index, 0, tab);
 144     };
 145
 146     /**
 147      * Routes childNode events.
 148      * @method DOMEventHandler
 149      * @param {event} e The Dom event that is being handled.
 150      * @return void
 151      */
 152     proto.DOMEventHandler = function(e) {
 153         var el = this.get('element');
 154         var target = YAHOO.util.Event.getTarget(e);
 155         var tabParent = this._tabParent;
 156
 157         if (Dom.isAncestor(tabParent, target) ) {
 158             var tabEl;
 159             var tab = null;
 160             var contentEl;
 161             var tabs = this.get('tabs');
 162
 163             for (var i = 0, len = tabs.length; i < len; i++) {
 164                 tabEl = tabs[i].get('element');
 165                 contentEl = tabs[i].get('contentEl');
 166
 167                 if ( target == tabEl || Dom.isAncestor(tabEl, target) ) {
 168                     tab = tabs[i];
 169                     break; // note break
 170                 }
 171             }
 172
 173             if (tab) {
 174                 tab.fireEvent(e.type, e);
 175             }
 176         }
 177     };
 178
 179     /**
 180      * Returns the Tab instance at the specified index.
 181      * @method getTab
 182      * @param {Integer} index The position of the Tab.
 183      * @return YAHOO.widget.Tab
 184      */
 185     proto.getTab = function(index) {
 186         return this.get('tabs')[index];
 187     };
 188
 189     /**
 190      * Returns the index of given tab.
 191      * @method getTabIndex
 192      * @param {YAHOO.widget.Tab} tab The tab whose index will be returned.
 193      * @return int
 194      */
 195     proto.getTabIndex = function(tab) {
 196         var index = null;
 197         var tabs = this.get('tabs');
 198         for (var i = 0, len = tabs.length; i < len; ++i) {
 199             if (tab == tabs[i]) {
 200                 index = i;
 201                 break;
 202             }
 203         }
 204
 205         return index;
 206     };
 207
 208     /**
 209      * Removes the specified Tab from the TabView.
 210      * @method removeTab
 211      * @param {YAHOO.widget.Tab} item The Tab instance to be removed.
 212      * @return void
 213      */
 214     proto.removeTab = function(tab) {
 215         var tabCount = this.get('tabs').length;
 216
 217         var index = this.getTabIndex(tab);
 218         var nextIndex = index + 1;
 219         if ( tab == this.get('activeTab') ) { // select next tab
 220             if (tabCount > 1) {
 221                 if (index + 1 == tabCount) {
 222                     this.set('activeIndex', index - 1);
 223                 } else {
 224                     this.set('activeIndex', index + 1);
 225                 }
 226             }
 227         }
 228
 229         this._tabParent.removeChild( tab.get('element') );
 230         this._contentParent.removeChild( tab.get('contentEl') );
 231         this._configs.tabs.value.splice(index, 1);
 232
 233     };
 234
 235     /**
 236      * Provides a readable name for the TabView instance.
 237      * @method toString
 238      * @return String
 239      */
 240     proto.toString = function() {
 241         var name = this.get('id') || this.get('tagName');
 242         return "TabView " + name;
 243     };
 244
 245     /**
 246      * The transiton to use when switching between tabs.
 247      * @method contentTransition
 248      */
 249     proto.contentTransition = function(newTab, oldTab) {
 250         newTab.set('contentVisible', true);
 251         oldTab.set('contentVisible', false);
 252     };
 253
 254     /**
 255      * setAttributeConfigs TabView specific properties.
 256      * @method initAttributes
 257      * @param {Object} attr Hash of initial attributes
 258      */
 259     proto.initAttributes = function(attr) {
 260         YAHOO.widget.TabView.superclass.initAttributes.call(this, attr);
 261
 262         if (!attr.orientation) {
 263             attr.orientation = 'top';
 264         }
 265
 266         var el = this.get('element');
 267
 268         if (!YAHOO.util.Dom.hasClass(el, this.CLASSNAME)) {
 269             YAHOO.util.Dom.addClass(el, this.CLASSNAME);
 270         }
 271
 272         /**
 273          * The Tabs belonging to the TabView instance.
 274          * @config tabs
 275          * @type Array
 276          */
 277         this.setAttributeConfig('tabs', {
 278             value: [],
 279             readOnly: true
 280         });
 281
 282         /**
 283          * The container of the tabView's label elements.
 284          * @property _tabParent
 285          * @private
 286          * @type HTMLElement
 287          */
 288         this._tabParent =
 289                 this.getElementsByClassName(this.TAB_PARENT_CLASSNAME,
 290                         'ul' )[0] || _createTabParent.call(this);
 291
 292         /**
 293          * The container of the tabView's content elements.
 294          * @property _contentParent
 295          * @type HTMLElement
 296          * @private
 297          */
 298         this._contentParent =
 299                 this.getElementsByClassName(this.CONTENT_PARENT_CLASSNAME,
 300                         'div')[0] ||  _createContentParent.call(this);
 301
 302         /**
 303          * How the Tabs should be oriented relative to the TabView.
 304          * @config orientation
 305          * @type String
 306          * @default "top"
 307          */
 308         this.setAttributeConfig('orientation', {
 309             value: attr.orientation,
 310             method: function(value) {
 311                 var current = this.get('orientation');
 312                 this.addClass('yui-navset-' + value);
 313
 314                 if (current != value) {
 315                     this.removeClass('yui-navset-' + current);
 316                 }
 317
 318                 switch(value) {
 319                     case 'bottom':
 320                     this.appendChild(this._tabParent);
 321                     break;
 322                 }
 323             }
 324         });
 325
 326         /**
 327          * The index of the tab currently active.
 328          * @config activeIndex
 329          * @type Int
 330          */
 331         this.setAttributeConfig('activeIndex', {
 332             value: attr.activeIndex,
 333             method: function(value) {
 334                 this.set('activeTab', this.getTab(value));
 335             },
 336             validator: function(value) {
 337                 return !this.getTab(value).get('disabled'); // cannot activate if disabled
 338             }
 339         });
 340
 341         /**
 342          * The tab currently active.
 343          * @config activeTab
 344          * @type YAHOO.widget.Tab
 345          */
 346         this.setAttributeConfig('activeTab', {
 347             value: attr.activeTab,
 348             method: function(tab) {
 349                 var activeTab = this.get('activeTab');
 350
 351                 if (tab) {
 352                     tab.set('active', true);
 353                     this._configs['activeIndex'].value = this.getTabIndex(tab); // keep in sync
 354                 }
 355
 356                 if (activeTab && activeTab != tab) {
 357                     activeTab.set('active', false);
 358                 }
 359
 360                 if (activeTab && tab != activeTab) { // no transition if only 1
 361                     this.contentTransition(tab, activeTab);
 362                 } else if (tab) {
 363                     tab.set('contentVisible', true);
 364                 }
 365             },
 366             validator: function(value) {
 367                 return !value.get('disabled'); // cannot activate if disabled
 368             }
 369         });
 370
 371         if ( this._tabParent ) {
 372             _initTabs.call(this);
 373         }
 374
 375         // Due to delegation we add all DOM_EVENTS to the TabView container
 376         // but IE will leak when unsupported events are added, so remove these
 377         this.DOM_EVENTS.submit = false;
 378         this.DOM_EVENTS.focus = false;
 379         this.DOM_EVENTS.blur = false;
 380
 381         for (var type in this.DOM_EVENTS) {
 382             if ( YAHOO.lang.hasOwnProperty(this.DOM_EVENTS, type) ) {
 383                 this.addListener.call(this, type, this.DOMEventHandler);
 384             }
 385         }
 386     };
 387
 388     /**
 389      * Creates Tab instances from a collection of HTMLElements.
 390      * @method initTabs
 391      * @private
 392      * @return void
 393      */
 394     var _initTabs = function() {
 395         var tab,
 396             attr,
 397             contentEl;
 398
 399         var el = this.get('element');
 400         var tabs = _getChildNodes(this._tabParent);
 401         var contentElements = _getChildNodes(this._contentParent);
 402
 403         for (var i = 0, len = tabs.length; i < len; ++i) {
 404             attr = {};
 405
 406             if (contentElements[i]) {
 407                 attr.contentEl = contentElements[i];
 408             }
 409
 410             tab = new YAHOO.widget.Tab(tabs[i], attr);
 411             this.addTab(tab);
 412
 413             if (tab.hasClass(tab.ACTIVE_CLASSNAME) ) {
 414                 this._configs.activeTab.value = tab; // dont invoke method
 415                 this._configs.activeIndex.value = this.getTabIndex(tab);
 416             }
 417         }
 418     };
 419
 420     var _createTabViewElement = function(attr) {
 421         var el = document.createElement('div');
 422
 423         if ( this.CLASSNAME ) {
 424             el.className = this.CLASSNAME;
 425         }
 426
 427         return el;
 428     };
 429
 430     var _createTabParent = function(attr) {
 431         var el = document.createElement('ul');
 432
 433         if ( this.TAB_PARENT_CLASSNAME ) {
 434             el.className = this.TAB_PARENT_CLASSNAME;
 435         }
 436
 437         this.get('element').appendChild(el);
 438
 439         return el;
 440     };
 441
 442     var _createContentParent = function(attr) {
 443         var el = document.createElement('div');
 444
 445         if ( this.CONTENT_PARENT_CLASSNAME ) {
 446             el.className = this.CONTENT_PARENT_CLASSNAME;
 447         }
 448
 449         this.get('element').appendChild(el);
 450
 451         return el;
 452     };
 453
 454     var _getChildNodes = function(el) {
 455         var nodes = [];
 456         var childNodes = el.childNodes;
 457
 458         for (var i = 0, len = childNodes.length; i < len; ++i) {
 459             if (childNodes[i].nodeType == 1) {
 460                 nodes[nodes.length] = childNodes[i];
 461             }
 462         }
 463
 464         return nodes;
 465     };
 466
 467 /**
 468  * Fires before the activeTab is changed.
 469  * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
 470  * <p>If handler returns false, the change will be cancelled, and the value will not
 471  * be set.</p>
 472  * <p><strong>Event fields:</strong><br>
 473  * <code>&lt;String&gt; type</code> beforeActiveTabChange<br>
 474  * <code>&lt;<a href="YAHOO.widget.Tab.html">YAHOO.widget.Tab</a>&gt;
 475  * prevValue</code> the currently active tab<br>
 476  * <code>&lt;<a href="YAHOO.widget.Tab.html">YAHOO.widget.Tab</a>&gt;
 477  * newValue</code> the tab to be made active</p>
 478  * <p><strong>Usage:</strong><br>
 479  * <code>var handler = function(e) {var previous = e.prevValue};<br>
 480  * myTabs.addListener('beforeActiveTabChange', handler);</code></p>
 481  * @event beforeActiveTabChange
 482  */
 483
 484 /**
 485  * Fires after the activeTab is changed.
 486  * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
 487  * <p><strong>Event fields:</strong><br>
 488  * <code>&lt;String&gt; type</code> activeTabChange<br>
 489  * <code>&lt;<a href="YAHOO.widget.Tab.html">YAHOO.widget.Tab</a>&gt;
 490  * prevValue</code> the formerly active tab<br>
 491  * <code>&lt;<a href="YAHOO.widget.Tab.html">YAHOO.widget.Tab</a>&gt;
 492  * newValue</code> the new active tab</p>
 493  * <p><strong>Usage:</strong><br>
 494  * <code>var handler = function(e) {var previous = e.prevValue};<br>
 495  * myTabs.addListener('activeTabChange', handler);</code></p>
 496  * @event activeTabChange
 497  */
 498
 499 /**
 500  * Fires before the orientation is changed.
 501  * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
 502  * <p>If handler returns false, the change will be cancelled, and the value will not
 503  * be set.</p>
 504  * <p><strong>Event fields:</strong><br>
 505  * <code>&lt;String&gt; type</code> beforeOrientationChange<br>
 506  * <code>&lt;String&gt;
 507  * prevValue</code> the current orientation<br>
 508  * <code>&lt;String&gt;
 509  * newValue</code> the new orientation to be applied</p>
 510  * <p><strong>Usage:</strong><br>
 511  * <code>var handler = function(e) {var previous = e.prevValue};<br>
 512  * myTabs.addListener('beforeOrientationChange', handler);</code></p>
 513  * @event beforeOrientationChange
 514  */
 515
 516 /**
 517  * Fires after the orientation is changed.
 518  * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
 519  * <p><strong>Event fields:</strong><br>
 520  * <code>&lt;String&gt; type</code> orientationChange<br>
 521  * <code>&lt;String&gt;
 522  * prevValue</code> the former orientation<br>
 523  * <code>&lt;String&gt;
 524  * newValue</code> the new orientation</p>
 525  * <p><strong>Usage:</strong><br>
 526  * <code>var handler = function(e) {var previous = e.prevValue};<br>
 527  * myTabs.addListener('orientationChange', handler);</code></p>
 528  * @event orientationChange
 529  */
 530 })();
 531
 532 (function() {
 533     var Dom = YAHOO.util.Dom,
 534         Event = YAHOO.util.Event;
 535
 536     /**
 537      * A representation of a Tab's label and content.
 538      * @namespace YAHOO.widget
 539      * @class Tab
 540      * @extends YAHOO.util.Element
 541      * @constructor
 542      * @param element {HTMLElement | String} (optional) The html element that
 543      * represents the TabView. An element will be created if none provided.
 544      * @param {Object} properties A key map of initial properties
 545      */
 546     var Tab = function(el, attr) {
 547         attr = attr || {};
 548         if (arguments.length == 1 && !YAHOO.lang.isString(el) && !el.nodeName) {
 549             attr = el;
 550             el = attr.element;
 551         }
 552
 553         if (!el && !attr.element) {
 554             el = _createTabElement.call(this, attr);
 555         }
 556
 557         this.loadHandler =  {
 558             success: function(o) {
 559                 this.set('content', o.responseText);
 560             },
 561             failure: function(o) {
 562             }
 563         };
 564
 565         Tab.superclass.constructor.call(this, el, attr);
 566
 567         this.DOM_EVENTS = {}; // delegating to tabView
 568     };
 569
 570     YAHOO.extend(Tab, YAHOO.util.Element);
 571     var proto = Tab.prototype;
 572
 573     /**
 574      * The default tag name for a Tab's inner element.
 575      * @property LABEL_INNER_TAGNAME
 576      * @type String
 577      * @default "em"
 578      */
 579     proto.LABEL_TAGNAME = 'em';
 580
 581     /**
 582      * The class name applied to active tabs.
 583      * @property ACTIVE_CLASSNAME
 584      * @type String
 585      * @default "on"
 586      */
 587     proto.ACTIVE_CLASSNAME = 'selected';
 588
 589     /**
 590      * The class name applied to disabled tabs.
 591      * @property DISABLED_CLASSNAME
 592      * @type String
 593      * @default "disabled"
 594      */
 595     proto.DISABLED_CLASSNAME = 'disabled';
 596
 597     /**
 598      * The class name applied to dynamic tabs while loading.
 599      * @property LOADING_CLASSNAME
 600      * @type String
 601      * @default "disabled"
 602      */
 603     proto.LOADING_CLASSNAME = 'loading';
 604
 605     /**
 606      * Provides a reference to the connection request object when data is
 607      * loaded dynamically.
 608      * @property dataConnection
 609      * @type Object
 610      */
 611     proto.dataConnection = null;
 612
 613     /**
 614      * Object containing success and failure callbacks for loading data.
 615      * @property loadHandler
 616      * @type object
 617      */
 618     proto.loadHandler = null;
 619
 620     proto._loading = false;
 621
 622     /**
 623      * Provides a readable name for the tab.
 624      * @method toString
 625      * @return String
 626      */
 627     proto.toString = function() {
 628         var el = this.get('element');
 629         var id = el.id || el.tagName;
 630         return "Tab " + id;
 631     };
 632
 633     /**
 634      * setAttributeConfigs TabView specific properties.
 635      * @method initAttributes
 636      * @param {Object} attr Hash of initial attributes
 637      */
 638     proto.initAttributes = function(attr) {
 639         attr = attr || {};
 640         Tab.superclass.initAttributes.call(this, attr);
 641
 642         var el = this.get('element');
 643
 644         /**
 645          * The event that triggers the tab's activation.
 646          * @config activationEvent
 647          * @type String
 648          */
 649         this.setAttributeConfig('activationEvent', {
 650             value: attr.activationEvent || 'click'
 651         });
 652
 653         /**
 654          * The element that contains the tab's label.
 655          * @config labelEl
 656          * @type HTMLElement
 657          */
 658         this.setAttributeConfig('labelEl', {
 659             value: attr.labelEl || _getlabelEl.call(this),
 660             method: function(value) {
 661                 var current = this.get('labelEl');
 662
 663                 if (current) {
 664                     if (current == value) {
 665                         return false; // already set
 666                     }
 667
 668                     this.replaceChild(value, current);
 669                 } else if (el.firstChild) { // ensure label is firstChild by default
 670                     this.insertBefore(value, el.firstChild);
 671                 } else {
 672                     this.appendChild(value);
 673                 }
 674             }
 675         });
 676
 677         /**
 678          * The tab's label text (or innerHTML).
 679          * @config label
 680          * @type String
 681          */
 682         this.setAttributeConfig('label', {
 683             value: attr.label || _getLabel.call(this),
 684             method: function(value) {
 685                 var labelEl = this.get('labelEl');
 686                 if (!labelEl) { // create if needed
 687                     this.set('labelEl', _createlabelEl.call(this));
 688                 }
 689
 690                 _setLabel.call(this, value);
 691             }
 692         });
 693
 694         /**
 695          * The HTMLElement that contains the tab's content.
 696          * @config contentEl
 697          * @type HTMLElement
 698          */
 699         this.setAttributeConfig('contentEl', {
 700             value: attr.contentEl || document.createElement('div'),
 701             method: function(value) {
 702                 var current = this.get('contentEl');
 703
 704                 if (current) {
 705                     if (current == value) {
 706                         return false; // already set
 707                     }
 708                     this.replaceChild(value, current);
 709                 }
 710             }
 711         });
 712
 713         /**
 714          * The tab's content.
 715          * @config content
 716          * @type String
 717          */
 718         this.setAttributeConfig('content', {
 719             value: attr.content,
 720             method: function(value) {
 721                 this.get('contentEl').innerHTML = value;
 722             }
 723         });
 724
 725         var _dataLoaded = false;
 726
 727         /**
 728          * The tab's data source, used for loading content dynamically.
 729          * @config dataSrc
 730          * @type String
 731          */
 732         this.setAttributeConfig('dataSrc', {
 733             value: attr.dataSrc
 734         });
 735
 736         /**
 737          * Whether or not content should be reloaded for every view.
 738          * @config cacheData
 739          * @type Boolean
 740          * @default false
 741          */
 742         this.setAttributeConfig('cacheData', {
 743             value: attr.cacheData || false,
 744             validator: YAHOO.lang.isBoolean
 745         });
 746
 747         /**
 748          * The method to use for the data request.
 749          * @config loadMethod
 750          * @type String
 751          * @default "GET"
 752          */
 753         this.setAttributeConfig('loadMethod', {
 754             value: attr.loadMethod || 'GET',
 755             validator: YAHOO.lang.isString
 756         });
 757
 758         /**
 759          * Whether or not any data has been loaded from the server.
 760          * @config dataLoaded
 761          * @type Boolean
 762          */
 763         this.setAttributeConfig('dataLoaded', {
 764             value: false,
 765             validator: YAHOO.lang.isBoolean,
 766             writeOnce: true
 767         });
 768
 769         /**
 770          * Number if milliseconds before aborting and calling failure handler.
 771          * @config dataTimeout
 772          * @type Number
 773          * @default null
 774          */
 775         this.setAttributeConfig('dataTimeout', {
 776             value: attr.dataTimeout || null,
 777             validator: YAHOO.lang.isNumber
 778         });
 779
 780         /**
 781          * Whether or not the tab is currently active.
 782          * If a dataSrc is set for the tab, the content will be loaded from
 783          * the given source.
 784          * @config active
 785          * @type Boolean
 786          */
 787         this.setAttributeConfig('active', {
 788             value: attr.active || this.hasClass(this.ACTIVE_CLASSNAME),
 789             method: function(value) {
 790                 if (value === true) {
 791                     this.addClass(this.ACTIVE_CLASSNAME);
 792                     this.set('title', 'active');
 793                 } else {
 794                     this.removeClass(this.ACTIVE_CLASSNAME);
 795                     this.set('title', '');
 796                 }
 797             },
 798             validator: function(value) {
 799                 return YAHOO.lang.isBoolean(value) && !this.get('disabled') ;
 800             }
 801         });
 802
 803         /**
 804          * Whether or not the tab is disabled.
 805          * @config disabled
 806          * @type Boolean
 807          */
 808         this.setAttributeConfig('disabled', {
 809             value: attr.disabled || this.hasClass(this.DISABLED_CLASSNAME),
 810             method: function(value) {
 811                 if (value === true) {
 812                     Dom.addClass(this.get('element'), this.DISABLED_CLASSNAME);
 813                 } else {
 814                     Dom.removeClass(this.get('element'), this.DISABLED_CLASSNAME);
 815                 }
 816             },
 817             validator: YAHOO.lang.isBoolean
 818         });
 819
 820         /**
 821          * The href of the tab's anchor element.
 822          * @config href
 823          * @type String
 824          * @default '#'
 825          */
 826         this.setAttributeConfig('href', {
 827             value: attr.href ||
 828                     this.getElementsByTagName('a')[0].getAttribute('href', 2) || '#',
 829             method: function(value) {
 830                 this.getElementsByTagName('a')[0].href = value;
 831             },
 832             validator: YAHOO.lang.isString
 833         });
 834
 835         /**
 836          * The Whether or not the tab's content is visible.
 837          * @config contentVisible
 838          * @type Boolean
 839          * @default false
 840          */
 841         this.setAttributeConfig('contentVisible', {
 842             value: attr.contentVisible,
 843             method: function(value) {
 844                 if (value) {
 845                     this.get('contentEl').style.display = 'block';
 846
 847                     if ( this.get('dataSrc') ) {
 848                      // load dynamic content unless already loading or loaded and caching
 849                         if ( !this._loading && !(this.get('dataLoaded') && this.get('cacheData')) ) {
 850                             _dataConnect.call(this);
 851                         }
 852                     }
 853                 } else {
 854                     this.get('contentEl').style.display = 'none';
 855                 }
 856             },
 857             validator: YAHOO.lang.isBoolean
 858         });
 859     };
 860
 861     var _createTabElement = function(attr) {
 862         var el = document.createElement('li');
 863         var a = document.createElement('a');
 864
 865         a.href = attr.href || '#';
 866
 867         el.appendChild(a);
 868
 869         var label = attr.label || null;
 870         var labelEl = attr.labelEl || null;
 871
 872         if (labelEl) { // user supplied labelEl
 873             if (!label) { // user supplied label
 874                 label = _getLabel.call(this, labelEl);
 875             }
 876         } else {
 877             labelEl = _createlabelEl.call(this);
 878         }
 879
 880         a.appendChild(labelEl);
 881
 882         return el;
 883     };
 884
 885     var _getlabelEl = function() {
 886         return this.getElementsByTagName(this.LABEL_TAGNAME)[0];
 887     };
 888
 889     var _createlabelEl = function() {
 890         var el = document.createElement(this.LABEL_TAGNAME);
 891         return el;
 892     };
 893
 894     var _setLabel = function(label) {
 895         var el = this.get('labelEl');
 896         el.innerHTML = label;
 897     };
 898
 899     var _getLabel = function() {
 900         var label,
 901             el = this.get('labelEl');
 902
 903             if (!el) {
 904                 return undefined;
 905             }
 906
 907         return el.innerHTML;
 908     };
 909
 910     var _dataConnect = function() {
 911         if (!YAHOO.util.Connect) {
 912             return false;
 913         }
 914
 915         Dom.addClass(this.get('contentEl').parentNode, this.LOADING_CLASSNAME);
 916         this._loading = true;
 917         this.dataConnection = YAHOO.util.Connect.asyncRequest(
 918             this.get('loadMethod'),
 919             this.get('dataSrc'),
 920             {
 921                 success: function(o) {
 922                     this.loadHandler.success.call(this, o);
 923                     this.set('dataLoaded', true);
 924                     this.dataConnection = null;
 925                     Dom.removeClass(this.get('contentEl').parentNode,
 926                             this.LOADING_CLASSNAME);
 927                     this._loading = false;
 928                 },
 929                 failure: function(o) {
 930                     this.loadHandler.failure.call(this, o);
 931                     this.dataConnection = null;
 932                     Dom.removeClass(this.get('contentEl').parentNode,
 933                             this.LOADING_CLASSNAME);
 934                     this._loading = false;
 935                 },
 936                 scope: this,
 937                 timeout: this.get('dataTimeout')
 938             }
 939         );
 940     };
 941
 942     YAHOO.widget.Tab = Tab;
 943
 944     /**
 945      * Fires before the active state is changed.
 946      * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
 947      * <p>If handler returns false, the change will be cancelled, and the value will not
 948      * be set.</p>
 949      * <p><strong>Event fields:</strong><br>
 950      * <code>&lt;String&gt; type</code> beforeActiveChange<br>
 951      * <code>&lt;Boolean&gt;
 952      * prevValue</code> the current value<br>
 953      * <code>&lt;Boolean&gt;
 954      * newValue</code> the new value</p>
 955      * <p><strong>Usage:</strong><br>
 956      * <code>var handler = function(e) {var previous = e.prevValue};<br>
 957      * myTabs.addListener('beforeActiveChange', handler);</code></p>
 958      * @event beforeActiveChange
 959      */
 960
 961     /**
 962      * Fires after the active state is changed.
 963      * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
 964      * <p><strong>Event fields:</strong><br>
 965      * <code>&lt;String&gt; type</code> activeChange<br>
 966      * <code>&lt;Boolean&gt;
 967      * prevValue</code> the previous value<br>
 968      * <code>&lt;Boolean&gt;
 969      * newValue</code> the updated value</p>
 970      * <p><strong>Usage:</strong><br>
 971      * <code>var handler = function(e) {var previous = e.prevValue};<br>
 972      * myTabs.addListener('activeChange', handler);</code></p>
 973      * @event activeChange
 974      */
 975
 976     /**
 977      * Fires before the tab label is changed.
 978      * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
 979      * <p>If handler returns false, the change will be cancelled, and the value will not
 980      * be set.</p>
 981      * <p><strong>Event fields:</strong><br>
 982      * <code>&lt;String&gt; type</code> beforeLabelChange<br>
 983      * <code>&lt;String&gt;
 984      * prevValue</code> the current value<br>
 985      * <code>&lt;String&gt;
 986      * newValue</code> the new value</p>
 987      * <p><strong>Usage:</strong><br>
 988      * <code>var handler = function(e) {var previous = e.prevValue};<br>
 989      * myTabs.addListener('beforeLabelChange', handler);</code></p>
 990      * @event beforeLabelChange
 991      */
 992
 993     /**
 994      * Fires after the tab label is changed.
 995      * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
 996      * <p><strong>Event fields:</strong><br>
 997      * <code>&lt;String&gt; type</code> labelChange<br>
 998      * <code>&lt;String&gt;
 999      * prevValue</code> the previous value<br>
1000      * <code>&lt;String&gt;
1001      * newValue</code> the updated value</p>
1002      * <p><strong>Usage:</strong><br>
1003      * <code>var handler = function(e) {var previous = e.prevValue};<br>
1004      * myTabs.addListener('labelChange', handler);</code></p>
1005      * @event labelChange
1006      */
1007
1008     /**
1009      * Fires before the tab content is changed.
1010      * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
1011      * <p>If handler returns false, the change will be cancelled, and the value will not
1012      * be set.</p>
1013      * <p><strong>Event fields:</strong><br>
1014      * <code>&lt;String&gt; type</code> beforeContentChange<br>
1015      * <code>&lt;String&gt;
1016      * prevValue</code> the current value<br>
1017      * <code>&lt;String&gt;
1018      * newValue</code> the new value</p>
1019      * <p><strong>Usage:</strong><br>
1020      * <code>var handler = function(e) {var previous = e.prevValue};<br>
1021      * myTabs.addListener('beforeContentChange', handler);</code></p>
1022      * @event beforeContentChange
1023      */
1024
1025     /**
1026      * Fires after the tab content is changed.
1027      * <p>See: <a href="YAHOO.util.Element.html#addListener">Element.addListener</a></p>
1028      * <p><strong>Event fields:</strong><br>
1029      * <code>&lt;String&gt; type</code> contentChange<br>
1030      * <code>&lt;String&gt;
1031      * prevValue</code> the previous value<br>
1032      * <code>&lt;Boolean&gt;
1033      * newValue</code> the updated value</p>
1034      * <p><strong>Usage:</strong><br>
1035      * <code>var handler = function(e) {var previous = e.prevValue};<br>
1036      * myTabs.addListener('contentChange', handler);</code></p>
1037      * @event contentChange
1038      */
1039 })();
1040
1041 YAHOO.register("tabview", YAHOO.widget.TabView, {version: "2.3.0", build: "442"});