Page 1 of 1

Tutorial: Moo Register Tabs Version 2

Posted: Wed 31. Dec 2008, 08:46
by santscho
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"

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
- Add this to your template header:

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>
- Add after {CONTENT} This:

Code: Select all

{XTAB_TITLE}{XTAB1}{XTAB2}{XTAB3}{XTAB4}{XTAB_LAST}
- For Custom Block "XTAB_TITLE {XTAB_TITLE}" add:

Code: Select all

<div id="wrapper">
	<div class="content">
	{XTAB_TITLE}
- For Custom Block "XTAB1 {XTAB1}" add:

Code: Select all

<div class="boxholder">
<div class="box">
{XTAB1}
		</div>
- For Custom Block "XTAB2 {XTAB2}" add:

Code: Select all

<div class="boxholder">
<div class="box">
{XTAB2}
		</div>
- For Custom Block "XTAB3 {XTAB3}" add:

Code: Select all

<div class="boxholder">
<div class="box">
{XTAB3}
		</div>
- For Custom Block "XTAB4 {XTAB4}" add:

Code: Select all

<div class="boxholder">
<div class="box">
{XTAB4}
		</div>
- For Custom Block "XTAB_LAST {XTAB_LAST}" add:

Code: Select all

<div class="box">
{XTAB_LAST}
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
	Element.cleanWhitespace('content');
	init();
</script>
- Create a CP html and select "XTAB_TITLE" from the dropdown menü "Display:"

- 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>
-->
:!: In this tutorial, I just want 3 tabs. I have to wrap the last two tabs with

Code: Select all

<!--  -->
- 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

Re: Tutorial: Moo Register Tabs Version 2

Posted: Wed 31. Dec 2008, 11:39
by markus s
runs the lightbox with this version ?
the prob i´ve seen with "pepes variante" is, that the lightbox does not run
with his version.
did you have an example ?
thx alot

Re: Tutorial: Moo Register Tabs Version 2

Posted: Wed 31. Dec 2008, 11:59
by santscho
:-( you are right man! the tabs are not working if lightbox is switched on in one of the tabs. Normal enlargement works.

h t t p: / / w w w .ugra.mediasolution{dot}com{dot}sg/tab-test.phtml#

Re: Tutorial: Moo Register Tabs Version 2

Posted: Wed 31. Dec 2008, 12:14
by markus s
im sorry...
to much scripts... (old motools).sht

Re: Tutorial: Moo Register Tabs Version 2

Posted: Wed 31. Dec 2008, 14:58
by pepe
Prima Variante, du hast dich ja an meinen Tipp gehalten:
... Wer diesen Lösungsansatz zum "Spielen" verwendet, wird sicher nicht dummer dabei! ...
Schade dass her nicht mehr User auf Vorhandenem aufbauen und die Lösungen dann auch posten...

Ich verwende in Letzter Zeit übrigens grundsätzlich für den ganzen Accordeon-Kram und vertikale und horizontale Slider "ADOBE SPRY"! Da funktionieren dann auch der BildPopUp aus den Containern heraus einwandfrei :-)
Der große Vorteil dieser Lösungen....
Sie sind wunderbar und mit eindeutigen Beispielen beschrieben, sodaß man sich die Möglichkeiten vor den eigenen Experimenten schon gut vorstelle kann.

Also Freunde, unbedigt mal das ADOBE SPRY downloaden!!!
So könnt ihr euch auch die kommenden Wochen gut vertreiben...
Eine sehr brauchbare Funktion in Zusammenspiel mit phpwcms kommt garantert dabei heraus!


PS @santscho
Natürlich hab ich mir deinen Ansatz herunterkopiert, halte ihn (besonders für NEWBEES) aber für NOCH verwirrender als meinen eigenen :-)
Trotzdem sind schöne neue Ansätze für mich dabei, die ich mal probieren will...
Überhaupt sind die CustomBlocks das eigentliche GENIALE an OGs phpwcms, wenn auch verkannt oder von den Meisten noch garnicht entdeckt...schade eigentlich.
Aber vielleicht auch der Beweis, dass die Masse der User garnicht so kompexes Gedöns benötigen, wie die Proggies immer glauben.

