Contents

Tabstrip

Tabstrip Video Tutorials

Overview

Use Cases


The tabstrip plugin allows you to embed CMS pages into a single page. The user on the website can then select a tab to display page content dynamically. This is often useful for showing large amounts of content that is related on a single page. For example, you could create a page about a topic, then you could create tabs for: related articles, related events, related committees, etc.

Editing

The tabstrip editor is now AJAX enabled, for more seamless editing. Tabstrip output on the website supports scrolling tabs with the following orientations:

  • Horizontal Top
  • Horizontal Bottom
  • Horizontal Top/Bottom
  • Vertical Left
  • Vertical Right

Styling

Styling is acheived via CSS. For customization, please create an issue in our tracker.

Iframe

There are at least two instances where the use of an iframe will be required to allow Ajax functionality of the tabstrip to interact properly with the content of a page.  

When using an iframe with the tabstrip plugin, create a new page, and either create your own iframe, or paste this text into the HTML view, replacing the # with the url of the page with the content you would like included in the tab:

<iframe style="width: 800px; height: 600px; border: 0px;" marginheight="0" src="#" frameborder="0" marginwidth="0"></iframe>

The width and height will likely need to be adjusted in order to fit the plugin.  The following are the two instances where this may be necessary:

Twitter Widget

When creating a twitter widget to place on your site, if you want to place it in a tabstrip plugin, create the page you'll house the widget on, then create a second page containing an iframe pointing to the page containing the widget.

Twitter Embedded Timeline Documentation

Form with a file upload

When placing a form in a tabstrip plugin that contains a file upload portion, it is best to create the form using the form builder plugin, then create an iframe page that points to the form.

Website Output

The most recently selected tab is remembered via cookie, so when using the Back button or reloading the page, the tab remains selected.

 

Contact this Author: < Nicholas Bott > nick@brycegroup.com