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
|
//>>built
define("dojox/mobile/TabBar", [
"dojo/_base/array",
"dojo/_base/declare",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/dom-geometry",
"dojo/dom-style",
"dijit/_Contained",
"dijit/_Container",
"dijit/_WidgetBase",
"./Heading",
"./TabBarButton"
], function(array, declare, domClass, domConstruct, domGeometry, domStyle, Contained, Container, WidgetBase, Heading, TabBarButton){
/*=====
var Contained = dijit._Contained;
var Container = dijit._Container;
var WidgetBase = dijit._WidgetBase;
=====*/
// module:
// dojox/mobile/TabBar
// summary:
// A bar widget that has buttons to control visibility of views.
return declare("dojox.mobile.TabBar", [WidgetBase, Container, Contained],{
// summary:
// A bar widget that has buttons to control visibility of views.
// description:
// TabBar is a container widget that has typically multiple
// TabBarButtons which controls visibility of views. It can be used
// as a tab container.
// iconBase: String
// The default icon path for child items.
iconBase: "",
// iconPos: String
// The default icon position for child items.
iconPos: "",
// barType: String
// "tabBar"(default) or "segmentedControl".
barType: "tabBar",
// inHeading: Boolean
// A flag that indicates whether this widget is in a Heading
// widget.
inHeading: false,
// tag: String
// A name of html tag to create as domNode.
tag: "UL",
/* internal properties */
_fixedButtonWidth: 76,
_fixedButtonMargin: 17,
_largeScreenWidth: 500,
buildRendering: function(){
this._clsName = this.barType == "segmentedControl" ? "mblTabButton" : "mblTabBarButton";
this.domNode = this.containerNode = this.srcNodeRef || domConstruct.create(this.tag);
this.domNode.className = this.barType == "segmentedControl" ? "mblTabPanelHeader" : "mblTabBar";
},
startup: function(){
if(this._started){ return; }
this.inherited(arguments);
this.resize();
},
resize: function(size){
var i,w;
if(size && size.w){
domGeometry.setMarginBox(this.domNode, size);
w = size.w;
}else{
// Calculation of the bar width varies according to its "position" value.
// When the widget is used as a fixed bar, its position would be "absolute".
w = domStyle.get(this.domNode, "position") === "absolute" ?
domGeometry.getContentBox(this.domNode).w : domGeometry.getMarginBox(this.domNode).w;
}
var bw = this._fixedButtonWidth;
var bm = this._fixedButtonMargin;
var children = this.containerNode.childNodes;
var arr = [];
for(i = 0; i < children.length; i++){
var c = children[i];
if(c.nodeType != 1){ continue; }
if(domClass.contains(c, this._clsName)){
arr.push(c);
}
}
var margin;
if(this.barType == "segmentedControl"){
margin = w;
var totalW = 0; // total width of all the buttons
for(i = 0; i < arr.length; i++){
margin -= domGeometry.getMarginBox(arr[i]).w;
totalW += arr[i].offsetWidth;
}
margin = Math.floor(margin/2);
var parent = this.getParent();
var inHeading = this.inHeading || parent instanceof Heading;
this.containerNode.style.padding = (inHeading ? 0 : 3) + "px 0px 0px " + (inHeading ? 0 : margin) + "px";
if(inHeading){
domStyle.set(this.domNode, {
background: "none",
border: "none",
width: totalW + 2 + "px"
});
}
domClass.add(this.domNode, "mblTabBar" + (inHeading ? "Head" : "Top"));
}else{
margin = Math.floor((w - (bw + bm * 2) * arr.length) / 2);
if(w < this._largeScreenWidth || margin < 0){
// If # of buttons is 4, for example, assign "25%" to each button.
// More precisely, 1%(left margin) + 98%(bar width) + 1%(right margin)
for(i = 0; i < arr.length; i++){
arr[i].style.width = Math.round(98/arr.length) + "%";
arr[i].style.margin = "0px";
}
this.containerNode.style.padding = "0px 0px 0px 1%";
}else{
// Fixed width buttons. Mainly for larger screen such as iPad.
for(i = 0; i < arr.length; i++){
arr[i].style.width = bw + "px";
arr[i].style.margin = "0 " + bm + "px";
}
if(arr.length > 0){
arr[0].style.marginLeft = margin + bm + "px";
}
this.containerNode.style.padding = "0px";
}
}
if(!array.some(this.getChildren(), function(child){ return child.iconNode1; })){
domClass.add(this.domNode, "mblTabBarNoIcons");
}else{
domClass.remove(this.domNode, "mblTabBarNoIcons");
}
if(!array.some(this.getChildren(), function(child){ return child.label; })){
domClass.add(this.domNode, "mblTabBarNoText");
}else{
domClass.remove(this.domNode, "mblTabBarNoText");
}
}
});
});
|
