Tabs

Design

Tabs are used to navigate between groups of similar information.

Security groups.

Security policies.

Watermarks

Code

HTML
Classic ASP


                                              <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>Security groups.</p>
                                                          </div>
                                                          <div class="ace-tab-panel" id="panel2">
                                                            <p>Security policies.</p>
                                                          </div>
                                                          <div class="ace-tab-panel" id="panel3">
                                                            <p>Watermarks.</p>
                                                          </div>
                                                    </div>
                                              </div>


                                          <% 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 %>

ASP Attributes

Element	Name	Description
ace.Tabs	id	Sets ID of the toggle
ace.Tabs	customclass	Adds a custom class
ace.TabsNav	id	Sets ID of the toggle
ace.TabsNav	customclass	Adds a custom class
ace.TabsNavItem	id	Sets ID of the toggle
ace.TabsNavItem	customclass	Adds a custom class
ace.TabsNavItem	active	Sets ID of the toggle
ace.TabsNavItem	targettab	Sets what ace.TabsPanel this tab will open, based on the ace.TabsPanel id.
ace.TabsNavItem	text	Sets text of the tab
ace.TabsPanels	customclass	Adds a custom class
ace.TabsPanel	customclass	Adds a custom class

Attributes

Name	Notes
Implementation	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.
Active class	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.
Changing tabs	Change tabs using the functions "switchToTabId", or "switchToPanelId".

Javascript

Function	Arguments	Description	Example
init	elementSelector	Creates tabs.	`ACE.Tabs.init()`
destroy	elementSelector	Removes selected tab from the page. If none are passed in then all are destroyed.	`ACE.Tabs.destroy("jQueryTabObject")`
switchToTabId	string	Changes tab based on the tab id.	`ACE.Tabs.switchToTabId()`
switchToPanelId	string	Changes to the tab based on the panel id.	`ACE.Tabs.switchToPanelId()`

ACE

Foundation

Elements

Patterns

Tabs

Design

Code

ASP Attributes

Attributes

Javascript