diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TabView_2.html')
-rw-r--r-- | webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TabView_2.html | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TabView_2.html b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TabView_2.html new file mode 100644 index 0000000000..2e1fea67cb --- /dev/null +++ b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TabView_2.html @@ -0,0 +1,127 @@ +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo » Sample</title> + <link type="text/css" rel="stylesheet" href="../../css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/sample.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/status/dialog-error.png"); + t1_4.setCloseButtonImage("icon/16/actions/dialog-ok.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>
\ No newline at end of file |