JU Tabs - Config

JUTabs general settings

JUTabs advanced settings

 

JU Tabs Plugin

Features:

Allows to use Tabs/Accordion/Simple slideshow anywhere. Supports multi types of content: Module name/Module id/Article id/Category/K2Item id/K2 category/Custom URL/HTML content. Multi themes and many effects. Every plugin option can be overwrited.

To create new tab theme, go to plugins/system/jutabs/tabs/themes/ , duplicate default folder then edit css files inside.

Usage Instructions:

Requirements: Joomla! 2.5.x, Joomla! 3.x
This module require jQuery javascript library to work. If jQuery has not been loaded on your site, you should install Plugin JU Load jQuery.

{jutabs param01="value01" param02="value02" param03="value03"}
[tab title="Tab 01"]Tab content 01[/tab]
[tab title="Tab 02"]Tab content 02[/tab]
[tab title="Tab 03"]Tab content 03[/tab]
{/jutabs}

JU Tabs has 2 layers of param.
- Layer 1: The default params are plugin params that you are setting in this JU Tabs plugin, they are general settings for all tabs on your site.
- Layer 2: The plugin code params that you can set via each plugin code, it can be different between each plugin code.
If a param is set in plugin code, JU Tabs will force to use that param, regardless the value in plugin setting.
If a param is NOT set in plugin code, JU Tabs will be fallback to use value in this plugin setting(general setting).
You can see the param of each plugin option and explanation for each option by hover mouse to each field label.

Example for overwriting params use plugin code (Layer 2):
1. To overwite Default item option, you can add this param: defaultitem="2"
2. To overwite Tab effect option, you can add this param: type="slidehorizontal"
3. To overwite Next item animation transition option, you can add this param: nextitemeasing="easeInBounce"
4. ...

Note:
  • Every tabs params/values is lower case, except values of Current item animation transition/Next item animation transition is case sensitivity.
  • If you copy code from examples below, you should paste it to article use Code editor mode (press Toggle editor button), it may not work properly if you paste it in HTML editor mode


Parameters are not listed in plugin options:
(These params are dynamic settings for each jutab)

  • loadcontent="moduleid/modulename/moduleposition/articleid/catid/k2itemid/k2catid:corresponding values seperate by commas"
    If you specify a pair of type:value for loadcontent param, JU Tabs will generate tabs based on type:value and ignore sub tab content.
    If you do NOT specify a pair of type:value for loadcontent param, JU Tabs will generate tabs based on sub tab content: [tab]...[/tab]
    You can use loadcontent(with single value) for each sub tab in mixed content mode, by this way you can load many types of content into tab. For example: load both module, article, k2item into tabs.
    If you load modules into tabs, please make sure that modules have been assigned to the pages that showing JU Tabs. If module only used to be loaded into JU Tabs, we recommend you assign it to all pages.

    Example for loadcontent:
  • loadcontent="moduleid:10,11,12"
    Load moduleid:10,11,12 into tabs
  • loadcontent="modulename:mod_custom,mod_search"
    Load modulename:mod_custom,mod_search into tabs
  • loadcontent="moduleposition:positionA,positionB"
    Load moduleposition:positionA,positionB into tabs
  • loadcontent="articleid:10,11,12"
    Load articleid:10,11,12 into tabs
  • loadcontent="catid:10,11,12"
    Load catid:10,11,12 into tabs
  • loadcontent="k2itemid:10,11,12"
    Load k2itemid:10,11,12 into tabs
  • loadcontent="k2catid:10,11,12"
    Load k2catid:10,11,12 into tabs
  • loadcontent="sql:SQL_Query"
    Load result of SQL_Query into tabs. title column will be assigned to title of tabs, content column will be assigned to content of tabs.
    Notice: Load content from SQL is disabled by default, and it does not support Ajax load. If you need to use this feature, you need to set: Loadcontent SQL: Yes This feature only accepts SELECT query, and due security reason, you if you enable this feature, we highly recommend you to change the SQL Keyword, so only who know this keyword can use this feature.

Sample tabs:

1. Load moduleids

