Developer Interfaces

JavaScript Events

Magic Tabs will trigger the custom JavaScript events:

  • 'jl_magic_tabs_ready' when tab initialisation is complete, triggered on the tab controls.
  • 'jl_magic_tabs_change' when a tab or accordion control is clicked or changed (such as following Magic Tabs Jump), triggered on the tab controls.
  • 'jl_magic_tabs_show' for a tab when it is shown, triggered on the tab body.
  • 'jl_magic_tabs_done' when any transitions have completed, triggered on the tab body.

For events triggered on the tab controls, this is typically a <ul> element identified by the tab set, such as ".jl_magic_tabs.jl_magic_tabs_main_s1".

For events triggered on the tab body, this is the <div> element with an #id attribute matching the link in the tab control header and with the class jl_magic_tabs_divider.

Script developers can use these events to add custom behaviours when a Magic Tab is shown. 

As an example, here is the <div> element with #id for this tab's body.

<div id="jl_magic_tabs__gix1" class="jl_magic_tabs_divider jl_magic_tabs_main_s1 jl_magic_tabs_level_0">
<!-- More elements for the body of the tab-->
</div>

To show a tab using JavaScript, all you need to do is to trigger a click event on the <a> link element in the associated tab heading.

For example, the heading for this tab is:

<a href="#jl_magic_tabs__gix1">JavaScript events</a>

If all you want to do is link to a tab, you don't need to use JavaScript, see Jumping and Linking to Specific Tabs.

Overriding Global Settings

The global settings made in Edit Block > Global Settings can be overriden for a tab set by coding new values into a custom template.

Within the template, global settings can be overriden by 

$ch->set_global_param('parameter_key', 'new value');

The available keys are:

  • tab_url : 'off'/'on' (string)
  • auto_show : 0/1 (number)
  • accordion_default_open : 0/1 (number)
  • accordion_always_open : 0/1 (number)
  • mobile_no_transitions : 0/1 (number)
  • preserve_grid_box : 0/1 (number)
  • wrap_with_grid_box : 0/1 (number)
  • grid_classes_to_remove : 'list of class names' (string)
  • exclusive_handlers : 0/1 (number)

 

Config File

Config

Magic tabs uses a config file at application/config/generated_overrides/magic_tabs.php.

Further global parameters that can be set in the config file are:

  • heading_levels : the headings used for each level of tabs before the tabs are rendered, defaults to '3,4,5'.
  • debug : output diagnostic information about tab rendering to the page and developer console. Can be set to 1 for all, or a string containing any or all of 'page,tab,split,jquery,jump,play,form' to focus on specific areas of the code.

Magic Tabs documentation

To help you get started with Magic Tabs, this Getting Started page is built as a series of Magic Tabs with content and other blocks between. You can…
To use Magic Tabs for a straight forward set of tabs, you only need enter a Tab Heading and save the edit dialog. Magic Tabs takes care of everything…
You can create a set of tabs wholly within a single layout cell. You can create a layout wholly within a tab. The important consideration is that the…
This set of Magic Tabs is configured to always show as an accordion. To read about how it is done, please click to open the first accordion tab.
Global settings can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
Link within a page using the Magic Tabs Jump block or with an href. Link from other pages with a url ?tab=tab_name parameter.
The Magic Tabs Auto Play block automatically cycles through a set of Magic Tabs. With transitions you can turn a set of Magic Tabs into a simple slide…
The Form to Magic Tabs block can be used to break a form or page list into a series of tabs. It works with forms blocks from Express, Legacy Form,…
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Magic tabs without the tabs!
Magic Tabs comes with many example tab templates. For many sites, one of these will fit in with the site theme with no further modification.
If you start building a page with Magic Tabs and don't see the results you expect, here are some tips to help you solve any problems.
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs. If you have the Buttons Factory Pro addon, you can use…