swat.obsolete/apps/qooxdoo-examples/example/TabView_2.html

   1 <html>
   2   <head>
   3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4     <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9     <script type="text/javascript" src="../../script/qx.js"></script>
  10   </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Tabbar implementation.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var d = qx.ui.core.ClientDocument.getInstance();
  22
  23     var tf1 = new qx.ui.pageview.tabview.TabView;
  24     tf1.set({ left: 20, top: 48, right: 335, bottom: 48 });
  25
  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");
  32
  33     // set tab 1 active
  34     t1_1.setChecked(true);
  35
  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);
  43
  44
  45     // modify the default images
  46     t1_2.setCloseButtonImage("icon/16/error.png");
  47     t1_4.setCloseButtonImage("icon/16/apply.png");
  48
  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);
  56
  57
  58
  59     // this handler gets called if a tab-button fires a "closetab" event
  60     function _ontabclose(e){
  61       var btn = e.getData();
  62
  63       var pagesArray = tf1.getPane().getChildren();
  64       var pageSearched = null;
  65
  66       for(var i = 0, l = pagesArray.length; i < l; i++){
  67         var tmpPage = pagesArray[i];
  68         if(tmpPage.getButton() === btn){
  69           pageSearched = tmpPage;
  70         }
  71       }
  72       if(pageSearched){
  73
  74         var itemsList = tf1.getBar().getChildren();
  75         var lengthList = itemsList.length;
  76         var btnIndex = itemsList.indexOf(btn);
  77
  78   // never remove the last tab
  79         if( lengthList > 1 ) {
  80
  81           // Select another tab
  82           if (btnIndex < lengthList-1 ){
  83             itemsList[btnIndex+1].setChecked(true);
  84           }
  85           else {
  86             itemsList[btnIndex-1].setChecked(true);
  87           }
  88
  89           btn.getManager().remove(btn);
  90           tf1.getBar().remove(btn);
  91
  92           tf1.getPane().remove(pageSearched);
  93
  94           pageSearched.dispose();
  95           btn.dispose();
  96         } else {
  97     alert("Last Tab won't be removed!");
  98   }
  99       }
 100
 101       e.stopPropagation();
 102     }
 103
 104     tf1.getBar().add(t1_1, t1_2, t1_3, t1_4, t1_5, t1_6);
 105
 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);
 112
 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");
 119
 120     tf1.getPane().add(p1_1, p1_2, p1_3, p1_4, p1_5, p1_6);
 121
 122     d.add(tf1);
 123
 124   });
 125   </script>
 126 </body>
 127 </html>