Pre-Requirements

1. Install and enable Core Design Scriptegrator plugin.

1. Visit Scriptegrator plugin configuration and set the "Load jQuery to" option to "Site".

This plugin is using a very easily notation. To apply the tabs to your content use the notation bellow. Please remember, your "tabs" must be separated with "||||" (four "|"). And the names of tabs must be separeted from the text inside the tabs with "::" (two colons).

Default notation:

Manually:

{magictabs}
TAB 01::Lorem ipsum dolor sit amet consectetuer nec eu magna consequat volutpat. Ut porttitor purus hendrerit nibh id sit id ultrices eu netus. Et eros cursus Sed sit adipiscing Vivamus ut magna Nulla nibh.
||||
TAB 02::Lorem ipsum dolor sit amet consectetuer nec eu magna consequat volutpat. Ut porttitor purus hendrerit nibh id sit id ultrices eu netus. Et eros cursus Sed sit adipiscing Vivamus ut magna Nulla nibh.
||||
TAB 03::Lorem ipsum dolor sit amet consectetuer nec eu magna consequat volutpat. Ut porttitor purus hendrerit nibh id sit id ultrices eu netus. Et eros cursus Sed sit adipiscing Vivamus ut magna Nulla nibh.
{/magictabs}


Article ID:

{magictabs}129:255:101{/magictabs}

The number means your article ID. To more article usage please separated the ID's with ":" (colon).

TIP: The Core Design Insert Article ID usage make your work just simpler.

The default settings in plugin configuration can be overwritten by the settings specified by each tabs. Please write the following attributes to the "{magictabs...}" attribute. The allowed settings:

• mode. Support to choice between "id" and "manually" mode to create your tabs.
  • mode="manually" (default)
  • mode="id"

• id. Adds custom ID for more tabs in one article. Function available from version 1.0.3 and enable possibility to link to a specific tab via URL. The allowed characters are 0-9, a-z, A-Z.
  • id="mytab" (for example)

• uitheme. One of predefined themes based on jQuery ThemeRoller. Take a look on available styles in plugin configuration.
  • uitheme="smoothness"
  • uitheme="ui-lightness"
  • ...

• animation. Animation mode to tab preview.
  • animation="slide"
  • animation="fade"
  • animation="both"

• boxwidth. Box width. The allowed units are px, % and em.
  • boxwidth="300px"
  • boxwidth="10em"
  • width="80%"

• tabalign. Tab align. The postition for your tabs (to left or to right side).
  • tabalign="left"
  • tabalign="right"

• offset. Tab offset offset of first tab from edge. The allowed units are px, % and em.
  • offset="10px"
  • offset="2em"
  • offset="5%"

• select. Tab select. The number of selected tabs.
  • select="1" -> the first tab was marked as active, by default.
  • select="2" -> the second tab was marked as active.
  • select="3"

• rotate. Tab rotate. The function to rotate the tabs (in milliseconds). The zero ("0") disable this function.
  • rotate="0" - > disable this function, by default
  • rotate="2000"
  • rotate="3500"

• event. Tab event. Define event to switch tabs.
  • event="click"
  • event="mouseover"