What is different:
+/- The CP Register (Tabs) is NOT used
+/- Instead: Custom Blocks
+ No separate templates needed
+ No special PHP code needed
+ No separator needed
+ The html is tidy (no <div></div> wrapped with <h3></h3>
+ Only 1 separated CP html for the "Tab Titles" needed
- But it is possible to make something wrong with the code in this CP
+ Select the tab for the CP with dropdown menu. No move with arrows up/down needed.
- Limited numbers of tabs
+ But the number of tabs is extendable anytime
+ No separate templates needed
Prepare phpwcms
- Download the scripts and JS from TOYAs tutorial for moo.fx: http://www.nyokiglitter.com/tutorials/tabs.html
- Make sure your template has access to following CSS and the CSS has access to the image "greentab.jpg"
Code: Select all
#wrapper{
width: 500px;
margin: 0 auto;
}
.box{
background: #fff;
}
.boxholder{
clear: both;
padding: 5px;
background: #8DC70A;
}
.tab{
float: left;
height: 32px;
width: 102px;
margin: 0 1px 0 0;
text-align: center;
background: #8DC70A url(images/greentab.jpg) no-repeat;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 9px 0 0 0;
}
- Copy the 3 JavaScripts from the downloaded package to template/inc_js/moo_fx/
. Open your page layout and add to your blocks custom:
Code: Select all
XTAB_TITLE, XTAB1, XTAB2, XTAB3, XTAB4, XTAB_LAST
Code: Select all
<script type="text/javascript" src="template/inc_js/moo_fx/prototype.lite.js"></script>
<script type="text/javascript" src="template/inc_js/moo_fx/moo.fx.js"></script>
<script type="text/javascript" src="template/inc_js/moo_fx/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
Code: Select all
{XTAB_TITLE}{XTAB1}{XTAB2}{XTAB3}{XTAB4}{XTAB_LAST}
Code: Select all
<div id="wrapper">
<div class="content">
{XTAB_TITLE}
Code: Select all
<div class="boxholder">
<div class="box">
{XTAB1}
</div>
Code: Select all
<div class="boxholder">
<div class="box">
{XTAB2}
</div>
Code: Select all
<div class="boxholder">
<div class="box">
{XTAB3}
</div>
Code: Select all
<div class="boxholder">
<div class="box">
{XTAB4}
</div>
Code: Select all
<div class="box">
{XTAB_LAST}
</div>
</div>
</div>
</div>
<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>
- Enter this html:
Code: Select all
<div class="tab" title="first">
<div class="tabtxt"><a href="#">Tab 1</a></div></div>
<div class="tab"><div class="tabtxt" title="second"><a href="#">Tab 2</a></div></div>
<div class="tab"><div class="tabtxt" title="third"><a href="#">Tab 3</a></div></div>
<!--
<div class="tab"><div class="tabtxt" title="fourth"><a href="#">fourth</a></div></div>
<div class="tab"><div class="tabtxt" title="fifth"><a href="#">fifth</a></div></div>
-->
Code: Select all
<!-- -->
- Add CPs you would like to have in your 2nd tab and select "XTAB2" from the dropdown menü "Display:"
- Add CPs you would like to have in your 3rd tab and select "XTAB_LAST" from the dropdown menü "Display:"
------------------------------------------------------------------------------------------------------------------------------------------
"XTAB_LAST" is allways the last tab. In this tutorial, "XTAB3" for the 3rd tab would not work
------------------------------------------------------------------------------------------------------------------------------------------
Don't be surprised. Sometimes you have to log out from backend to see the tabs working. Or open the page with an other browser.
------------------------------------------------------------------------------------------------------------------------------------------
5 Tabs not enough? Add more Custom Blocks
------------------------------------------------------------------------------------------------------------------------------------------
Maybe this tutorial is useful. Enjoy
Ralph