2
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.net/yui/license.txt
10
* The tabview module provides a widget for managing content bound to tabs.
12
* @requires yahoo, dom, event, element
19
document = window.document,
23
ACTIVE_INDEX = 'activeIndex',
24
ACTIVE_TAB = 'activeTab',
25
CONTENT_EL = 'contentEl',
29
* A widget to control tabbed views.
30
* @namespace YAHOO.widget
32
* @extends YAHOO.util.Element
34
* @param {HTMLElement | String | Object} el(optional) The html
35
* element that represents the TabView, or the attribute object to use.
36
* An element will be created if none provided.
37
* @param {Object} attr (optional) A key map of the tabView's
38
* initial attributes. Ignored if first arg is attributes object.
40
TabView = function(el, attr) {
42
if (arguments.length == 1 && !YAHOO.lang.isString(el) && !el.nodeName) {
43
attr = el; // treat first arg as attr object
44
el = attr.element || null;
47
if (!el && !attr.element) { // create if we dont have one
48
el = this._createTabViewElement(attr);
50
TabView.superclass.constructor.call(this, el, attr);
53
YAHOO.extend(TabView, Y.Element, {
55
* The className to add when building from scratch.
59
CLASSNAME: 'yui-navset',
62
* The className of the HTMLElement containing the TabView's tab elements
63
* to look for when building from existing markup, or to add when building
65
* All childNodes of the tab container are treated as Tabs when building
66
* from existing markup.
67
* @property TAB_PARENT_CLASSNAME
70
TAB_PARENT_CLASSNAME: 'yui-nav',
73
* The className of the HTMLElement containing the TabView's label elements
74
* to look for when building from existing markup, or to add when building
76
* All childNodes of the content container are treated as content elements when
77
* building from existing markup.
78
* @property CONTENT_PARENT_CLASSNAME
79
* @default "nav-content"
81
CONTENT_PARENT_CLASSNAME: 'yui-content',
87
* Adds a Tab to the TabView instance.
88
* If no index is specified, the tab is added to the end of the tab list.
90
* @param {YAHOO.widget.Tab} tab A Tab instance to add.
91
* @param {Integer} index The position to add the tab.
94
addTab: function(tab, index) {
95
var tabs = this.get('tabs'),
96
before = this.getTab(index),
97
tabParent = this._tabParent,
98
contentParent = this._contentParent,
99
tabElement = tab.get(ELEMENT),
100
contentEl = tab.get(CONTENT_EL);
102
if (!tabs) { // not ready yet
103
this._queue[this._queue.length] = ['addTab', arguments];
107
index = (index === undefined) ? tabs.length : index;
110
tabParent.insertBefore(tabElement, before.get(ELEMENT));
112
tabParent.appendChild(tabElement);
115
if ( contentEl && !Dom.isAncestor(contentParent, contentEl) ) {
116
contentParent.appendChild(contentEl);
119
if ( !tab.get(ACTIVE) ) {
120
tab.set('contentVisible', false, true); /* hide if not active */
122
this.set(ACTIVE_TAB, tab, true);
126
this._initTabEvents(tab);
127
tabs.splice(index, 0, tab);
130
_initTabEvents: function(tab) {
131
tab.addListener( tab.get('activationEvent'), tab._onActivate, this, tab);
133
tab.addListener('activationEventChange', function(e) {
134
if (e.prevValue != e.newValue) {
135
tab.removeListener(e.prevValue, tab._onActivate);
136
tab.addListener(e.newValue, tab._onActivate, this, tab);
142
* Routes childNode events.
143
* @method DOMEventHandler
144
* @param {event} e The Dom event that is being handled.
147
DOMEventHandler: function(e) {
148
var target = Event.getTarget(e),
149
tabParent = this._tabParent,
150
tabs = this.get('tabs'),
156
if (Dom.isAncestor(tabParent, target) ) {
157
for (var i = 0, len = tabs.length; i < len; i++) {
158
tabEl = tabs[i].get(ELEMENT);
159
contentEl = tabs[i].get(CONTENT_EL);
161
if ( target == tabEl || Dom.isAncestor(tabEl, target) ) {
168
tab.fireEvent(e.type, e);
174
* Returns the Tab instance at the specified index.
176
* @param {Integer} index The position of the Tab.
177
* @return YAHOO.widget.Tab
179
getTab: function(index) {
180
return this.get('tabs')[index];
184
* Returns the index of given tab.
185
* @method getTabIndex
186
* @param {YAHOO.widget.Tab} tab The tab whose index will be returned.
189
getTabIndex: function(tab) {
191
tabs = this.get('tabs');
192
for (var i = 0, len = tabs.length; i < len; ++i) {
193
if (tab == tabs[i]) {
203
* Removes the specified Tab from the TabView.
205
* @param {YAHOO.widget.Tab} item The Tab instance to be removed.
208
removeTab: function(tab) {
209
var tabCount = this.get('tabs').length,
210
index = this.getTabIndex(tab);
212
if ( tab === this.get(ACTIVE_TAB) ) {
213
if (tabCount > 1) { // select another tab
214
if (index + 1 === tabCount) { // if last, activate previous
215
this.set(ACTIVE_INDEX, index - 1);
216
} else { // activate next tab
217
this.set(ACTIVE_INDEX, index + 1);
219
} else { // no more tabs
220
this.set(ACTIVE_TAB, null);
224
this._tabParent.removeChild( tab.get(ELEMENT) );
225
this._contentParent.removeChild( tab.get(CONTENT_EL) );
226
this._configs.tabs.value.splice(index, 1);
228
tab.fireEvent('remove', { type: 'remove', tabview: this });
232
* Provides a readable name for the TabView instance.
236
toString: function() {
237
var name = this.get('id') || this.get('tagName');
238
return "TabView " + name;
242
* The transiton to use when switching between tabs.
243
* @method contentTransition
245
contentTransition: function(newTab, oldTab) {
247
newTab.set('contentVisible', true);
250
oldTab.set('contentVisible', false);
255
* setAttributeConfigs TabView specific properties.
256
* @method initAttributes
257
* @param {Object} attr Hash of initial attributes
259
initAttributes: function(attr) {
260
TabView.superclass.initAttributes.call(this, attr);
262
if (!attr.orientation) {
263
attr.orientation = 'top';
266
var el = this.get(ELEMENT);
268
if (!Dom.hasClass(el, this.CLASSNAME)) {
269
Dom.addClass(el, this.CLASSNAME);
273
* The Tabs belonging to the TabView instance.
277
this.setAttributeConfig('tabs', {
283
* The container of the tabView's label elements.
284
* @property _tabParent
289
this.getElementsByClassName(this.TAB_PARENT_CLASSNAME,
290
'ul' )[0] || this._createTabParent();
293
* The container of the tabView's content elements.
294
* @property _contentParent
298
this._contentParent =
299
this.getElementsByClassName(this.CONTENT_PARENT_CLASSNAME,
300
'div')[0] || this._createContentParent();
303
* How the Tabs should be oriented relative to the TabView.
304
* @attribute orientation
308
this.setAttributeConfig('orientation', {
309
value: attr.orientation,
310
method: function(value) {
311
var current = this.get('orientation');
312
this.addClass('yui-navset-' + value);
314
if (current != value) {
315
this.removeClass('yui-navset-' + current);
318
if (value === 'bottom') {
319
this.appendChild(this._tabParent);
325
* The index of the tab currently active.
326
* @attribute activeIndex
329
this.setAttributeConfig(ACTIVE_INDEX, {
330
value: attr.activeIndex,
331
method: function(value) {
333
validator: function(value) {
335
if (value && this.getTab(value).get('disabled')) { // cannot activate if disabled
343
* The tab currently active.
344
* @attribute activeTab
345
* @type YAHOO.widget.Tab
347
this.setAttributeConfig(ACTIVE_TAB, {
348
value: attr.activeTab,
349
method: function(tab) {
350
var activeTab = this.get(ACTIVE_TAB);
353
tab.set(ACTIVE, true);
356
if (activeTab && activeTab !== tab) {
357
activeTab.set(ACTIVE, false);
360
if (activeTab && tab !== activeTab) { // no transition if only 1
361
this.contentTransition(tab, activeTab);
363
tab.set('contentVisible', true);
366
validator: function(value) {
368
if (value && value.get('disabled')) { // cannot activate if disabled
375
this.on('activeTabChange', this._onActiveTabChange);
376
this.on('activeIndexChange', this._onActiveIndexChange);
378
if ( this._tabParent ) {
382
// Due to delegation we add all DOM_EVENTS to the TabView container
383
// but IE will leak when unsupported events are added, so remove these
384
this.DOM_EVENTS.submit = false;
385
this.DOM_EVENTS.focus = false;
386
this.DOM_EVENTS.blur = false;
388
for (var type in this.DOM_EVENTS) {
389
if ( YAHOO.lang.hasOwnProperty(this.DOM_EVENTS, type) ) {
390
this.addListener.call(this, type, this.DOMEventHandler);
396
* Removes selected state from the given tab if it is the activeTab
397
* @method deselectTab
398
* @param {Int} index The tab index to deselect
400
deselectTab: function(index) {
401
if (this.getTab(index) === this.get('activeTab')) {
402
this.set('activeTab', null);
407
* Makes the tab at the given index the active tab
409
* @param {Int} index The tab index to be made active
411
selectTab: function(index) {
412
this.set('activeTab', this.getTab(index));
415
_onActiveTabChange: function(e) {
416
var activeIndex = this.get(ACTIVE_INDEX),
417
newIndex = this.getTabIndex(e.newValue);
419
if (activeIndex !== newIndex) {
420
if (!(this.set(ACTIVE_INDEX, newIndex)) ) { // NOTE: setting
421
// revert if activeIndex update fails (cancelled via beforeChange)
422
this.set(ACTIVE_TAB, e.prevValue);
427
_onActiveIndexChange: function(e) {
428
// no set if called from ActiveTabChange event
429
if (e.newValue !== this.getTabIndex(this.get(ACTIVE_TAB))) {
430
if (!(this.set(ACTIVE_TAB, this.getTab(e.newValue))) ) { // NOTE: setting
431
// revert if activeTab update fails (cancelled via beforeChange)
432
this.set(ACTIVE_INDEX, e.prevValue);
438
* Creates Tab instances from a collection of HTMLElements.
443
_initTabs: function() {
444
var tabs = Dom.getChildren(this._tabParent),
445
contentElements = Dom.getChildren(this._contentParent),
446
activeIndex = this.get(ACTIVE_INDEX),
451
for (var i = 0, len = tabs.length; i < len; ++i) {
454
if (contentElements[i]) {
455
attr.contentEl = contentElements[i];
458
tab = new YAHOO.widget.Tab(tabs[i], attr);
461
if (tab.hasClass(tab.ACTIVE_CLASSNAME) ) {
466
this.set(ACTIVE_TAB, this.getTab(activeIndex));
468
this._configs.activeTab.value = active; // dont invoke method
469
this._configs.activeIndex.value = this.getTabIndex(active);
473
_createTabViewElement: function(attr) {
474
var el = document.createElement('div');
476
if ( this.CLASSNAME ) {
477
el.className = this.CLASSNAME;
483
_createTabParent: function(attr) {
484
var el = document.createElement('ul');
486
if ( this.TAB_PARENT_CLASSNAME ) {
487
el.className = this.TAB_PARENT_CLASSNAME;
490
this.get(ELEMENT).appendChild(el);
495
_createContentParent: function(attr) {
496
var el = document.createElement('div');
498
if ( this.CONTENT_PARENT_CLASSNAME ) {
499
el.className = this.CONTENT_PARENT_CLASSNAME;
502
this.get(ELEMENT).appendChild(el);
509
YAHOO.widget.TabView = TabView;
519
ACTIVE_TAB = 'activeTab',
521
LABEL_EL = 'labelEl',
523
CONTENT_EL = 'contentEl',
525
CACHE_DATA = 'cacheData',
526
DATA_SRC = 'dataSrc',
527
DATA_LOADED = 'dataLoaded',
528
DATA_TIMEOUT = 'dataTimeout',
529
LOAD_METHOD = 'loadMethod',
530
POST_DATA = 'postData',
531
DISABLED = 'disabled',
534
* A representation of a Tab's label and content.
535
* @namespace YAHOO.widget
537
* @extends YAHOO.util.Element
539
* @param element {HTMLElement | String} (optional) The html element that
540
* represents the TabView. An element will be created if none provided.
541
* @param {Object} properties A key map of initial properties
543
Tab = function(el, attr) {
545
if (arguments.length == 1 && !Lang.isString(el) && !el.nodeName) {
550
if (!el && !attr.element) {
551
el = this._createTabElement(attr);
555
success: function(o) {
556
this.set(CONTENT, o.responseText);
558
failure: function(o) {
562
Tab.superclass.constructor.call(this, el, attr);
564
this.DOM_EVENTS = {}; // delegating to tabView
567
YAHOO.extend(Tab, YAHOO.util.Element, {
569
* The default tag name for a Tab's inner element.
570
* @property LABEL_INNER_TAGNAME
577
* The class name applied to active tabs.
578
* @property ACTIVE_CLASSNAME
580
* @default "selected"
582
ACTIVE_CLASSNAME: 'selected',
585
* The class name applied to active tabs.
586
* @property ACTIVE_CLASSNAME
588
* @default "selected"
590
HIDDEN_CLASSNAME: 'yui-hidden',
593
* The title applied to active tabs.
594
* @property ACTIVE_TITLE
598
ACTIVE_TITLE: 'active',
601
* The class name applied to disabled tabs.
602
* @property DISABLED_CLASSNAME
604
* @default "disabled"
606
DISABLED_CLASSNAME: DISABLED,
609
* The class name applied to dynamic tabs while loading.
610
* @property LOADING_CLASSNAME
612
* @default "disabled"
614
LOADING_CLASSNAME: 'loading',
617
* Provides a reference to the connection request object when data is
618
* loaded dynamically.
619
* @property dataConnection
622
dataConnection: null,
625
* Object containing success and failure callbacks for loading data.
626
* @property loadHandler
634
* Provides a readable name for the tab.
638
toString: function() {
639
var el = this.get(ELEMENT),
640
id = el.id || el.tagName;
645
* setAttributeConfigs TabView specific properties.
646
* @method initAttributes
647
* @param {Object} attr Hash of initial attributes
649
initAttributes: function(attr) {
651
Tab.superclass.initAttributes.call(this, attr);
654
* The event that triggers the tab's activation.
655
* @attribute activationEvent
658
this.setAttributeConfig('activationEvent', {
659
value: attr.activationEvent || 'click'
663
* The element that contains the tab's label.
667
this.setAttributeConfig(LABEL_EL, {
668
value: attr[LABEL_EL] || this._getLabelEl(),
669
method: function(value) {
670
value = Dom.get(value);
671
var current = this.get(LABEL_EL);
674
if (current == value) {
675
return false; // already set
678
current.parentNode.replaceChild(value, current);
679
this.set(LABEL, value.innerHTML);
685
* The tab's label text (or innerHTML).
689
this.setAttributeConfig(LABEL, {
690
value: attr.label || this._getLabel(),
691
method: function(value) {
692
var labelEl = this.get(LABEL_EL);
693
if (!labelEl) { // create if needed
694
this.set(LABEL_EL, this._createLabelEl());
697
labelEl.innerHTML = value;
702
* The HTMLElement that contains the tab's content.
703
* @attribute contentEl
706
this.setAttributeConfig(CONTENT_EL, {
707
value: attr[CONTENT_EL] || document.createElement('div'),
708
method: function(value) {
709
value = Dom.get(value);
710
var current = this.get(CONTENT_EL);
713
if (current === value) {
714
return false; // already set
716
if (!this.get('selected')) {
717
Dom.addClass(value, 'yui-hidden');
719
current.parentNode.replaceChild(value, current);
720
this.set(CONTENT, value.innerHTML);
730
this.setAttributeConfig(CONTENT, {
731
value: attr[CONTENT],
732
method: function(value) {
733
this.get(CONTENT_EL).innerHTML = value;
738
* The tab's data source, used for loading content dynamically.
742
this.setAttributeConfig(DATA_SRC, {
747
* Whether or not content should be reloaded for every view.
748
* @attribute cacheData
752
this.setAttributeConfig(CACHE_DATA, {
753
value: attr.cacheData || false,
754
validator: Lang.isBoolean
758
* The method to use for the data request.
759
* @attribute loadMethod
763
this.setAttributeConfig(LOAD_METHOD, {
764
value: attr.loadMethod || 'GET',
765
validator: Lang.isString
769
* Whether or not any data has been loaded from the server.
770
* @attribute dataLoaded
773
this.setAttributeConfig(DATA_LOADED, {
775
validator: Lang.isBoolean,
780
* Number if milliseconds before aborting and calling failure handler.
781
* @attribute dataTimeout
785
this.setAttributeConfig(DATA_TIMEOUT, {
786
value: attr.dataTimeout || null,
787
validator: Lang.isNumber
791
* Arguments to pass when POST method is used
792
* @attribute postData
795
this.setAttributeConfig(POST_DATA, {
796
value: attr.postData || null
800
* Whether or not the tab is currently active.
801
* If a dataSrc is set for the tab, the content will be loaded from
806
this.setAttributeConfig('active', {
807
value: attr.active || this.hasClass(this.ACTIVE_CLASSNAME),
808
method: function(value) {
809
if (value === true) {
810
this.addClass(this.ACTIVE_CLASSNAME);
811
this.set('title', this.ACTIVE_TITLE);
813
this.removeClass(this.ACTIVE_CLASSNAME);
814
this.set('title', '');
817
validator: function(value) {
818
return Lang.isBoolean(value) && !this.get(DISABLED) ;
823
* Whether or not the tab is disabled.
824
* @attribute disabled
827
this.setAttributeConfig(DISABLED, {
828
value: attr.disabled || this.hasClass(this.DISABLED_CLASSNAME),
829
method: function(value) {
830
if (value === true) {
831
Dom.addClass(this.get(ELEMENT), this.DISABLED_CLASSNAME);
833
Dom.removeClass(this.get(ELEMENT), this.DISABLED_CLASSNAME);
836
validator: Lang.isBoolean
840
* The href of the tab's anchor element.
845
this.setAttributeConfig('href', {
847
this.getElementsByTagName('a')[0].getAttribute('href', 2) || '#',
848
method: function(value) {
849
this.getElementsByTagName('a')[0].href = value;
851
validator: Lang.isString
855
* The Whether or not the tab's content is visible.
856
* @attribute contentVisible
860
this.setAttributeConfig('contentVisible', {
861
value: attr.contentVisible,
862
method: function(value) {
864
Dom.removeClass(this.get(CONTENT_EL), this.HIDDEN_CLASSNAME);
866
if ( this.get(DATA_SRC) ) {
867
// load dynamic content unless already loading or loaded and caching
868
if ( !this._loading && !(this.get(DATA_LOADED) && this.get(CACHE_DATA)) ) {
873
Dom.addClass(this.get(CONTENT_EL), this.HIDDEN_CLASSNAME);
876
validator: Lang.isBoolean
880
_dataConnect: function() {
885
Dom.addClass(this.get(CONTENT_EL).parentNode, this.LOADING_CLASSNAME);
886
this._loading = true;
887
this.dataConnection = Y.Connect.asyncRequest(
888
this.get(LOAD_METHOD),
891
success: function(o) {
892
this.loadHandler.success.call(this, o);
893
this.set(DATA_LOADED, true);
894
this.dataConnection = null;
895
Dom.removeClass(this.get(CONTENT_EL).parentNode,
896
this.LOADING_CLASSNAME);
897
this._loading = false;
899
failure: function(o) {
900
this.loadHandler.failure.call(this, o);
901
this.dataConnection = null;
902
Dom.removeClass(this.get(CONTENT_EL).parentNode,
903
this.LOADING_CLASSNAME);
904
this._loading = false;
907
timeout: this.get(DATA_TIMEOUT)
913
_createTabElement: function(attr) {
914
var el = document.createElement('li'),
915
a = document.createElement('a'),
916
label = attr.label || null,
917
labelEl = attr.labelEl || null;
919
a.href = attr.href || '#'; // TODO: Use Dom.setAttribute?
922
if (labelEl) { // user supplied labelEl
923
if (!label) { // user supplied label
924
label = this._getLabel();
927
labelEl = this._createLabelEl();
930
a.appendChild(labelEl);
935
_getLabelEl: function() {
936
return this.getElementsByTagName(this.LABEL_TAGNAME)[0];
939
_createLabelEl: function() {
940
var el = document.createElement(this.LABEL_TAGNAME);
945
_getLabel: function() {
946
var el = this.get(LABEL_EL);
955
_onActivate: function(e, tabview) {
960
Y.Event.preventDefault(e);
961
if (tab === tabview.get(ACTIVE_TAB)) {
962
silent = true; // dont fire activeTabChange if already active
964
tabview.set(ACTIVE_TAB, tab, silent);
970
* Fires when a tab is removed from the tabview
973
* @param {Event} An event object with fields for "type" ("remove")
974
* and "tabview" (the tabview instance it was removed from)
977
YAHOO.widget.Tab = Tab;
980
YAHOO.register("tabview", YAHOO.widget.TabView, {version: "2.7.0", build: "1799"});
added
removed
var/httpd/htdocs/yui/2.7.0/build/tabview/tabview.js
