Tabbed Page Builder Specifications.htm

Tabbed Page Component Builder Specifications

Tabbed Page Component Builder Specifications

As of May 3, 2006




Create a tool for building pages and MB (component) that use Tabs.  The tool will allow users to define Tab Names and content for each Tab.  This tool shall be used to create component that can be inserted in Product Detail Page and as standalone page.


Design Overview:

This tool shall work similar to Menu Builder.  The user shall select Add New Tab Collection.  They shall assign it a name and select a Tab Style.  Optionally they can load a Header HTML document or use HTML Editor to create one.  Next they select Add New Tab for each Tab they want to create.  For each Tab they shall enter the Tab’s Title and specify the Tab’s content.  The Tab’s content shall be a document or feature component.


The system shall dynamically build the Tab page.  Each Tab shall use AJAX to load its contents without refreshing the remainder of the page.  Each document shall load within the Tab ignoring the Documents ‘Use Template’ setting and ‘Open in New Windows’ settings.  I.e. they always open in same window within template within tab.


Available feature components:



Provide copy feature with checkboxes for the following options:

§   Copy Header

§   Copy Tabs

§   Copy Tab Contents


User Interface Design:

Add New Tab Component



§   Tab Collection Name – used to assign a name to the collection.

§   Style – used to select style.



See http://www.adobe.com/products/flash/flashpro/ they use AJAX for Overview, Evaluation Resources, and About Studio 8 tabs located towards bottom of page.


Create default style that matches the one below:


Document collections for Items/Products - Add section on Product Detail page to list link for each document for the Item.    Estimated Development Time: 30 Hours


The default style for displaying Document links shall be as follows:


Specifications | Reviews | Warranty Info | Shipping Info


As an alternative option (lower development priority) we can create a tabbed section as follows:


Product Detail Page Tab Section – provide MB for Product Detail page like shown below.  Allow a style to be selected.  The style controls the graphic design of the tabs. In the example below they are squared and simple.  Another style might offer tabs that look like  . Allow up to 6 tabs to be defined for the MB.  Preferably all tabs and their content should load as part of single page such that selecting a tab does not require refresh of page.  Each tab should offer a selection of formatting options including:

§   Listing of Related Items – predefined format like the example of the Accessories tab shown below.

§   Unstructured – user defined content.  Content is added either by uploading HTML document, selecting HTML document from library or using HTML Editor to create it.  Examples are the Features tab and Item Includes tab shown below.

§   Structured – provides options to create one or more sections each with heading and line item detail.  Each Line Item shall contain Item and Description.  We shall use our Table Builder component for creating this. See example of Specifications tab shown below.  (Examples are from B&H Photo.)