webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/example/TabView_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo &raquo; Sample</title>
   5   <link type="text/css" rel="stylesheet" href="../../css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/sample.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.Button("Edit");
  27     var t1_2 = new qx.ui.pageview.tabview.Button("Find");
  28     var t1_3 = new qx.ui.pageview.tabview.Button("Backup");
  29
  30
  31     t1_2.setChecked(true);
  32
  33     tf1.getBar().add(t1_1, t1_2, t1_3);
  34
  35     var p1_1 = new qx.ui.pageview.tabview.Page(t1_1);
  36     var p1_2 = new qx.ui.pageview.tabview.Page(t1_2);
  37     var p1_3 = new qx.ui.pageview.tabview.Page(t1_3);
  38
  39     tf1.getPane().add(p1_1, p1_2, p1_3);
  40
  41     var f2 = new qx.ui.form.TextField("Find Anywhere");
  42     var f3 = new qx.ui.form.TextField("Backup Input");
  43
  44     p1_2.add(f2);
  45     p1_3.add(f3);
  46
  47     var c1 = new qx.ui.form.CheckBox("Place bar on top");
  48     var c2 = new qx.ui.form.CheckBox("Align tabs to left");
  49
  50     c1.setTop(0);
  51     c1.setChecked(true);
  52
  53     c2.setTop(20);
  54     c2.setChecked(true);
  55
  56     p1_1.add(c1, c2);
  57
  58     c1.addEventListener("changeChecked", function(e) {
  59       tf1.setPlaceBarOnTop(e.getData());
  60     });
  61
  62     c2.addEventListener("changeChecked", function(e) {
  63       tf1.setAlignTabsToLeft(e.getData());
  64     });
  65
  66
  67
  68
  69     var tf2 = new qx.ui.pageview.tabview.TabView;
  70
  71     tf2.set({ left: 0, top: 50, right: 0, bottom: 0 });
  72
  73
  74
  75     var t2_1 = new qx.ui.pageview.tabview.Button("Search for Files", "icon/16/actions/document-open.png");
  76     var t2_2 = new qx.ui.pageview.tabview.Button("Search the Web", "icon/16/categories/applications-internet.png");
  77     var t2_3 = new qx.ui.pageview.tabview.Button("Search for Text", "icon/16/categories/applications.png");
  78     var t2_4 = new qx.ui.pageview.tabview.Button("Search for Persons", "icon/16/apps/accessories-archiver.png");
  79     var t2_5 = new qx.ui.pageview.tabview.Button("Search in Mails", "icon/16/apps/internet-email-client.png");
  80
  81     t2_1.setChecked(true);
  82
  83     tf2.getBar().add(t2_1, t2_2, t2_3, t2_4, t2_5);
  84
  85     var p2_1 = new qx.ui.pageview.tabview.Page(t2_1);
  86     var p2_2 = new qx.ui.pageview.tabview.Page(t2_2);
  87     var p2_3 = new qx.ui.pageview.tabview.Page(t2_3);
  88     var p2_4 = new qx.ui.pageview.tabview.Page(t2_4);
  89     var p2_5 = new qx.ui.pageview.tabview.Page(t2_5);
  90
  91     tf2.getPane().add(p2_1, p2_2, p2_3, p2_4, p2_5);
  92
  93     var t2_1 = new qx.ui.form.TextField("Files...");
  94     var t2_2 = new qx.ui.form.TextField("Web...");
  95     var t2_3 = new qx.ui.form.TextField("Printers...");
  96     var t2_4 = new qx.ui.form.TextField("Persons...");
  97     var t2_5 = new qx.ui.form.TextField("Mails...");
  98
  99     t2_1.set({ top: 2, left: 0, width: 140 });
 100     t2_2.set({ top: 2, left: 0, width: 140 });
 101     t2_3.set({ top: 2, left: 0, width: 140 });
 102     t2_4.set({ top: 2, left: 0, width: 140 });
 103     t2_5.set({ top: 2, left: 0, width: 140 });
 104
 105     p2_1.add(t2_1);
 106     p2_2.add(t2_2);
 107     p2_3.add(t2_3);
 108     p2_4.add(t2_4);
 109     p2_5.add(t2_5);
 110
 111     var b2_1 = new qx.ui.form.Button("Search", "icon/16/actions/edit-find.png");
 112     var b2_2 = new qx.ui.form.Button("Search", "icon/16/actions/edit-find.png");
 113     var b2_3 = new qx.ui.form.Button("Search", "icon/16/actions/edit-find.png");
 114     var b2_4 = new qx.ui.form.Button("Search", "icon/16/actions/edit-find.png");
 115     var b2_5 = new qx.ui.form.Button("Search", "icon/16/actions/edit-find.png");
 116
 117     b2_1.set({ top: 0, left: 150 });
 118     b2_2.set({ top: 0, left: 150 });
 119     b2_3.set({ top: 0, left: 150 });
 120     b2_4.set({ top: 0, left: 150 });
 121     b2_5.set({ top: 0, left: 150 });
 122
 123     p2_1.add(b2_1);
 124     p2_2.add(b2_2);
 125     p2_3.add(b2_3);
 126     p2_4.add(b2_4);
 127     p2_5.add(b2_5);
 128
 129     function dosearch(e) {
 130       alert("Searching...");
 131     };
 132
 133     b2_1.addEventListener("click", dosearch);
 134     b2_2.addEventListener("click", dosearch);
 135     b2_3.addEventListener("click", dosearch);
 136     b2_4.addEventListener("click", dosearch);
 137     b2_5.addEventListener("click", dosearch);
 138
 139
 140
 141
 142     p1_2.add(tf2);
 143
 144
 145
 146
 147
 148
 149     d.add(tf1);
 150
 151
 152     t1_1.setEnabled(false);
 153   });
 154   </script>
 155 </body>
 156 </html>