3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>qooxdoo » Demo</title>
5 <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
7 <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
9 <script type="text/javascript" src="../../script/qx.js"></script>
12 <script type="text/javascript" src="../../script/layout.js"></script>
14 <div id="demoDescription">
15 <p>Tabbar implementation.</p>
18 <script type="text/javascript">
19 qx.core.Init.getInstance().defineMain(function()
21 var d = qx.ui.core.ClientDocument.getInstance();
23 var tf1 = new qx.ui.pageview.tabview.TabView;
24 tf1.set({ left: 20, top: 48, right: 335, bottom: 48 });
26 var t1_1 = new qx.ui.pageview.tabview.TabViewButton("Edit");
27 var t1_2 = new qx.ui.pageview.tabview.TabViewButton("Find");
28 var t1_3 = new qx.ui.pageview.tabview.TabViewButton("Backup");
29 var t1_4 = new qx.ui.pageview.tabview.TabViewButton("System");
30 var t1_5 = new qx.ui.pageview.tabview.TabViewButton("Tools");
31 var t1_6 = new qx.ui.pageview.tabview.TabViewButton("Infos");
34 t1_1.setChecked(true);
36 // add close images to tab
37 t1_1.setShowCloseButton(true);
38 t1_2.setShowCloseButton(true);
39 t1_3.setShowCloseButton(true);
40 t1_4.setShowCloseButton(true);
41 t1_5.setShowCloseButton(true);
42 t1_6.setShowCloseButton(true);
45 // modify the default images
46 t1_2.setCloseButtonImage("icon/16/error.png");
47 t1_4.setCloseButtonImage("icon/16/apply.png");
49 // add an eventlistener on the buttons
50 t1_1.addEventListener("closetab", _ontabclose);
51 t1_2.addEventListener("closetab", _ontabclose);
52 t1_3.addEventListener("closetab", _ontabclose);
53 t1_4.addEventListener("closetab", _ontabclose);
54 t1_5.addEventListener("closetab", _ontabclose);
55 t1_6.addEventListener("closetab", _ontabclose);
59 // this handler gets called if a tab-button fires a "closetab" event
60 function _ontabclose(e){
61 var btn = e.getData();
63 var pagesArray = tf1.getPane().getChildren();
64 var pageSearched = null;
66 for(var i = 0, l = pagesArray.length; i < l; i++){
67 var tmpPage = pagesArray[i];
68 if(tmpPage.getButton() === btn){
69 pageSearched = tmpPage;
74 var itemsList = tf1.getBar().getChildren();
75 var lengthList = itemsList.length;
76 var btnIndex = itemsList.indexOf(btn);
78 // never remove the last tab
79 if( lengthList > 1 ) {
82 if (btnIndex < lengthList-1 ){
83 itemsList[btnIndex+1].setChecked(true);
86 itemsList[btnIndex-1].setChecked(true);
89 btn.getManager().remove(btn);
90 tf1.getBar().remove(btn);
92 tf1.getPane().remove(pageSearched);
94 pageSearched.dispose();
97 alert("Last Tab won't be removed!");
104 tf1.getBar().add(t1_1, t1_2, t1_3, t1_4, t1_5, t1_6);
106 var p1_1 = new qx.ui.pageview.tabview.TabViewPage(t1_1);
107 var p1_2 = new qx.ui.pageview.tabview.TabViewPage(t1_2);
108 var p1_3 = new qx.ui.pageview.tabview.TabViewPage(t1_3);
109 var p1_4 = new qx.ui.pageview.tabview.TabViewPage(t1_4);
110 var p1_5 = new qx.ui.pageview.tabview.TabViewPage(t1_5);
111 var p1_6 = new qx.ui.pageview.tabview.TabViewPage(t1_6);
113 p1_1.setBackgroundColor("green");
114 p1_2.setBackgroundColor("red");
115 p1_3.setBackgroundColor("blue");
116 p1_4.setBackgroundColor("black");
117 p1_5.setBackgroundColor("yellow");
118 p1_6.setBackgroundColor("orange");
120 tf1.getPane().add(p1_1, p1_2, p1_3, p1_4, p1_5, p1_6);