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
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qooxdoo » Demo</title>
<link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
<![endif]-->
<script type="text/javascript" src="../../script/qx.js"></script>
</head>
<body>
<script type="text/javascript" src="../../script/layout.js"></script>
<div id="demoDescription">
<p>Tabbar implementation.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var tf1 = new qx.ui.pageview.tabview.TabView;
tf1.set({ left: 20, top: 48, right: 335, bottom: 48 });
var t1_1 = new qx.ui.pageview.tabview.Button("Edit");
var t1_2 = new qx.ui.pageview.tabview.Button("Find");
var t1_3 = new qx.ui.pageview.tabview.Button("Backup");
var t1_4 = new qx.ui.pageview.tabview.Button("System");
var t1_5 = new qx.ui.pageview.tabview.Button("Tools");
var t1_6 = new qx.ui.pageview.tabview.Button("Infos");
// set tab 1 active
t1_1.setChecked(true);
// add close images to tab
t1_1.setShowCloseButton(true);
t1_2.setShowCloseButton(true);
t1_3.setShowCloseButton(true);
t1_4.setShowCloseButton(true);
t1_5.setShowCloseButton(true);
t1_6.setShowCloseButton(true);
// modify the default images
t1_2.setCloseButtonImage("icon/16/error.png");
t1_4.setCloseButtonImage("icon/16/apply.png");
// add an eventlistener on the buttons
t1_1.addEventListener("closetab", _ontabclose);
t1_2.addEventListener("closetab", _ontabclose);
t1_3.addEventListener("closetab", _ontabclose);
t1_4.addEventListener("closetab", _ontabclose);
t1_5.addEventListener("closetab", _ontabclose);
t1_6.addEventListener("closetab", _ontabclose);
// this handler gets called if a tab-button fires a "closetab" event
function _ontabclose(e){
var btn = e.getData();
var pagesArray = tf1.getPane().getChildren();
var pageSearched = null;
for(var i = 0, l = pagesArray.length; i < l; i++){
var tmpPage = pagesArray[i];
if(tmpPage.getButton() === btn){
pageSearched = tmpPage;
}
}
if(pageSearched){
var itemsList = tf1.getBar().getChildren();
var lengthList = itemsList.length;
var btnIndex = itemsList.indexOf(btn);
// never remove the last tab
if( lengthList > 1 ) {
// Select another tab
if (btnIndex < lengthList-1 ){
itemsList[btnIndex+1].setChecked(true);
}
else {
itemsList[btnIndex-1].setChecked(true);
}
btn.getManager().remove(btn);
tf1.getBar().remove(btn);
tf1.getPane().remove(pageSearched);
pageSearched.dispose();
btn.dispose();
} else {
alert("Last Tab won't be removed!");
}
}
e.stopPropagation();
}
tf1.getBar().add(t1_1, t1_2, t1_3, t1_4, t1_5, t1_6);
var p1_1 = new qx.ui.pageview.tabview.Page(t1_1);
var p1_2 = new qx.ui.pageview.tabview.Page(t1_2);
var p1_3 = new qx.ui.pageview.tabview.Page(t1_3);
var p1_4 = new qx.ui.pageview.tabview.Page(t1_4);
var p1_5 = new qx.ui.pageview.tabview.Page(t1_5);
var p1_6 = new qx.ui.pageview.tabview.Page(t1_6);
p1_1.setBackgroundColor("green");
p1_2.setBackgroundColor("red");
p1_3.setBackgroundColor("blue");
p1_4.setBackgroundColor("black");
p1_5.setBackgroundColor("yellow");
p1_6.setBackgroundColor("orange");
tf1.getPane().add(p1_1, p1_2, p1_3, p1_4, p1_5, p1_6);
d.add(tf1);
});
</script>
</body>
</html>
|
