Публикуем плагин
В месте где хотим использовать табы....
{magictabs дополнительные параметры через запятую}Tabs 01 Имя таба 1::Контент внутри||||Имя таба 2::Контент внутри.......{/magictabs}
========================
Core Design Magic Tabs plugin for Joomla! 1.0
Description: This mambot (plugin) allow you easily to insert the nice tabs into your content.
Version: 1.0.0 (released on March 1th, 2008)
Author: Daniel Rataj,
www.greatjoomla.comInstructions
Notice: All styles are located in /mambots/cd_magictabs/css/ directory.
Notation:
This plugin using a very easily notation. To apply the tabs to your content use the notation bellow. Please remember, your "tabs" must be separated with "||||" (four "|"). And the names of tabs must be separeted from the text inside the tabs with "::" (two colons). See the example for an explication:
{magictabs}
TAB 01::Lorem ipsum dolor sit amet consectetuer nec eu magna consequat volutpat. Ut porttitor purus hendrerit nibh id sit id ultrices eu netus. Et eros cursus Sed sit adipiscing Vivamus ut magna Nulla nibh.
||||
TAB 02::Lorem ipsum dolor sit amet consectetuer nec eu magna consequat volutpat. Ut porttitor purus hendrerit nibh id sit id ultrices eu netus. Et eros cursus Sed sit adipiscing Vivamus ut magna Nulla nibh.
||||
TAB 03::Lorem ipsum dolor sit amet consectetuer nec eu magna consequat volutpat. Ut porttitor purus hendrerit nibh id sit id ultrices eu netus. Et eros cursus Sed sit adipiscing Vivamus ut magna Nulla nibh.
{/magictabs}
The default settings in plugin configuration can be overwritten by the settings specified by each tabs. Please write the following attributes to the "{magictabs...}" attribute. The allowed settings:
* style. One of predefined styles.
o style = lightblue_rounded
o style = darkblue_rounded
o style = blue_square
o style = brown_rounded
o style = black_rounded
o style = pink_rounded
o style = simplegold_rounded
o style = orange_rounded
o style = snowed_rounded
o style = wave_rounded
o style = darkred_square
* mode. Mode to tab preview.
o mode = slide
o mode = fade
o mode = both
* width. Box width. The allowed units are px, % and em.
o width = 300px
o width = 10em
o width = 80%
* width. Box height. The allowed units are px, % and em.
o height = 200px
o height = 5em
o height = 80%
* margin. Box margin. The align for your tab box. Cool to align to center - "0 auto". This setting is related to CSS margin attribute. The allowed units are px, % and em.
o margin = 0 auto -> align to center (it depends on your template too)
o margin = 10px 20px 30px 40px
o margin = 5em
o margin = 80%
* tabalign. Tab align. The postition for your tabs (to left or to right side).
o tabalign = left
o tabalign = right
* offset. Tab offset offset of first tab from edge. The allowed units are px, % and em.
o offset = 10px
o offset = 2em
o offset = 5%
* spacebetween. Tab space between tabs. The align for your tabs (to left or to right side) The allowed units are px, % and em.
o spacebetween = 5px
o spacebetween = 1em
o spacebetween = 10%
* select. Tab select. The number of selected tabs.
o select = 1 -> the first tab was marked as active, by default.
o select = 2 -> the second tab was marked as active.
o select = 3
o select = ...
* rotate. Tab rotate. The function to rotate the tabs (in milliseconds). The zero ("0") disable this function.
o rotate = 0 - > disable this function, by default
o rotate = 2000
o rotate = 3500
* event. Tab event. Define event to switch tabs.
o event = click
o event = mouseover
Examples
Default (without attributes):
See example above.
Style:
{magictabs style=lightblue_rounded}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs style=darkblue_rounded}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs style=brown_rounded}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Mode:
{magictabs mode=fade}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs mode=slide}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs mode=both}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Width and height:
{magictabs width=350px, height=120px}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs width=300px, height=80%}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs widht=100%}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs height=8em}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Margin:
{magictabs margin=0 auto}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs margin=10px}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs margin=15%}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Tab align:
{magictabs tabalign=left}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs tabalign=right}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Offset:
{magictabs offset=10px}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs offset=2em}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs offset=5%}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Spacebetween:
{magictabs spacebetween=3px}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs spacebetween=0.5em}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs spacebetween=5%}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Select:
{magictabs select=1}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs select=2}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Rotate:
{magictabs rotate=2000}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs rotate=3000}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs rotate=3500}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Event:
{magictabs event=click}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs event=mouseover}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Combination:
{magictabs width=300px, height=150px, event=mouseover}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs spacebetween=10px, rotate=3000, margin=0 auto}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs spacebetween=10px, rotate=3000, margin=0 auto}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
{magictabs mode=both, offset=10px, tabalign=right}Tabs 01:: The first text||||Tabs 02:: Text second text{/magictabs}
Changelog
Please visit our websites for more information.
Donate us
If you like this extension please visit author's site and consider to make a donation. Thanks.
13.03.2025, 20:06:50