Web 2 comes with extensive use of javasript technologies. They make web more eye catching, more clearly organized and, in some cases, even faster.One of these technologies brings the possibility to present information in the so called tabs. There are a lot of javascript libraries offering it. It is natural to use effects that are built in Joomla! In Joomla! 1.5 there is implemented mootools javasript library.
There are many implementation of “motools tabs” (just search in Google). There are many Joomla! extensions, plugins and modules, that uses them. You do not need these specialized extensions. Jumi can do that too. Can insert tabs in Joomla anywhere. And it is really simple.
Let’s take for example SimpleTabs implementation.
To use SimpleTabs you have to: A) inject some js and css code (SimpleTabs.js, SimpleTabs.css) into the <head> Joomla! section, B) initialize object (again into the <head>) by a javascript and C) use it.
A + B: The code.
Make use of Joomla! 1.5 document object and its methods:
global $mainframe;
$document = &JFactory::getDocument();
$document->addStyleSheet( …); // for SimpleTabs.css
$document->addScript(…); //for SimpleTabs.js
$document->addCustomTag(...); // for initialization script – see SimpleTabs developer pages.
Documentation to document object with examples can be found here. The whole php script implementing SimpleTabs into Joomla! represents some 15 lines of uncompressed code. Easy, isn't it? Why to bother about specialized extensions?
C: And usage?
If your entrySelector: 'h3' then write Joomla! content as you always write. Remember only that every h3 tag changes itself into the tab when displayed in Joomla! frontend. For example the whole content of the article can look like this:
{jumi [mytabs.php]}
<h3>A</h3><p>Easy</p>
<h3>B</h3><p>motools tabs</p>
<h3>C</h3><p>with Jumi</p>
The result depends on your SimpleTabs.css file. It could be like image on the right.
Remark: I am using SimpleTabs with various css layouts on my pages. Choosing which one I do via jumi argument: {jumi [mytabs.php] [cssselector]}
9 comments:
Excellent posting! I love it! Congratulations!!! Have a nice weekend.
Hello,
I am very interested in adding this functionality to my site. Unfortunately I don't understand the code very well.
Can you please post the sample mytabs.php you used in th example? I hope I can take it from there :)
------
{jumi [mytabs.php]}
------
Also, my template (rockettheme) uses mootools 111. Do I have to add a link to mootools 1.2 in my jumi page? Any advice about conflicts?
Thank you. Great work!
ell let's start.
We need css, php a and js files.
I have to table layouts in my tabs.css:
tgeneral and tservices and I can switch between them in Joomla! articles:
----------------------
/* TGENERAL*/
#tgeneral {margin:1em 0px;}
/* The wrapper around all tab content*/
#tgeneral .tab-wrapper{padding:1em 15px;border:1px solid #CACACC;background:#F6F6F6;}
/* The menu strip with the individual tabs*/
#tgeneral ul.tab-menu{list-style:none;padding:2px 0 0 8px;clear:both;margin:0;}
/* The individual tabs */
#tgeneral ul.tab-menu li{display: inline;margin: 0 2px;background:none;padding:0;}
#tgeneral ul.tab-menu li a{background:#004A66;font-weight:bold;padding:1px 5px;text-decoration:none;border:1px solid #CACACC;border-bottom:1px solid #004A66;color:#C3DFED;}
#tgeneral ul.tab-menu li a:hover, #tgeneral ul.tab-menu li a:focus {text-decoration:none;background:#F6F6F6;color:#CC0000;border-bottom:1px solid #F6F6F6;}
#tgeneral ul.tab-menu li.tab-selected a {text-decoration:none;color:#CC0000;padding:3px 5px; border-bottom:none;background:#F6F6F6;}
/* TSERVICES*/
#tservices {margin:1em 0px; border-bottom: 1px #CACACC solid;}
#tservices .tab-wrapper {padding: 1em 0;}
#tservices .tab-menu {list-style:none;padding:O;clear:both; text-align: right; border-bottom: 1px #CACACC solid;margin:0;}
#tservices ul.tab-menu li {display:inline;background:none;}
#tservices ul.tab-menu li.tab-selected a {color:#CC0000;}
Now tabs.php. It is:
------------------
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
//tservices,tgeneral
function add_tabs_head($what){
$tabs_root = JURI::base().'images/tabs/';
global $mainframe;
$document = &JFactory::getDocument();
$document->addStyleSheet( $tabs_root . 'tabs.css', 'text/css');
$document->addScript( $tabs_root . 'tabs.js' );
$script="<script type='text/javascript'>
window.addEvent('domready', function() {
var tabule = new SimpleTabs($('".$what."'), {show:0, entrySelector: 'h3'})
});
</script>";
$document->addCustomTag($script);
}
add_tabs_head($jumi[0]);
?>
----------------------
And in he article I write:
---------------
{jumi [tabs.php] [tgeneral]}
<div id="tgeneral">
<h3 title="title one">First</h3>
content 1
<h3 title="title two">Second</h3>
content 2
<h3 title="title three">Third</h3>
content 3
</div>
---------------
So I can switch between table layouts in the article.
I am using digitaral.de SimpleTabs ver. 1.0 that are running under mootools 1.11. That means there is no need to switch to mootools 1.2 under Joomla 1.5.
Hope this helps.
I love Jumi and am getting to use it more and more as I learn how to code a bit more. However, I really can't get this to work at all. The simpletabs javascript doesn't seem to create the tabs. Are there any basic steps that I might have missed? Can you (MarHaj) post your tabs.js too? I've got the simpletabs one from the linked site but...
Mattfaulds,
I'd like to. But Blogger comment features do not enable attaching files (at the least in current setup).
Write me an email to [info at vedeme dot cz] I will send files to you ASAP.
Looks great!
is it also possible to display the tabs at the bottom of the content?
thanx
Piet, definitely.
You can place these tabs into any place you are able to place html block of code.
Thanx for the quick reply.
But what I mean is that the content related tot the tab is displayed above the tab and not underneath the tabs(as standard).. is it possible (in Joomla)?
Thanx in advance!
http://www.vietnambookingtour.com
this is site using tab content in article
Post a Comment