Overview
RokTabs is a tabbed content module, standalone and sporting its own themes (light and dark). Content is transitions, either by fade or scroll, and is powered by mootools.
The module has the ability to be fully automated, switching based on time or manually by user interaction. RokTabs also has support for the plugin allowing to load modules inside it, as well as supporting K2.
Features
- Tabbed Content: Display multiple content items in a tabbed enclosure.
- Module Position Support: You can insert module positions inside the tabs.
- Inbuilt Styling: Both light and dark styling for standalone support
- Configurability: Highly configurable from options dealing with transition, to content type and layout.
Demo: Multiple Configurations
RokTabs can be configured in a variety of different ways, from tab position; transition type, effect and period; light and dark style as well as a diverse assortment of other types, such as content and author selection. The options below only showcase different tab position configurations, theme styles and transitions. All other options are the same.
Top Tabs Configuration
In the example below, Tab Position is set to Top, Autoplay set to Yes, Transition type set to Scrolling, and Theme Style set to Light.
- Tab Number Eight
- Tab Number Seven
- Tab Number Six
- Tab Number Five
- Tab Number Four
- Tab Number Three
- Tab Number Two
- Tab Number One
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce at augue lectus, vitae placerat dolor. Morbi nec turpis a orci tempor scelerisque sed in lectus. Duis nec tellus non metus lobortis dapibus id eget libero. Quisque facilisis, elit at molestie porttitor, augue felis consectetur leo, sed dictum urna metus ac arcu. Nulla facilisi. Aliquam imperdiet, est.
Tincidunt, lacus diam cursus nisi, eget euismod lacus velit tristique lacus. Cras sit amet feugiat mauris. Nunc ipsum leo, rutrum non imperdiet eu, rutrum id lectus. Praesent.
Donec placerat velit ante, at fringilla neque. Mauris a consequat ligula. Phasellus nec mauris ut sapien fringilla condimentum. Suspendisse aliquet interdum rhoncus. Aenean enim lorem, ultricies id porta id, lacinia sed sapien. Vestibulum molestie dapibus eros, nec pellentesque sapien vestibulum aliquam. Sed at eros nibh. Vivamus congue consectetur elit sed imperdiet. Quisque tincidunt quam a.
Fermentum pharetra. Donec eleifend tempus purus id elementum. ed interdum quam quis erat congue lacinia. Donec vitae diam magna. Quisque ornare vestibulum nisl vitae pulvinar.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sodales aliquam mollis. Curabitur nibh velit, congue nec aliquam vitae, tempus vitae massa. Nam sed eros nibh, eget sodales risus. Sed ac quam viverra est tempor tristique sit amet eu dui. Proin id mauris nisl. Maecenas ultrices odio purus. Nam sem libro, tempor at tempor nec, aliqet eu sem.
Ante, placerat ultricies fermentum id, laoreet fringilla odio. Ut lacinia lorem ac magna ullamcorper eget cursus ante faucibus. Nam elit justo, adipiscing ac imperdiet eu, gravida.
Quisque consequat semper diam a laoreet. Integer eleifend, dolor in euismod dignissim, felis enim elementum ante, a viverra nunc libero nec magna. Aliquam metus purus, aliquam a convallis nec, eleifend sed massa. Vivamus vel nibh eget felis ultricies tempus. Donec nibh urna, rutrum vestibulum consectetur condimentum, pellentesque in dui. Vestibulum ante ipsum primis in faucibus orci luctus.
Posuere cubilia Curae; Proin mollis enim ultrices sem congue consectetur. Pellentesque tempor imperdiet leo congue feugiat. Pellentesque ante odio, lacinia in fermentum sit amet.
Nulla facilisi. Integer est nulla, dignissim eu adipiscing ut, tempor sed augue. Phasellus vestibulum, diam hendrerit iaculis sodales, diam tortor blandit augue, ut blandit orci neque in justo. Sed aliquam, erat congue feugiat rutrum, ligula lacus vehicula est, vitae ullamcorper orci magna non nisi. Etiam vulputate nulla sed mauris bibendum faucibus nec eu est. Integer dictum mauris ac.
Sapien auctor non condimentum metus porttitor. In consectetur sem a sem commodo rhoncus. Fusce fermentum, nibh sit amet tempus laoreet, neque tellus auctor neque, eget vehicula.
In sollicitudin dignissim dapibus. Etiam bibendum, sapien in posuere faucibus, tellus est consectetur felis, et vestibulum sapien felis a orci. In hac habitasse platea dictumst. In rutrum, lectus vitae iaculis lacinia, tortor ipsum accumsan velit, sit amet mollis nunc massa nec diam. Nulla interdum aliquet magna, ac ultrices leo venenatis venenatis. Praesent volutpat feugiat rutrum.
Neque, a tristique est tristique sed. Phasellus velit sapien, tempus eget semper vel, fringilla sit amet purus. Donec eget mauris mi, viverra cursus elit. Maecenas ac nisi id.
Cras placerat dui eget ligula pharetra vitae ultrices odio faucibus. Phasellus nisi metus, mollis quis convallis eget, tempor et neque. Vestibulum sodales eleifend lectus, a bibendum tellus scelerisque quis. Vestibulum ultricies nibh tincidunt odio aliquam ut lobortis ipsum vestibulum. Nulla facilisi. Sed ut erat nisi, a mollis nibh. Morbi mattis, nulla quis interdum pellentesque, lectus.
Mauris lacinia leo, eget sodales libero quam venenatis est. Donec hendrerit consectetur libero vel malesuada. Sed in velit lectus, vitae adipiscing nulla. Aliquam nec enim varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio ac eros lacinia hendrerit in non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare metus mollis magna tristique nec congue nisi dapibus. Nam urna enim, sodales nec tempus a, aliquam a nibh. Donec placerat volutpat lacus eget ornare. Mauris ut imperdiet nisi. Morbi iaculis placerat venenatis.
Quisque in odio quis arcu viverra ullamcorper. Maecenas vel tellus metus, non lacinia sem. Pellentesque ante odio, lacinia in fermentum sit amet, semper in tortor. Sed et augue.
Bottom Tabs Configuration
In the example below, Tab Position is set to Bottom, Autoplay set to Yes, Transition type set to Fading, and Theme Style set to Light.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce at augue lectus, vitae placerat dolor. Morbi nec turpis a orci tempor scelerisque sed in lectus. Duis nec tellus non metus lobortis dapibus id eget libero. Quisque facilisis, elit at molestie porttitor, augue felis consectetur leo, sed dictum urna metus ac arcu. Nulla facilisi. Aliquam imperdiet, est.
Tincidunt, lacus diam cursus nisi, eget euismod lacus velit tristique lacus. Cras sit amet feugiat mauris. Nunc ipsum leo, rutrum non imperdiet eu, rutrum id lectus. Praesent.
Donec placerat velit ante, at fringilla neque. Mauris a consequat ligula. Phasellus nec mauris ut sapien fringilla condimentum. Suspendisse aliquet interdum rhoncus. Aenean enim lorem, ultricies id porta id, lacinia sed sapien. Vestibulum molestie dapibus eros, nec pellentesque sapien vestibulum aliquam. Sed at eros nibh. Vivamus congue consectetur elit sed imperdiet. Quisque tincidunt quam a.
Fermentum pharetra. Donec eleifend tempus purus id elementum. ed interdum quam quis erat congue lacinia. Donec vitae diam magna. Quisque ornare vestibulum nisl vitae pulvinar.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sodales aliquam mollis. Curabitur nibh velit, congue nec aliquam vitae, tempus vitae massa. Nam sed eros nibh, eget sodales risus. Sed ac quam viverra est tempor tristique sit amet eu dui. Proin id mauris nisl. Maecenas ultrices odio purus. Nam sem libro, tempor at tempor nec, aliqet eu sem.
Ante, placerat ultricies fermentum id, laoreet fringilla odio. Ut lacinia lorem ac magna ullamcorper eget cursus ante faucibus. Nam elit justo, adipiscing ac imperdiet eu, gravida.
Quisque consequat semper diam a laoreet. Integer eleifend, dolor in euismod dignissim, felis enim elementum ante, a viverra nunc libero nec magna. Aliquam metus purus, aliquam a convallis nec, eleifend sed massa. Vivamus vel nibh eget felis ultricies tempus. Donec nibh urna, rutrum vestibulum consectetur condimentum, pellentesque in dui. Vestibulum ante ipsum primis in faucibus orci luctus.
Posuere cubilia Curae; Proin mollis enim ultrices sem congue consectetur. Pellentesque tempor imperdiet leo congue feugiat. Pellentesque ante odio, lacinia in fermentum sit amet.
Nulla facilisi. Integer est nulla, dignissim eu adipiscing ut, tempor sed augue. Phasellus vestibulum, diam hendrerit iaculis sodales, diam tortor blandit augue, ut blandit orci neque in justo. Sed aliquam, erat congue feugiat rutrum, ligula lacus vehicula est, vitae ullamcorper orci magna non nisi. Etiam vulputate nulla sed mauris bibendum faucibus nec eu est. Integer dictum mauris ac.
Sapien auctor non condimentum metus porttitor. In consectetur sem a sem commodo rhoncus. Fusce fermentum, nibh sit amet tempus laoreet, neque tellus auctor neque, eget vehicula.
In sollicitudin dignissim dapibus. Etiam bibendum, sapien in posuere faucibus, tellus est consectetur felis, et vestibulum sapien felis a orci. In hac habitasse platea dictumst. In rutrum, lectus vitae iaculis lacinia, tortor ipsum accumsan velit, sit amet mollis nunc massa nec diam. Nulla interdum aliquet magna, ac ultrices leo venenatis venenatis. Praesent volutpat feugiat rutrum.
Neque, a tristique est tristique sed. Phasellus velit sapien, tempus eget semper vel, fringilla sit amet purus. Donec eget mauris mi, viverra cursus elit. Maecenas ac nisi id.
Cras placerat dui eget ligula pharetra vitae ultrices odio faucibus. Phasellus nisi metus, mollis quis convallis eget, tempor et neque. Vestibulum sodales eleifend lectus, a bibendum tellus scelerisque quis. Vestibulum ultricies nibh tincidunt odio aliquam ut lobortis ipsum vestibulum. Nulla facilisi. Sed ut erat nisi, a mollis nibh. Morbi mattis, nulla quis interdum pellentesque, lectus.
Mauris lacinia leo, eget sodales libero quam venenatis est. Donec hendrerit consectetur libero vel malesuada. Sed in velit lectus, vitae adipiscing nulla. Aliquam nec enim varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio ac eros lacinia hendrerit in non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare metus mollis magna tristique nec congue nisi dapibus. Nam urna enim, sodales nec tempus a, aliquam a nibh. Donec placerat volutpat lacus eget ornare. Mauris ut imperdiet nisi. Morbi iaculis placerat venenatis.
Quisque in odio quis arcu viverra ullamcorper. Maecenas vel tellus metus, non lacinia sem. Pellentesque ante odio, lacinia in fermentum sit amet, semper in tortor. Sed et augue.
- Tab Number Eight
- Tab Number Seven
- Tab Number Six
- Tab Number Five
- Tab Number Four
- Tab Number Three
- Tab Number Two
- Tab Number One
Hidden Tabs Configuration
In the example below, Tab Position is set to Hidden, Autoplay set to Yes, Transition type set to Fading, and Theme Style set to Light.
- Tab Number Eight
- Tab Number Seven
- Tab Number Six
- Tab Number Five
- Tab Number Four
- Tab Number Three
- Tab Number Two
- Tab Number One
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce at augue lectus, vitae placerat dolor. Morbi nec turpis a orci tempor scelerisque sed in lectus. Duis nec tellus non metus lobortis dapibus id eget libero. Quisque facilisis, elit at molestie porttitor, augue felis consectetur leo, sed dictum urna metus ac arcu. Nulla facilisi. Aliquam imperdiet, est.
Tincidunt, lacus diam cursus nisi, eget euismod lacus velit tristique lacus. Cras sit amet feugiat mauris. Nunc ipsum leo, rutrum non imperdiet eu, rutrum id lectus. Praesent.
Donec placerat velit ante, at fringilla neque. Mauris a consequat ligula. Phasellus nec mauris ut sapien fringilla condimentum. Suspendisse aliquet interdum rhoncus. Aenean enim lorem, ultricies id porta id, lacinia sed sapien. Vestibulum molestie dapibus eros, nec pellentesque sapien vestibulum aliquam. Sed at eros nibh. Vivamus congue consectetur elit sed imperdiet. Quisque tincidunt quam a.
Fermentum pharetra. Donec eleifend tempus purus id elementum. ed interdum quam quis erat congue lacinia. Donec vitae diam magna. Quisque ornare vestibulum nisl vitae pulvinar.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sodales aliquam mollis. Curabitur nibh velit, congue nec aliquam vitae, tempus vitae massa. Nam sed eros nibh, eget sodales risus. Sed ac quam viverra est tempor tristique sit amet eu dui. Proin id mauris nisl. Maecenas ultrices odio purus. Nam sem libro, tempor at tempor nec, aliqet eu sem.
Ante, placerat ultricies fermentum id, laoreet fringilla odio. Ut lacinia lorem ac magna ullamcorper eget cursus ante faucibus. Nam elit justo, adipiscing ac imperdiet eu, gravida.
Quisque consequat semper diam a laoreet. Integer eleifend, dolor in euismod dignissim, felis enim elementum ante, a viverra nunc libero nec magna. Aliquam metus purus, aliquam a convallis nec, eleifend sed massa. Vivamus vel nibh eget felis ultricies tempus. Donec nibh urna, rutrum vestibulum consectetur condimentum, pellentesque in dui. Vestibulum ante ipsum primis in faucibus orci luctus.
Posuere cubilia Curae; Proin mollis enim ultrices sem congue consectetur. Pellentesque tempor imperdiet leo congue feugiat. Pellentesque ante odio, lacinia in fermentum sit amet.
Nulla facilisi. Integer est nulla, dignissim eu adipiscing ut, tempor sed augue. Phasellus vestibulum, diam hendrerit iaculis sodales, diam tortor blandit augue, ut blandit orci neque in justo. Sed aliquam, erat congue feugiat rutrum, ligula lacus vehicula est, vitae ullamcorper orci magna non nisi. Etiam vulputate nulla sed mauris bibendum faucibus nec eu est. Integer dictum mauris ac.
Sapien auctor non condimentum metus porttitor. In consectetur sem a sem commodo rhoncus. Fusce fermentum, nibh sit amet tempus laoreet, neque tellus auctor neque, eget vehicula.
In sollicitudin dignissim dapibus. Etiam bibendum, sapien in posuere faucibus, tellus est consectetur felis, et vestibulum sapien felis a orci. In hac habitasse platea dictumst. In rutrum, lectus vitae iaculis lacinia, tortor ipsum accumsan velit, sit amet mollis nunc massa nec diam. Nulla interdum aliquet magna, ac ultrices leo venenatis venenatis. Praesent volutpat feugiat rutrum.
Neque, a tristique est tristique sed. Phasellus velit sapien, tempus eget semper vel, fringilla sit amet purus. Donec eget mauris mi, viverra cursus elit. Maecenas ac nisi id.
Cras placerat dui eget ligula pharetra vitae ultrices odio faucibus. Phasellus nisi metus, mollis quis convallis eget, tempor et neque. Vestibulum sodales eleifend lectus, a bibendum tellus scelerisque quis. Vestibulum ultricies nibh tincidunt odio aliquam ut lobortis ipsum vestibulum. Nulla facilisi. Sed ut erat nisi, a mollis nibh. Morbi mattis, nulla quis interdum pellentesque, lectus.
Mauris lacinia leo, eget sodales libero quam venenatis est. Donec hendrerit consectetur libero vel malesuada. Sed in velit lectus, vitae adipiscing nulla. Aliquam nec enim varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio ac eros lacinia hendrerit in non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare metus mollis magna tristique nec congue nisi dapibus. Nam urna enim, sodales nec tempus a, aliquam a nibh. Donec placerat volutpat lacus eget ornare. Mauris ut imperdiet nisi. Morbi iaculis placerat venenatis.
Quisque in odio quis arcu viverra ullamcorper. Maecenas vel tellus metus, non lacinia sem. Pellentesque ante odio, lacinia in fermentum sit amet, semper in tortor. Sed et augue.
Dark Style: Top Tabs Configuration
In the example below, Tab Position is set to Top, Autoplay set to Yes, Transition type set to Scrolling, and Theme Style set to Dark.
- Tab Number Eight
- Tab Number Seven
- Tab Number Six
- Tab Number Five
- Tab Number Four
- Tab Number Three
- Tab Number Two
- Tab Number One
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce at augue lectus, vitae placerat dolor. Morbi nec turpis a orci tempor scelerisque sed in lectus. Duis nec tellus non metus lobortis dapibus id eget libero. Quisque facilisis, elit at molestie porttitor, augue felis consectetur leo, sed dictum urna metus ac arcu. Nulla facilisi. Aliquam imperdiet, est.
Tincidunt, lacus diam cursus nisi, eget euismod lacus velit tristique lacus. Cras sit amet feugiat mauris. Nunc ipsum leo, rutrum non imperdiet eu, rutrum id lectus. Praesent.
Donec placerat velit ante, at fringilla neque. Mauris a consequat ligula. Phasellus nec mauris ut sapien fringilla condimentum. Suspendisse aliquet interdum rhoncus. Aenean enim lorem, ultricies id porta id, lacinia sed sapien. Vestibulum molestie dapibus eros, nec pellentesque sapien vestibulum aliquam. Sed at eros nibh. Vivamus congue consectetur elit sed imperdiet. Quisque tincidunt quam a.
Fermentum pharetra. Donec eleifend tempus purus id elementum. ed interdum quam quis erat congue lacinia. Donec vitae diam magna. Quisque ornare vestibulum nisl vitae pulvinar.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sodales aliquam mollis. Curabitur nibh velit, congue nec aliquam vitae, tempus vitae massa. Nam sed eros nibh, eget sodales risus. Sed ac quam viverra est tempor tristique sit amet eu dui. Proin id mauris nisl. Maecenas ultrices odio purus. Nam sem libro, tempor at tempor nec, aliqet eu sem.
Ante, placerat ultricies fermentum id, laoreet fringilla odio. Ut lacinia lorem ac magna ullamcorper eget cursus ante faucibus. Nam elit justo, adipiscing ac imperdiet eu, gravida.
Quisque consequat semper diam a laoreet. Integer eleifend, dolor in euismod dignissim, felis enim elementum ante, a viverra nunc libero nec magna. Aliquam metus purus, aliquam a convallis nec, eleifend sed massa. Vivamus vel nibh eget felis ultricies tempus. Donec nibh urna, rutrum vestibulum consectetur condimentum, pellentesque in dui. Vestibulum ante ipsum primis in faucibus orci luctus.
Posuere cubilia Curae; Proin mollis enim ultrices sem congue consectetur. Pellentesque tempor imperdiet leo congue feugiat. Pellentesque ante odio, lacinia in fermentum sit amet.
Nulla facilisi. Integer est nulla, dignissim eu adipiscing ut, tempor sed augue. Phasellus vestibulum, diam hendrerit iaculis sodales, diam tortor blandit augue, ut blandit orci neque in justo. Sed aliquam, erat congue feugiat rutrum, ligula lacus vehicula est, vitae ullamcorper orci magna non nisi. Etiam vulputate nulla sed mauris bibendum faucibus nec eu est. Integer dictum mauris ac.
Sapien auctor non condimentum metus porttitor. In consectetur sem a sem commodo rhoncus. Fusce fermentum, nibh sit amet tempus laoreet, neque tellus auctor neque, eget vehicula.
In sollicitudin dignissim dapibus. Etiam bibendum, sapien in posuere faucibus, tellus est consectetur felis, et vestibulum sapien felis a orci. In hac habitasse platea dictumst. In rutrum, lectus vitae iaculis lacinia, tortor ipsum accumsan velit, sit amet mollis nunc massa nec diam. Nulla interdum aliquet magna, ac ultrices leo venenatis venenatis. Praesent volutpat feugiat rutrum.
Neque, a tristique est tristique sed. Phasellus velit sapien, tempus eget semper vel, fringilla sit amet purus. Donec eget mauris mi, viverra cursus elit. Maecenas ac nisi id.
Cras placerat dui eget ligula pharetra vitae ultrices odio faucibus. Phasellus nisi metus, mollis quis convallis eget, tempor et neque. Vestibulum sodales eleifend lectus, a bibendum tellus scelerisque quis. Vestibulum ultricies nibh tincidunt odio aliquam ut lobortis ipsum vestibulum. Nulla facilisi. Sed ut erat nisi, a mollis nibh. Morbi mattis, nulla quis interdum pellentesque, lectus.
Mauris lacinia leo, eget sodales libero quam venenatis est. Donec hendrerit consectetur libero vel malesuada. Sed in velit lectus, vitae adipiscing nulla. Aliquam nec enim varius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio ac eros lacinia hendrerit in non risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare metus mollis magna tristique nec congue nisi dapibus. Nam urna enim, sodales nec tempus a, aliquam a nibh. Donec placerat volutpat lacus eget ornare. Mauris ut imperdiet nisi. Morbi iaculis placerat venenatis.
Quisque in odio quis arcu viverra ullamcorper. Maecenas vel tellus metus, non lacinia sem. Pellentesque ante odio, lacinia in fermentum sit amet, semper in tortor. Sed et augue.
Requirements
The requirements for the extension are listed below:-
- Joomla 1.5x - Ensure that you are using the latest version for compatibility and security purposes from Joomla.org
More Information
For more details on the extensions, please visit the following:-
Live Examples
RokTabs, with its default styling, is shown above. The appearance will be standard across all Joomla sites, unless the template you are using has individualised CSS and images to provide an integrated, rather than generic look, for the extension.
Note: the examples shown below are styles from the Joomla Template Club themes only and do not accompany the free module itself.
- Refraction - the June 2009 release which features RokTabs in the user8 position. The module had been adapted to suit Refraction's transparent design and also sports javascript enhanced form elements. The module always exhibits a two fold styling for the tabs, a conservative approach when arrows are not required and a more robust structure when they are required.
- SolarSentinel - the May 2009 release were RokTabs is showcased in the user1 position, which is situated above the mainbody. The CSS provided a more visually distinct and comprehensive structure and layout.
- Mynxx - the April 2009 release places RokTabs in the mainbody. The modular design allowed the extension to take on a primary content role, replacing the mainbody articles with tabbed items.
- Meridian - the March 2009 release also shows the module in the mainbody and has similar styling to default new to the neutral, conservative design.
- Akiraka - the February 2009 release was RokTabs's debut with it being the first RocketTheme template to feature the module.
|
