The Tabs GK5 module for Joomla! (2.5/3.x) is the next evolutionary step forward in the GavickPro solution to managing Web page content via tabs. With this module, you can implement space-saving tabs on websites and incorporate a variety of content types via modules or user-defined custom HTML code.
GK tabs – style 1
GK Tabs – Style 4
This new version of GK5 introduces some valuable and essential improvements for our customers. If you have been craving a more flexible tabs module, we have definitely responded, having implemented improvements in areas of administration and content display.
Tabs GK5 introduces support for external data sources in the JSON and XML formats, and it includes options for vertical tabs layout and for automatic height adjustment based upon the content. This version is also scalable, making it appropriate for websites based upon Responsive Web Design. We’ve also addressed the issue of javascript frameworks, ensuring the module supports both MooTools and jQuery.
Following is a list of improvements to be found in Tabs GK5:
- Load & Save configuration
- Full access control list (ACL) support for tabs
- JSON / XML support as the external sources
- Option to set individual ID for each tab
- Option to set individual animation for each tab
- Auto-height
- Scalable layout
- Vertical scrolling animation
- Support for stop auto-animation on hover
- MooTools & jQuery javascript frameworks support
- Cleaned HTML5 code
- Recoded and restyled back-end
- 12 built-in styles (6 horizontal and 6 vertical) using CSS3 instead of images
Module configuration
Those used to our Tabs GK4 release will notice that the administration panel has been redesigned. Behind the scenes, we’ve updated the code responsible for the module’s configuration panel. Although the layout of the main options group has not changed, new options and parameters have been added.
Basic Settings – “Basic” tab
One of the most useful features of Basic Settings is the option to save and load module configuration. This makes it possible to save your tabs configuration and, if needed, to load and restore the tabs settings. Configuration files are saved in a config catalog for the module. If saving with an already-existing file name, a number will be appended to the filename to make it unique. You can also delete configuration file.
Options for the module’s ID allows you to configure whether the module ID will be set automatically (“Automatic module ID”). If this option is switched off, a unique identifier must be manually applied to each instance of the module. The use of a unique ID for each module instance is important with respect to the website’s validation code, but it also allows individual styling. Another benefit to a unique modue ID is the ability to detect the source of a tab change event from the gkTabEventTrigger function, further described in the developer’s section.
Tabs GK5 supports the now-standard “Module suffix” function, which allows unique CSS-based styling to be assigned to the module.
This section has the important “Module data source” option. This allows you to specify whether tabs are created using information found in the “Tabs” tab or if the necessary information is loaded from an external file in JSON/XML format. The external file format is described in the developer’s section.
The “Tabs” tab has bee replaced with “External Sources” for the purpose of selecting an external data source.
With the “Source file” option, you can choose the module configuration data file to load. It must be in the ‘external data” catalog and in its specialized format.
Managing tabs
Creating new tabs is made by clicking “Add new tab” button after which a form for adding a tab will appear:
The “Content type” tab is used to select any Joomla! module or Custom HTML code as content for the tab. To place a single article in the module we recommend using the News Show Pro GK5 module .
The “Content” allows you to specify either HTML content for the tab or the module position to be used to load the module inside the tab. You can enabled also movies from youtube or Vimeo (read more).
Following are three improvements over the previous version:
- In the “Access” field, all Joomla! ACL groups appear;
- The new “Tab ID” field allows a unique ID to be specified for the given tab, enabling unique tab styling;
- The new “Animation” field makes it possible to specify a different type of animation for each tab. You can choose from four type of effects. To use an animation from the animation section settings, select the default animation in this option. This option only works if the option ‘Animation type’ in the ‘Animation’ section is set to ‘Custom animation’
A selected tab may be edited after saving:
Buttons on a tab’s bar may be used to remove the tab (x), (un)publish the tab or to alter its position amongst the other tabs. The value of the “State” parameter may also be changed. An edit form for the current tab will be displayed when the Tab name is clicked; this is also triggered when a new tab is added:
A tab’s bar also includes the following information:
- the tab’s name;
- he ACL group for the current tab; and,
- the content type (HTML or module).
It is important to note that new tabs and modifications to existing tabs made within the Tabs Manager are only retained when the module settings are saved.
If you are using modules as a Tabs – you have to select for them module positions from tab1, tab2, tab3….tab10 and of course publish them.
Modules must be published on tab1..tab10 positions to be show
Interface options – “Interface” tab
The “Interface” tab provides options to set the overall look of the module:
A predefined module style may be selected using the “Module style” option.
There are three main module interface elements:
- Tabs
- Tabs content
- Prev/Next buttons
Module layout is modified based upon the value set for the “Tabs position” option.
In the case of “right” and “left” layouts, a module always has the height specified by the “Module height” option; additionally, the width of a block with tabs is equal to the width specified by the “Tabs width” option.
The “Module auto-height” setting triggers a module’s height to be altered based upon the amount of content in a given tab and functions with the “top” and “bottom” layouts.
As its name implies, the “Prev/Next buttons” option is used to enable or disable the prev/next buttons. Remember that for “right” and “left” layouts, these buttons are switched off automatically.
As another example of the expanded support for custom styling we’ve introduced in this release, you can now easily add an additional container in the tab’s code for custom module styling using the “Use additional spans” option. This would change the tab’s code as follows:
<li>Tab</li>to:
<li><span>Tab</span></li>Find more information about styling of the Tabs GK5 module in the “Module code” section.
Animation parameters – “Animation” tab
The “Animation” tab is used to specify animation parameters through the following options: “Animation speed”, “Animation interval” and “Animation transition”. These three parameters specify the rate of speed of an animation, the length of intervals between animations when “Auto animation” is in the on position, and animation transition (the way in which animated values change), respectfully. Transitions are animations used to keep users oriented during user object manipulations, and make those changes feel smooth instead of jarring. They are used to communicate to users non-verbally, and to make state changes more natural and less noticeable. The more attention an animation effect demands, the shorter the duration should be.
The animation type can be specified via the ” Animation type” option. There are now three types of animation:
- Opacity – transparency animation
- Slider (vertical) – vertical animation
- Slider (horizontal) – horizontal animation
The “Swipe gestures” is used to enable swipe move gestures (finger being moved) on the mobile devices. Please remember that it should be activated only when the content of the tabs doesn’t contain modules which also uses the swipe gestures.
Animations may be requested in two ways: automatically with the “Auto animation” option set to the “On” position, or with the tabs. To specify how an animation may be requested, the appropriate “Animation activator” option must be set from the following:
- Click – animation request by clicking a tab given
- Mouse over – animation request by mousing over a tab given
Additional options – “Advanced settings” tab
The “Advanced settings” tab allows additional module functionality to be activated, and for the approach to loading CSS and Javascript files to be determined.
The “Initial tab” option allows you specify initial tab number.
The “Tab selection from URL” option is used to specify whether a tab identified by ID via the website address (URL) will automatically be loaded as the default tab (for that session). For example, switching this option to “On” and setting the Web browser to point to the URL http://yourdomain.com/index.php?gktab=3 would cause the third tab in the set of tabs to be displayed initially upon page loading.
Alternatively, when in the “On” position, the “Tab selection from cookies” option forces the ID of the tab last used by site visitors to be saved to cookie files. This way, when visitors return to the site, the last tab viewed on their previous visit will be automatically displayed when the page loads.
Important to note is that in the case of the “Tab selection from cookies” option, each module saves a separate cookie file whereas in the use of the gktab parameter in the address, you can expect the identified tab to be loaded for each instance of the Tabs GK5 module on a given website.
The “Parse plugins” option enables the use of plugins from the Content group within tabs content. The four remaining options from this group are related to external CSS and JavaScript files.
The “Use CSS” and “Use Script” options allow you to specify how cascading style sheet (CSS) files and scripts are loaded. In the case of CSS files, file loading may be switched on or off. An automatic mode setting exists for scripts which, when enabled, ensures that an instance of Tabs GK5 will not load when another instance has been detected as loaded from thesection. However, if problems arise when using the automatic mode, we recommend setting the “force enabled” or “force disabled” options, depending upon whether a script must be added or not.
The “Used Javascript framework” option may be used to specify which script version must be applied. In the case of templates based upon the jQuery framework, we recommend not to use a script version for the MooTools framework because it is known to cause redundant additional JavaScript framework code loading.
Additionally, when a given template automatically loads the jQuery framework, we recommend switching the “Include jQuery framework” option to “On”. The “Include jQuery framework” should also be loaded for those templates where neither the MooTools nor jQuery frameworks are loaded.
GK Tabs Module updates
Joomla 3.x and Joomla 2.5 has an Extension Updater feature, because of that since version 1.3 we added support for Joomla! Update System for our module. That’s why information about available update to the Tabs GK5 module is displayed on the Extension Manager:Updates area.
If there will be a newer version of an Tabs GK5 available, you’ll receive a notification. When you log in as an administrator you will see on red background number that indicates the number of extensions for which there are available updates, for example, Updates are available [2]. Now you will be able to update all extension by one click. Of course you can still install the latest ZIP package via the Joomla! Installer (Extension Manager).