summaryrefslogtreecommitdiff
path: root/swat.obsolete/apps/qooxdoo-examples/example/TabView_2.html
blob: df9dcbe039fad9e49140e274aa79bbfc8d1f80c7 (plain)
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 &raquo; 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.TabViewButton("Edit");
    var t1_2 = new qx.ui.pageview.tabview.TabViewButton("Find");
    var t1_3 = new qx.ui.pageview.tabview.TabViewButton("Backup");
    var t1_4 = new qx.ui.pageview.tabview.TabViewButton("System");
    var t1_5 = new qx.ui.pageview.tabview.TabViewButton("Tools");
    var t1_6 = new qx.ui.pageview.tabview.TabViewButton("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.TabViewPage(t1_1);
    var p1_2 = new qx.ui.pageview.tabview.TabViewPage(t1_2);
    var p1_3 = new qx.ui.pageview.tabview.TabViewPage(t1_3);
    var p1_4 = new qx.ui.pageview.tabview.TabViewPage(t1_4);
    var p1_5 = new qx.ui.pageview.tabview.TabViewPage(t1_5);
    var p1_6 = new qx.ui.pageview.tabview.TabViewPage(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>