Tutorial: Moo Register Tabs Version 2

If you have created additional (non official) documentation or tutorials or something like that please post this here
Post Reply
User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Tutorial: Moo Register Tabs Version 2

Post by santscho » 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"

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
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

User avatar
markus s
Moderator
Posts: 654
Joined: Sat 16. Dec 2006, 19:21
Location: Radfeld / Tirol
Contact:

Re: Tutorial: Moo Register Tabs Version 2

Post by markus s » Wed 31. Dec 2008, 11:39

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
moderator
propelled by fresh air from tirol
XING|FACEBOOK|OMENTO

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: Tutorial: Moo Register Tabs Version 2

Post by santscho » Wed 31. Dec 2008, 11:59

:-( 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#
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

User avatar
markus s
Moderator
Posts: 654
Joined: Sat 16. Dec 2006, 19:21
Location: Radfeld / Tirol
Contact:

Re: Tutorial: Moo Register Tabs Version 2

Post by markus s » Wed 31. Dec 2008, 12:14

im sorry...
to much scripts... (old motools).sht
moderator
propelled by fresh air from tirol
XING|FACEBOOK|OMENTO

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Tutorial: Moo Register Tabs Version 2

Post by pepe » Wed 31. Dec 2008, 14:58

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.

User avatar
juergen
Moderator
Posts: 4553
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: Tutorial: Moo Register Tabs Version 2

Post by juergen » Wed 31. Dec 2008, 17:42

pepe wrote:Prima Variante, du hast dich ja an meinen Tipp gehalten.
:D Dir auch Pepe ein gutes Spray fürs neue Jahr

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: Tutorial: Moo Register Tabs Version 2

Post by santscho » Thu 1. Jan 2009, 06:39

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 :-)
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Tutorial: Moo Register Tabs Version 2

Post by update » Thu 1. Jan 2009, 13:25

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:
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: Tutorial: Moo Register Tabs Version 2

Post by flip-flop » Thu 1. Jan 2009, 16:44

Nicht im Source, sondern mit einem frontend_render Script oder einer JS Variante.
Das geht ......

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: Tutorial: Moo Register Tabs Version 2

Post by santscho » Fri 2. Jan 2009, 02:59

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?
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Tutorial: Moo Register Tabs Version 2

Post by update » Fri 2. Jan 2009, 11:32

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 ;)
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

Post Reply