TabStrip

A TabStrip shows 'tabs' of content, one tab at a time. The TabStrip may be optionally configured to override the default tab displayed (1) to another tab. The Tabstrip may also optionally be configured to increment to the next tab ever 'x' seconds.

Example: /Playground/TabStrip

Add the placeholder TabStrip to your page and an expanded tabstrip will be inserted into your edited page for easy editing.

The expanded default tabstrip has the comment in the top left, a user list displaying the 'name' to appear on each relevant tab, and the tabstrip 'sections'. You may edit the name on the tab or the content of the tab directly in the xstandard editor

To Configure the tabstrip, open the 'comment' for the tabstrip as this tells the JavaScript and CSS how to interpret the TabStrip. TabStripName attribute in the comment is required and MUST be the first comment, the rest are optional, and separated by hard returns.

• TabStripName:taba Unique name, case SENSITIVE as JavaScript does the interpretation.
• Height:100px Optional
• Width: 100px Optional
• FirstTab: 1 Optional, which tab to start with when page renders
• NextTabSeconds: 2 Optional, anything integer grater then 0 specifies number of seconds to wait before going automatically going to next tab. Clicking on ANY TAB on the TabStrip turns off the NextTab features if it’s running.

IF you would like to add more then one tabstrip to a page, manually change the tabstripname to something OTHER then the default.

1. Each Tabstrip must be uniquely named in the parent div, and the comments.
2. Each Tab name in the user list must reference a uniquely named 'Tab'.

Review the picture for an overview as this may be easier to do in the XML code view then using the xStandard Editor directly (though technically that is possible).

If you would like to add additional tabs,

1. follow the convention and add a <div class="tab" id="unqiename"></div> to the tabname-tabs div,
2. and add a link to the user list <div id="tabname-nav">linking to it.

The screen shot also illustrates how to choose a 'random' tab as the page loads by using the RandomContent Placeholder.

To review examples, or start with a page that has tabs on it, review the /template/tabstrips or /Playground/TabStrip