Tutorial: Moo Register Tabs Version 2
Posted: Wed 31. Dec 2008, 08:46
Based on pepes great Tutorial (http://forum.phpwcms.org/viewtopic.php?f=10&t=17443) I've created an own version of tabs. I would not say, it is better to do it this way, but it is an option. Anyway... Thanks pepe for the inspiration.
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"
- Copy the 3 JavaScripts from the downloaded package to template/inc_js/moo_fx/
. Open your page layout and add to your blocks custom:
- Add this to your template header:
- Add after {CONTENT} This:
- For Custom Block "XTAB_TITLE {XTAB_TITLE}" add:
- For Custom Block "XTAB1 {XTAB1}" add:
- For Custom Block "XTAB2 {XTAB2}" add:
- For Custom Block "XTAB3 {XTAB3}" add:
- For Custom Block "XTAB4 {XTAB4}" add:
- For Custom Block "XTAB_LAST {XTAB_LAST}" add:
- Create a CP html and select "XTAB_TITLE" from the dropdown menü "Display:"
- Enter this html:
In this tutorial, I just want 3 tabs. I have to wrap the last two tabs with
- Add CPs you would like to have in your 1st tab and select "XTAB1" from the dropdown menü "Display:"
- 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
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