Tabs

Tabs are connected through the "aria-controls" value. Each tab needs to have the id of the panel it controls set in "aria-controls". Each tab control and tab panel must have an ID.

The inital active tab can be set by adding the class "ace-tab-active". If it's not set the first tab is set to be active.

                                                                  <div class="ace-tabs" role="tabpanel">
                                                                        <ul class="ace-tabs-nav" role="tablist">
                                                                              <li class="ace-tab-active" id="tab1" aria-controls="panel1"><a href="#panel1">Security groups</a>
                                                                              </li>
                                                                              <li id="tab2" aria-controls="panel2"><a href="#panel2">Security policies</a>
                                                                              </li>
                                                                              <li id="tab3" aria-controls="panel3"><a href="#panel3">Watermarks</a>
                                                                              </li>
                                                                        </ul>
                                                                        <div class="ace-tab-panels">
                                                                              <div class="ace-tab-panel" id="panel1">
                                                                                <p class="ace-p">Security groups.</p>
                                                                              </div>
                                                                              <div class="ace-tab-panel" id="panel2">
                                                                                <p class="ace-p">Security policies.</p>
                                                                              </div>
                                                                              <div class="ace-tab-panel" id="panel3">
                                                                                <p class="ace-p">Watermarks.</p>
                                                                              </div>
                                                                        </div>
                                                                  </div>

Note that each TabsNavItem's targetTab must match the corresponding TabsPanel ID.

All elements accept the standard id and customClass.

                                                              <% ace.Tabs(Array())%>
                                                                <% ace.TabsNav(Array())%>
                                                                  <% ace.TabsNavItem(Array("text", "Security groups", "id", "tab1", "targetTab", "panel1"))%>
                                                                  <% ace.TabsNavItem(Array("text", "Security policies", "id" ,"tab2", "targetTab", "panel2", "active", "true"))%>
                                                                  <% ace.TabsNavItem(Array("text", "Watermarks", "id", "tab3", "targetTab", "panel3"))%>
                                                                <% ace.TabsNavEnd()%>
                                                                <% ace.TabsPanels(Array())%>
                                                                  <% ace.TabsPanel(Array("id", "panel1"))%>
                                                                    <p>Security groups</p>						
                                                                  <% ace.TabsPanelEnd()%>
                                                                  <% ace.TabsPanel(Array("id", "panel2"))%>
                                                                    <p>Security policies</p>
                                                                  <% ace.TabsPanelEnd()%>
                                                                  <% ace.TabsPanel(Array("id", "panel3"))%>
                                                                    <p>Watermarks</p>
                                                                  <% ace.TabsPanelEnd()%>
                                                                <% ace.TabsPanelsEnd()%>
                                                              <% ace.PanelEnd %>