PPS @oldboys
Bei der Gelegenheit wünsche ich allen Usern, die mich noch kennen, einen GUTEN RUTSCH nach 2009, weiter eiserne Nerven und viel Inspiration (weniger Transpiration) beim Umsetzen von Internetpräsenzen mit phpwcms.

Re: Tutorial: Moo Register Tabs Version 2

Posted: Wed 31. Dec 2008, 17:42
by juergen
pepe wrote:Prima Variante, du hast dich ja an meinen Tipp gehalten.
:D Dir auch Pepe ein gutes Spray fürs neue Jahr

Re: Tutorial: Moo Register Tabs Version 2

Posted: Thu 1. Jan 2009, 06:39
by santscho
Eine Adobe Spry Variante hier:

h t t p://w w w. ugra.mediasolution(dot)com(dot)sg/tab-test-2.phtml

+ Schlanker Code
+ Verträgt sich mit LightBox

Was nicht geht: Unterdrücken benutzerdefinierter Listen-Bullets. Weiss jemand Rat?:

Generell ist für alle Listen im Content-Bereich definiert:

Code: Select all

#main li {
	list-style-image: url(images/list_bullet1.png);
}
schalte ich ich in der Tab-CSS die Bullets aus, geschieht nichts:
html-Ausgabe

Code: Select all

<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
</ul>
CSS

Code: Select all

.TabbedPanelsTab li {
	list-style-image: none;
}
EDIT: habe die Tabs in einen Container (#nobullet) gepackt.

Code: Select all

#nobullet li {
	list-style-image: none;
	list-style-type: none;
}
...dann gehts :-)

Re: Tutorial: Moo Register Tabs Version 2

Posted: Thu 1. Jan 2009, 13:25
by update
santscho wrote:Eine Adobe Spry Variante hier:

h t t p://w w w. ugra.mediasolution(dot)com(dot)sg/tab-test-2.phtml

+ Schlanker Code
+ Verträgt sich mit LightBox
Aber aber aber.... DAS geht doch auch mit dem eingebauten CP TABS :shock: . Da braucht man doch kein Tab-Spray für!
Was nicht geht, ist die nyoki-Variante, weil da erst die Titel gesammelt werden müssen und dann die Harmonium- Abschnitte gebildet werden...

Leider hat Georgi meinen diesbezüglichen Issue gelöscht, abgelehnt..... :x
Also weiter fummeln oder hart reinkoten in den Sorß :mrgreen:

Re: Tutorial: Moo Register Tabs Version 2

Posted: Thu 1. Jan 2009, 16:44
by flip-flop
Nicht im Source, sondern mit einem frontend_render Script oder einer JS Variante.
Das geht ......

Knut

Re: Tutorial: Moo Register Tabs Version 2

Posted: Fri 2. Jan 2009, 02:59
by santscho
Aber aber aber.... DAS geht doch auch mit dem eingebauten CP TABS
Im CP Tabs steht nur der FCKeditor zur Verfügung. Und mit SHOW_CP zu wursteln gefällt mir nicht. Ausserdem muss man sich zuerst noch ein Template zusammenbasteln, denn "Default" erzeugt (jedenfalls bei mir) keine Tabs. – Oder hab ich was verpasst?

Re: Tutorial: Moo Register Tabs Version 2

Posted: Fri 2. Jan 2009, 11:32
by update
santscho wrote:Im CP Tabs steht nur der FCKeditor zur Verfügung. ............... Oder hab ich was verpasst?
Naja, das Verpasste nennt sich CUSTOM BLOCKS (advanced: NESTED CBs) - damit kriegst Du ALLES rein, was sonst auf den Seiten auch reingeht :lol:

Nur die Nyoki-Variante mit dem (zusätzlichen Harmonium für den TAB-Inhalt) geht nicht...
flip-flop wrote:Nicht im Source, sondern mit einem frontend_render Script oder einer JS Variante.
Das geht ......
Das Script soll also die Titel sammeln und so tun, als wären sie getrennt vom Rest oberhalb (oder wo auch immer) triggerbar? Das hört sich gut an ;)