{jutabs loadcontent="moduleid:10,11,12" position="top" changetab="click" effect="movehorizontal"} {/jutabs}

2. Load modulenames

{jutabs loadcontent="modulename:mod_custom,mod_search,mod_login" position="left" widthtabs="150px" changetab="mouseover" effect="fade"} {/jutabs}

3. Load modulepositions

{jutabs loadcontent="moduleposition:position-7" position="bottom" defaultitem="2"} {/jutabs}

4. Load articleids

{jutabs loadcontent="articleid:30,34,36,40" position="right" widthtabs="150px" width="600px" tabclass="0:redtab,1:bluetab,2:greentab"} {/jutabs}

5. Load catids

{jutabs loadcontent="catid:11,12" position="top" maxitems="5" view="introtext" ajax="true"} {/jutabs}

6. Load k2itemids

{jutabs loadcontent="k2itemid:15,16,17,18" view="fulltext" ajax="true"} {/jutabs}

7. Load k2catids

{jutabs loadcontent="k2catid:17,18" position="top" maxitems="7" view="introtext"} {/jutabs}

8. Load sql

{jutabs loadcontent="sql:SELECT name AS title, description AS content FROM #__mytable ORDER BY name ASC LIMIT 0,10" position="top" maxitems="7"} {/jutabs}

9. HTML content

{jutabs position="top" height="400px"}
[tab title="Tab title 01"]<img src="/extensions/image01.jpg" alt="Image01">Tab content 01[/tab]
[tab title="Tab title 02"]<img src="/extensions/image02.jpg" alt="Image02">Tab content 02[/tab]
[tab title="Tab title 03"]<img src="/extensions/image03.jpg" alt="Image03">Tab content 03[/tab]
{/jutabs}

10. Load mixed content
JU Tabs also supports to load mixed content into sub tab. Use loadcontent param (with single value) in each sub tab
  • a. Use loadcontent="moduleid:module_id" to load module id into tab
  • b. Use loadcontent="modulename:mod_module_name" to load module name into tab
  • c. Use loadcontent="articleid:article_id,introtext/fulltext" to load aritcle id into tab.
  • d. Use loadcontent="k2itemid:k2item_id,introtext/fulltext" to load k2item id into tab.
  • e. Use loadcontent="sql:SQL_Query" to load sql result into tab.
  • f. Use loadcontent="url:custom_url" to load custom_url id into tab
  • g. You even can use other content plugin within JU Tabs, just put the plugin code, and JU Tabs will auto parse it and load into tab.
For example:

{jutabs position="top" height="600px" ajax="true"}
[tab title="Moduleid tab" loadcontent="moduleid:10"]This is default content incase false to load.[/tab]
[tab title="Modulename tab" loadcontent="modulename:mod_custom"][/tab]
[tab title="Articleid tab" loadcontent="articleid:14,introtext"][/tab]
[tab title="K2itemid tab" loadcontent="k2itemid:26,fulltext"][/tab]
[tab title="SQL Query tab" loadcontent="sql:SELECT name AS title, description AS content FROM #__mytable LIMIT 0,1"][/tab]
[tab title="AnyURL tab" loadcontent="url:http://google.com"][/tab]
[tab title="HTML tab"]<b>This is html content</b>[/tab]
[tab title="Content plugin tab"]An example to use content plugin code in JU Tabs: {rsform 1}[/tab]
{/jutabs}

11. Accordion type
Vertical mode:

{jutabs type="accordion" accordionmode="vertical"}
[tab title="Tab title 01"]<img src="/extensions/image01.jpg" alt="Image01">Tab content 01[/tab]
[tab title="Tab title 02"]<img src="/extensions/image02.jpg" alt="Image02">Tab content 02[/tab]
[tab title="Tab title 03"]<img src="/extensions/image03.jpg" alt="Image03">Tab content 03[/tab]
{/jutabs}

Horizontal mode:
(You must specify a height value in this mode)

