Custom Elements: “Tabbed Page Interface”

Share

Tutorial at a Glance

This tutorial will discuss how to use the custom element “Tabbed Page Interface”.  This element lets you easily make a multiple tab display on any of your CommonSpot pages.  An example of the element can be seen here: http://www.ecu.edu/cs-training/corey/Tutorials.cfm

Creating a banner using “Tabbed Paged Interface” can be done in three (3) steps:

  1. Insert the custom element “Tabbed Page Interface”
  2. Choose the number of tabs and the colors of the elements
  3. Define tabs and add content

Detailed Tutorial – PDF

To create a banner using “Tabbed Paged Interface” follow these three (3) steps:

Step 1: To put the element on a page, click the “Click to insert new element” link on your page, then choose “Tabbed Paged Interface” listed under Custom Elements.  Then click the “Click here to defined the custom element data” link to open the popup window that will let you put your content in the element.

tutorials- Tabbed Interface Element

Step 2: Choose how many tabs you want to have, 2, 3, or 4.  Pick the background color for the active and inactive tabs.  With a purple background, the text will be gold, with a gold or white background, the text will be purple and with a gray background, the text will be white.

tutorials- Tabbed Interface Element1

Step 3: Then click on the “Tab One” tab to define the content of your first tab.  You must have a Tab Label (the text that will appear on the tab) and content.  Then do the same for each of the other tabs.  You only have to complete as many tabs as you specified that you wanted.  You can put content in more tabs than you specified in the first step, but the element will only display the content in the number that you specified.

Click Finish when all your desired tabs are populated.  The element will write all the CSS and JavaScript for you to display your content.  And if the user has a browser that does not use JavaScript, the element will still display all the content in your element, displaying them down the page in order.

As always, check out the ITCS Learning Center for more information about CommonSpot and other computer topics.

Leave a Reply