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.
Here is a more complete example of attaching event handlers, assuming the Elemental theme.
<script>
if(!CCM_EDIT_MODE){
/*
* Example uses Elemental theme
*
* Method 1. Wait for jl_magic_tabs_ready before setting the handlers
*/
$('main').one('jl_magic_tabs_ready', function(){
/*
* Method 1A. When a tab body in the first tab set is shown
*/
$('.jl_magic_tabs_divider.jl_magic_tabs_main_s1').
off('jl_magic_tabs_show').
on('jl_magic_tabs_show', function(ev, info) {
console.log("1A jl_magic_tabs_show", info);
});
/*
* Method 1B. When a tab control changes in the first tab set
*/
$('.jl_magic_tabs.jl_magic_tabs_main_s1').
off('jl_magic_tabs_change').
on('jl_magic_tabs_change', function(ev, info) {
console.log("1B jl_magic_tabs_change", info);
});
});
/*
* Method 2A. Catch any jl_magic_tabs_show and filter it to the first tab set
*/
$('main').
on('jl_magic_tabs_show', '.jl_magic_tabs_divider.jl_magic_tabs_main_s1', function(ev,info){
console.log("2A jl_magic_tabs_show", info);
});
/*
* Method 2B. Catch any jl_magic_tabs_change and filter it to the first tab set
*/
$('main').
on('jl_magic_tabs_change', '.jl_magic_tabs.jl_magic_tabs_main_s1', function(ev,info){
console.log("2B jl_magic_tabs_change", info);
});
}
</script>
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.