Details: Category: Plugins; Published on Wednesday, 15 December 2010 07:32; Written by Super User; Hits: 6520

Having been integrated into our templates (i.e JA Teline II, JA Iolite etc.,), the extension JA Tab has shown its huge capacity for adaptability into Joomla! templates. It helps to sweep away boring static text, yet does not create so much animation that might cause unpleasant feeling to visitors of your site.

The extension enables to load specified modules, categories, contents and even your own defined text. All of them are rendered flexibly in tabs with fading effect, or displayed in horizontal or vertical block. The animation is active upon mouseover or cursor click, depending your configuration.

Features:

Support multi tabs, you can define tabs in Horizontal or Vertical block.
Animation effects in switching tabs: fading, left, right
Customizable themes: tabs block could be customized easily at your end.
Display any content, modules in a tab.
Load the whole category into block and spread category items to each tab.
Width and Height of block can be adjusted. In case of length content, JA Tabs can expand height automatically.
Easy-to-use and friendly HTML tags alike syntax.
Can be use anywhere, whether in content area or in module HTML code.

Parameter Options General

All parameter options for the Ja Tabs Plugin.

type: (modules, module, content, articles). The Ja Tabs type.
position: (top, left, right, bottom). Positon of the tabs. Default is top.
style: The JaTabs styling (basic). Default is basic.
width: Width of the tabs. It can be fixed or automatically. Example: empty or '100%' or '600'
height: Height of the tabs. It can be fixed or automatically. Example: empty or 'auto' or '400'.
widthTabs: Width of the tabs. It should be 'empty' for the 'Top/Bottom' position of tabs title and fixed (like '150') for the 'Left/Right' position of tabs title.
heightTabs: Height of the tabs. It should be 'empty' for 'Left/Right' position of tabs title and fixed (like '30' for 'Top/Bottom' position of tabs title.
duration (ms): Time interval of the transition effect when autoplay is on in milliseconds. Default is 1000.
animType: (animFade, animMoveHor, animMoveVir, none). Define the transition effect for the autoplay. Default is animMoveVir.
mouseType: (click, mouseover, none). Action behavior of the control panel. Default is click.
skipAnim: (true, false). Skip animation. Default is false.
ajax: (true, false). Setting "true" if you want to use ajax to load content of tabs (Not apply for HTML Content type). Default is false.
view: (introtext, fulltext). Apply for Articles.
color: Input the color for each tab in format: 1:color,2:green. The supported colors depend on the tab style.
module: Apply for type="modules". Input module position which will display in tabs. For example: articleslatestload.
modulename: Apply for type="module". Input one or more module names which are separated by comma. For example: mod_articles_news, mod_articles_latest.
ids: Apply for type="articles". Input one or more article IDs which are separated by comma. For example: 1, 2, 3, 4
catid: Apply for type="articles". Input one catergory from which you want to display their articles in tabs. For example: 1
maxitems: Maximum number of articles displaying

Demonstration

1. Type = modules

Code:

{ jatabs type="modules" module="ja_tab_plg" animType="animMoveHor"}

Demo:

Flowers 5
Flowers 4
Flowers 3
Flowers 1

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

2. Type = module

Code:

{ jatabs type="module" modulename="mod_flowers1,mod_flowers3,mod_flowers5" style="default" position="left" widthTabs="150" animType="animMoveVir"}{ /jatabs}

Demo:

Flowers 1
Flowers 3
Flowers 5

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

3. Type = content

Code:

{ jatabs type="content" style="tube" height="160" animType="animMoveHor"} [tab title="Entertainment"] Magna at molestie congue Ut vel adipiscing sit Pellentesque eu Sed... [/tab] [tab title="Travel"] Ipsum sagittis venenatis Phasellus pretium pretium Suspendisse lorem accumsan non montes...[/tab] [tab title="Artist"] Consequat ante ac ut sit vel molestie hendrerit et mollis Vestibulum... [/tab] { /jatabs}

Demo:

Entertainment
Travel
Artist

Magna at molestie congue Ut vel adipiscing sit Pellentesque eu Sed. Convallis mauris Vivamus felis massa volutpat malesuada justo Phasellus porttitor ligula. Quis Nulla Curabitur Cras sed vestibulum condimentum Donec et mattis Integer. A et pharetra dapibus mauris cursus adipiscing commodo faucibus nibh faucibus. Rutrum Proin ipsum Praesent nulla dignissim neque turpis venenatis condimentum Pellentesque. Pede laoreet senectus faucibus Cras id nec morbi et Nullam Phasellus. Quisque et pretium eni.

Ipsum sagittis venenatis Phasellus pretium pretium Suspendisse lorem accumsan non montes. Tellus ultrices Vestibulum at a porttitor ut pede elit nec laoreet. Egestas In semper auctor Pellentesque Quisque id In justo risus pretium. Id vitae Aliquam dui nibh eros et Phasellus eu sociis Curabitur. Curabitur mauris elit porta fringilla dictumst. Rhoncus tellus eros enim netus Phasellus Curabitur euismod tincidunt Aenean ante. Id vitae Aliquam dui nibh eros et Phasellus eu sociis Curabitur. Digniss.

Consequat ante ac ut sit vel molestie hendrerit et mollis Vestibulum. Laoreet leo ac pretium augue dolor nunc Sed tempor libero at. Gravida id malesuada Nulla enim enim nibh Nam vitae platea lacinia. Enim et vitae ligula laoreet congue Quisque Cras ipsum aliquam auctor. Libero ultrices dui tincidunt mauris commodo non semper gravida Donec nulla. Curabitur penatibus Nunc velit. Rhoncus Donec Curabitur in eu dui elit gravida wisi mi tempus. Enim sodales ligula Phasellus ligula Pellentesque Praes.

4. Type = articles

Code:

{ jatabs type="articles" ids="108,115" ajax=true view="introtext" position="right" widthTabs=150 animType="animMoveVir"} { /jatabs}

Demo:

JA Janrain Demo
JA Bookmark Demo

5. Type = articles

Code:

{ jatabs type="articles" catid="95" maxitems="3" view="introtext" position="botton" animType="animMoveHor" } { /jatabs}

Demo:

Giving something back
The Secret of Loro Piana Wool
Nutrition -- It's a matter of fact

alt Nascetur vel interdum vel ut nascetur velit Maecenas vitae risus a. Auctor facilisis et dolor semper in dignissim elit ante sit Quisque. Lacinia leo Ut Aenean eros ipsum interdum odio et Praesent condimentum. Vitae Quisque justo tincidunt suscipit nec enim est tellus sapien Pellentesque. Aenean dis nonummy metus senectus congue pellentesque id pellentesque Curabitur elit. Odio ac accumsan malesuada semper tortor risus hac ut eget feugiat. Nunc nunc congue in quis quis vitae semper tempor nunc quam. alt Nibh vitae metus eget ut condimentum eros tellus pede enim auctor. Vel platea mi dolor ut vitae fringilla metus pretium est elit. Ut Mauris elit ipsum Pellentesque nec porta ipsum massa risus nisl. At lacinia nulla porta Nam Nam porta at tristique ipsum ante. Libero euismod ac orci condimentum Vestibulum Nam et Praesent. Orci nibh tellus wisi dapibus justo Curabitur Praesent Nam Donec Quisque. Nulla orci sagittis pretium neque sapien orci nulla Vestibulum vitae at. Est Cum elit consectetuer consectetuer semper Maecenas augue enim felis Nam. Tortor pretium orci semper platea In condimentum mauris Integer wisi leo. Nibh leo a mauris ipsum justo convallis nunc at orci Fusce. Quis cursus condimentum mollis semper nulla elit congue urna sagittis eros. Fringilla. alt Nunc nunc congue in quis quis vitae semper tempor nunc quam. Quisque Sed convallis tellus hendrerit interdum Suspendisse felis fringilla metus cursus. Lobortis rhoncus porttitor Nunc Cum tellus ac neque feugiat ipsum quis. Ipsum lorem Vestibulum Nam lacinia Curabitur euismod eu urna neque nibh. Donec elit Integer malesuada eros dolor Suspendisse id ornare tincidunt Morbi. Nisl libero ac fermentum vel sed laoreet justo tempus magna. Pellentesque vitae Quisque Suspendisse consequat in metus cursus a ullamcorper tellus. At wisi quam molestie quis In Quisque vel euismod nibh ornare. Tincidunt at mauris accumsan tincidunt et felis sagittis fermentum sed Nulla. Et odio laoreet ligula justo consectetuer interdum ante lacus Vestibulum ac. Ligula tincidunt pede id id condimentum nulla elit porttitor dui eget. Et tincidunt urna elit Phasellus Vivamus egestas Pellentesque sit turpis. Lacinia vitae In ante ipsum Sed nec dapibus et orci dictumst. Vel lacus amet dictumst et sapien est ac Curabitur pellentesque ultrices. Feugiat convallis turpis massa ligula sagittis enim aliquet fringilla orci pretium. Ut Aenean Vestibulum suscipit eros pede et nibh laoreet Pellentesque mus. Aliquet ultrices dictumst justo justo tortor vitae nisl nec sem.

Nibh vitae metus eget ut condi eros tellus pede enim auctor. Vel platea mi dolor ut vitae fringilla metus pretium est elit. Ut Mauris elit ipsum Pellentesque nec porta ipsum Orci nibh tellus wisi dapibus justo Curabitur Praesent Nam Donec Quisque. Nulla orci sagittis pretium neque sapien orci nulla Vestibulum vitae at. Est Cum elit consectetuer consectetuer semper Maecenas augue enim felis Nam. Tortor pretium orci semper platea In condimentum mauris Integer wisi leo. Nibh leo a mauris ipsum justo convallis nunc at orci Fusce. Quis cursus condimentum mollis semper nulla elit congue urna sagittis eros. Fringilla. Nunc nunc congue in quis quis vitae semper tempor nunc quam. Quisque Sed convallis tellus hendrerit interdum Suspendisse felis fringilla metus cursus. Lobortis rhoncus porttitor Nunc Cum tellus ac neque feugiat ipsum quis. Ipsum lorem Vestibulum Nam lacinia Curabitur euismod eu urna neque nibh. Donec elit Integer malesuada eros dolor Suspendisse id ornare tincidunt Morbi. Nisl libero ac fermentum vel sed laoreet justo tempus magna. Pellentesque vitae Quisque Suspendisse consequat in metus cursus a ullamcorper tellus. At wisi quam molestie quis In Quisque vel euismod nibh ornare. Tincidunt at mauris accumsan tincidunt et felis sagittis fermentum sed Nulla. Et odio laoreet ligula justo consectetuer interdum ante lacus Vestibulum ac. Ligula tincidunt pede id id condimentum nulla elit porttitor dui eget. Et tincidunt urna elit Phasellus Vivamus egestas Pellentesque sit turpis. Lacinia vitae In ante ipsum Sed nec dapibus et orci dictumst. Vel lacus amet dictumst et sapien est ac Curabitur pellentesque ultrices. Feugiat convallis turpis massa ligula sagittis enim aliquet fringilla orci pretium. Ut Aenean Vestibulum suscipit eros pede et nibh laoreet Pellentesque mus. Aliquet ultrices dictumst justo justo tortor vitae nisl nec sem. Justo interdum mollis a enim volutpat Curabitur facilisi Aenean at elit. Justo est non dis elit ullamcorper tellus pharetra adipiscing eget ante. Neque libero natoque Nunc egestas fermentum senectus mauris at metus Integer. Velit quis Sed Sed Nam felis sagittis a Mauris ac rutrum. Nulla et habitant et tellus ipsum lacinia ac hendrerit Sed ac. Fames pellentesque et Aenean et neque convallis.
Read more

Proin augue Donec non nascetur congue dolor dignissim Aenean Duis consectetuer. Justo Vestibulum porta et pellentesque justo quis Vestibulum in wisi Donec. Elit interdum interdum sem cursus ut metus dignissim sit ut dignissim. Vestibulum consequat turpis commodo porttitor at ut laoreet at Vestibulum ligula. Condimentum mauris interdum velit elit massa non Aenean vitae ut vitae. Ut eros et tincidunt laoreet libero ac Cras In ornare in. alt

Turpis nonummy id Cras et Curabitur eu urna Vivamus dolor non. Est condimentum sit orci ac arcu Donec amet aliquam tristique Praesent. Dictum pulvinar dictum nibh orci arcu neque pede neque diam cursus. Quam mi consequat ut ante Curabitur accumsan ante Proin Phasellus dolor. Curabitur orci gravida aliquet auctor semper. Metus massa semper accumsan Cras egestas risus enim pretium pretium risus. Et libero elit ornare pretium massa Curabitur Nulla turpis sem et. Non Praesent elit convallis malesuada ac Donec ac vel sem natoque. Risus hendrerit augue eros felis tincidunt justo urna iaculis ligula porta. Tellus risus dictum eu elit Curabitur et. Tortor feugiat Vestibulum parturient sit vitae morbi eu lacus felis suscipit. Pretium laoreet et est scelerisque sapien mauris odio ornare Integer vestibulum. Quis justo massa at pretium lacinia Nulla eget congue montes semper. Aliquam cursus pede hendrerit ut nascetur ligula risus nibh libero ligula. Diam ut mauris a sagittis volutpat non pulvinar Vestibulum ut justo. Eu congue orci nascetur tellus Lorem. alt

Pretium non et condimentum enim at in euismod lacinia dictumst tempus. Magna amet neque suscipit Donec iaculis nunc mauris semper urna porttitor. Malesuada Sed metus venenatis ac tincidunt laoreet Nulla Phasellus ut semper. Rhoncus Mauris elit urna eu pulvinar dictum Quisque Vivamus porttitor amet. In Quisque turpis pede Nulla laoreet Quisque pellentesque sed.
Read more