1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
if(!dojo._hasResource["dijit.layout.TabContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.layout.TabContainer"] = true;
dojo.provide("dijit.layout.TabContainer");
dojo.require("dijit.layout.StackContainer");
dojo.require("dijit._Templated");
dojo.declare("dijit.layout.TabContainer",
[dijit.layout.StackContainer, dijit._Templated],
{
// summary:
// A Container with Title Tabs, each one pointing at a pane in the container.
// description:
// A TabContainer is a container that has multiple panes, but shows only
// one pane at a time. There are a set of tabs corresponding to each pane,
// where each tab has the title (aka title) of the pane, and optionally a close button.
//
// Publishes topics [widgetId]-addChild, [widgetId]-removeChild, and [widgetId]-selectChild
// (where [widgetId] is the id of the TabContainer itself.
//
// tabPosition: String
// Defines where tabs go relative to tab content.
// "top", "bottom", "left-h", "right-h"
tabPosition: "top",
templateString: null, // override setting in StackContainer
templateString:"<div class=\"dijitTabContainer\">\n\t<div dojoAttachPoint=\"tablistNode\"></div>\n\t<div class=\"dijitTabPaneWrapper\" dojoAttachPoint=\"containerNode\"></div>\n</div>\n",
// _controllerWidget: String
// An optional parameter to overrider the default TabContainer controller used.
_controllerWidget: "dijit.layout.TabController",
postCreate: function(){
this.inherited(arguments);
// create the tab list that will have a tab (a.k.a. tab button) for each tab panel
var TabController = dojo.getObject(this._controllerWidget);
this.tablist = new TabController({
id: this.id + "_tablist",
tabPosition: this.tabPosition,
doLayout: this.doLayout,
containerId: this.id
}, this.tablistNode);
},
_setupChild: function(/* Widget */tab){
dojo.addClass(tab.domNode, "dijitTabPane");
this.inherited(arguments);
return tab; // Widget
},
startup: function(){
if(this._started){ return; }
// wire up the tablist and its tabs
this.tablist.startup();
this.inherited(arguments);
if(dojo.isSafari){
// sometimes safari 3.0.3 miscalculates the height of the tab labels, see #4058
setTimeout(dojo.hitch(this, "layout"), 0);
}
if(dojo.isIE && !this.isLeftToRight() && this.tabPosition == "right-h" &&
this.tablist && this.tablist.pane2button){
//need rectify non-closable tab in IE, only for "right-h" mode
for(var pane in this.tablist.pane2button){
var tabButton = this.tablist.pane2button[pane];
if(!tabButton.closeButton){ continue; }
tabButtonStyle = tabButton.closeButtonNode.style;
tabButtonStyle.position ="absolute";
if(dojo.isIE < 7){
tabButtonStyle.left = tabButton.domNode.offsetWidth + "px";
}else{
tabButtonStyle.padding = "0px";
}
}
}
},
layout: function(){
// Summary: Configure the content pane to take up all the space except for where the tabs are
if(!this.doLayout){ return; }
// position and size the titles and the container node
var titleAlign = this.tabPosition.replace(/-h/,"");
var children = [
{ domNode: this.tablist.domNode, layoutAlign: titleAlign },
{ domNode: this.containerNode, layoutAlign: "client" }
];
dijit.layout.layoutChildren(this.domNode, this._contentBox, children);
// Compute size to make each of my children.
// children[1] is the margin-box size of this.containerNode, set by layoutChildren() call above
this._containerContentBox = dijit.layout.marginBox2contentBox(this.containerNode, children[1]);
if(this.selectedChildWidget){
this._showChild(this.selectedChildWidget);
if(this.doLayout && this.selectedChildWidget.resize){
this.selectedChildWidget.resize(this._containerContentBox);
}
}
},
destroy: function(){
if(this.tablist){
this.tablist.destroy();
}
this.inherited(arguments);
}
});
//TODO: make private?
dojo.declare("dijit.layout.TabController",
dijit.layout.StackController,
{
// summary:
// Set of tabs (the things with titles and a close button, that you click to show a tab panel).
// description:
// Lets the user select the currently shown pane in a TabContainer or StackContainer.
// TabController also monitors the TabContainer, and whenever a pane is
// added or deleted updates itself accordingly.
templateString: "<div wairole='tablist' dojoAttachEvent='onkeypress:onkeypress'></div>",
// tabPosition: String
// Defines where tabs go relative to the content.
// "top", "bottom", "left-h", "right-h"
tabPosition: "top",
// doLayout: Boolean
// TODOC: deprecate doLayout? not sure.
doLayout: true,
// buttonWidget: String
// The name of the tab widget to create to correspond to each page
buttonWidget: "dijit.layout._TabButton",
postMixInProperties: function(){
this["class"] = "dijitTabLabels-" + this.tabPosition + (this.doLayout ? "" : " dijitTabNoLayout");
this.inherited(arguments);
},
//TODO: can this be accomplished in CSS?
_rectifyRtlTabList: function(){
//Summary: Rectify the length of all tabs in rtl, otherwise the tab lengths are different in IE
if(0 >= this.tabPosition.indexOf('-h')){ return; }
if(!this.pane2button){ return; }
var maxLen = 0;
for(var pane in this.pane2button){
maxLen = Math.max(maxLen, dojo.marginBox(this.pane2button[pane].innerDiv).w);
}
//unify the length of all the tabs
for(pane in this.pane2button){
this.pane2button[pane].innerDiv.style.width = maxLen + 'px';
}
}
});
dojo.declare("dijit.layout._TabButton",
dijit.layout._StackButton,
{
// summary:
// A tab (the thing you click to select a pane).
// description:
// Contains the title of the pane, and optionally a close-button to destroy the pane.
// This is an internal widget and should not be instantiated directly.
baseClass: "dijitTab",
templateString:"<div waiRole=\"presentation\" dojoAttachEvent='onclick:onClick,onmouseenter:_onMouse,onmouseleave:_onMouse'>\n <div waiRole=\"presentation\" class='dijitTabInnerDiv' dojoAttachPoint='innerDiv'>\n <div waiRole=\"presentation\" class='dijitTabContent' dojoAttachPoint='tabContent'>\n\t <span dojoAttachPoint='containerNode,focusNode' class='tabLabel'>${!label}</span>\n\t <span dojoAttachPoint='closeButtonNode' class='closeImage' dojoAttachEvent='onmouseenter:_onMouse, onmouseleave:_onMouse, onclick:onClickCloseButton' stateModifier='CloseButton'>\n\t <span dojoAttachPoint='closeText' class='closeText'>x</span>\n\t </span>\n </div>\n </div>\n</div>\n",
postCreate: function(){
if(this.closeButton){
dojo.addClass(this.innerDiv, "dijitClosable");
}else{
this.closeButtonNode.style.display="none";
}
this.inherited(arguments);
dojo.setSelectable(this.containerNode, false);
}
});
}
|