{jutabs type="accordion" accordionmode="horizontal" height="300px"}
[tab title="Tab title 01"]<img src="/extensions/image01.jpg" alt="Image01">Tab content 01[/tab]
[tab title="Tab title 02"]<img src="/extensions/image02.jpg" alt="Image02">Tab content 02[/tab]
[tab title="Tab title 03"]<img src="/extensions/image03.jpg" alt="Image03">Tab content 03[/tab]
{/jutabs}

12. Simple slideshow type

{jutabs type="slideshow"}
[tab title="Tab title 01"]<img src="/extensions/image01.jpg" alt="Image01">Tab content 01[/tab]
[tab title="Tab title 02"]<img src="/extensions/image02.jpg" alt="Image02">Tab content 02[/tab]
[tab title="Tab title 03"]<img src="/extensions/image03.jpg" alt="Image03">Tab content 03[/tab]
{/jutabs}

13. Nested tab
(Ajax load feature is not supported in nested tab)

{jutabs position="top" height="auto" ajax="false"}
  [tab title="Tab in tab"]
    {jutabs position="left" widthtabs="150px" height="auto" ajax="false"}
      [tab title="Moduleid tab" loadcontent="moduleid:108"][/tab]
      [tab title="Modulename tab" loadcontent="modulename:mod_custom"][/tab]
      [tab title="Articleid tab" loadcontent="articleid:11,introtext"][/tab]
      [tab title="K2itemid tab" loadcontent="k2itemid:8,fulltext"][/tab]
      [tab title="AnyURL tab" loadcontent="url:http://google.com"][/tab]
      [tab title="HTML tab"]This is html content[/tab]
    {/jutabs}
  [/tab]
  [tab title="Accordion in tab"]
    {jutabs type="accordion" accordionmode="vertical" ajax="false"}
      [tab title="Moduleid tab" loadcontent="moduleid:108"][/tab]
      [tab title="Modulename tab" loadcontent="modulename:mod_custom"][/tab]
      [tab title="Articleid tab" loadcontent="articleid:11,introtext"][/tab]
      [tab title="K2itemid tab" loadcontent="k2itemid:8,fulltext"][/tab]
      [tab title="AnyURL tab" loadcontent="url:http://google.com"][/tab]
      [tab title="HTML tab"]This is html content[/tab]
    {/jutabs}
  [/tab]
  [tab title="Slideshow in tab"]
    {jutabs type="slideshow" ajax="false"}
      [tab title="Moduleid tab" loadcontent="moduleid:108"][/tab]
      [tab title="Modulename tab" loadcontent="modulename:mod_custom"][/tab]
      [tab title="Articleid tab" loadcontent="articleid:11,introtext"][/tab]
      [tab title="K2itemid tab" loadcontent="k2itemid:8,fulltext"][/tab]
      [tab title="AnyURL tab" loadcontent="url:http://google.com"][/tab]
      [tab title="HTML tab"]This is html content[/tab]
    {/jutabs}
  [/tab]
{/jutabs}

 

Switch tab by Link/URL:

- Inside JUTabs, if you want to switch to another tab from current JUTabs by link, you can use the link: #jutabs-X, X is tab number you want to switch to, 0=First tab. For example, to switch to 2nd tab, you can use this link: <a href="#jutabs-1">Switch to 2nd tab</a>, you can also switch to next/prev tab use this link(next/prev tab to be switched to depends on the tab which you put the link): <a href="#jutabs-next">Switch to next tab</a> or <a href="#jutabs-prev">Switch to prev tab</a>

- Outside JUTabs, if you want to open a tab of a JUTabs by link, you can set tab name via tab param like this: {jutabs name="tabname" ...}...{/jutabs}, then use the link with name of tab like this to open tab: <a href="#tabname-1">Open 2nd tab of tabname</a>

- To open a tab when page load by URL:
1. Set name for tab: {jutabs name="tabname" ...}...{/jutabs}
2. For example: To open 2nd tab, use this link: http://yoursite.com/thePageContainsJUTabs/#tabname-1

Note: Tab name must be in [0-9][a-z][A-Z] and without space. When set tab name, make sure the tab name is unique if you have more than one tab in a page.