America/US Samples
Europe Samples
Asia Samples

Gaia Ajax: TabControl

The TabControl extends Gaia Panel and maintains a collection of TabViews where only one Tab is visible at the time. The Gaia Ajax TabControl is extremely flexible in regards to skinning and usage. You can use it completely without any JavaScript knowledge at all. All you need to do is create it declaratively in your ASP.NET .ASPX code file, choose your skin and start adding code for its event handlers.

One of the Lorem Ipsum words are clickable in one of the Tabs. If you can find it a "hidden" secret will be revealed for you :-) *Don't cheat by looking at the source*

Nunc scelerisque sollicitudin leo. Fusce id sapien. Ut faucibus. Aliquam erat volutpat. Vestibulum arcu libero, iaculis id, pretium eu, posuere gravida, felis. Aliquam erat volutpat. Fusce a diam. Morbi sit amet ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vehicula, turpis nec scelerisque pulvinar, massa massa imperdiet eros, non fermentum sem quam vel nulla.

Here you can add more TabViews dynamically.


Markup (ASPX/.aspx)

   1:   
   2:   
   3:  <p>One of the Lorem Ipsum words are clickable in one of the Tabs. If you can find 
   4:  it a "hidden" secret will be revealed for you :-) 
   5:  <b>*Don't cheat by looking at the source*</b>
   6:  </p>
   7:   
   8:  <gaia:Panel runat="server" ID="zPnl" CssClass="tabexample-container">
   9:   
  10:      <gaia:TabControl 
  11:          ID="zTabControl1" 
  12:          runat="server"
  13:          ForceDynamicRendering="true">
  14:      
  15:          <gaia:TabView ID="zTabView1" runat="server" Caption="Tab 1">
  16:          
  17:              <p>Nunc scelerisque sollicitudin leo. 
  18:              Fusce id sapien. Ut
  19:              faucibus. Aliquam erat volutpat. Vestibulum arcu libero, 
  20:              iaculis id, pretium eu, posuere gravida, felis. Aliquam 
  21:              erat volutpat. Fusce a diam. Morbi sit amet ligula.
  22:              Class aptent taciti sociosqu ad litora torquent per 
  23:              conubia nostra, per inceptos
  24:              himenaeos. Curabitur vehicula, turpis nec scelerisque 
  25:              pulvinar, massa massa imperdiet eros, non fermentum sem 
  26:              quam vel nulla.</p>
  27:                 
  28:          </gaia:TabView>
  29:          <gaia:TabView ID="zTabView2" runat="server" Caption="Tab 2">
  30:              
  31:              <p>Lorem ipsum dolor sit amet, 
  32:              consectetuer adipiscing elit. 
  33:              Fusce quis erat. Ut congue erat. Nullam dignissim. 
  34:              Suspendisse nisl pede, auctor vel, accumsan tempor, convallis
  35:              vel, sapien. Curabitur quis dui. Nunc et velit. In porttitor, 
  36:              leo eu adipiscing suscipit, est nisi cursus lorem, in mattis 
  37:              libero libero sit amet tellus. Suspendisse</p>
  38:              
  39:          </gaia:TabView>
  40:          
  41:          <gaia:TabView ID="zTabView3" runat="server" Caption="Tab 3">
  42:          
  43:              <p>Vel, sapien. Curabitur quis dui. 
  44:              Nunc et velit. In porttitor, 
  45:              leo eu adipiscing suscipit, est nisi cursus lorem, in mattis 
  46:              libero libero sit amet tellus. Suspendisse mollis consequat 
  47:              lectus. Nunc scelerisque sollicitudin leo. Fusce id sapien. Ut
  48:              faucibus. Aliquam erat 
  49:              <gaia:LinkButton 
  50:                  ID="zHiddenGem" 
  51:                  runat="server" 
  52:                  Text="Gaia"
  53:                  Style="color: Black; text-decoration: none;"
  54:                  OnClick="zHiddenGem_Click"></gaia:LinkButton>
  55:              volutpat. Vestibulum arcu libero, 
  56:              iaculis id, pretium eu, posuere gravida, felis. Aliquam erat volutpat. 
  57:              Fusce a diam. Morbi sit amet ligula. Class aptent taciti sociosqu
  58:              ad litora torquent per conubia nostra, per inceptos</p>
  59:             
  60:          </gaia:TabView>
  61:          
  62:          <gaia:TabView 
  63:              ID="zTabView4" 
  64:              runat="server" 
  65:              Caption="Disabled Tab 4" 
  66:              Enabled="false">
  67:                 
  68:          </gaia:TabView>
  69:          
  70:      </gaia:TabControl>
  71:  </gaia:Panel>
  72:  <p>Here you can add more TabViews dynamically.</p>
  73:  <gaia:Button runat="server" ID="zAddTabView" Text="Add TabView" OnClick="zAddTabView_Click" />
  74:   
  75:   <gaia:Window 
  76:      ID="zWindowSuccess" 
  77:      Caption="Congratulations!"
  78:      runat="server" 
  79:      Modal="true" 
  80:      Minimizable="false"
  81:      Maximizable="false"
  82:      Draggable="false"
  83:      Resizable="false"
  84:      CenterInForm="true"
  85:      Width="400px"
  86:      Visible="false"
  87:      Height="200px">
  88:     
  89:      <div style="padding: 15px;">
  90:          <h1>You did it!</h1>
  91:          <p>The hidden word was disguised as a LinkButton with a OnClick handler
  92:          that made this Window visible. The best part is that the Window was not
  93:          made visible to the client (aka. Rendered to the Browser) before the 
  94:          click handler on the server executed. 
  95:          </p>
  96:      </div>
  97:     
  98:      </gaia:Window>
  99:   
 100: