Page 1 of 2

ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Wed 2. Jul 2008, 20:47
by pepe
Vielleicht interessant zu sehen, wie ich den Ansatz gemacht habe, um die "Oma aufs Fahrrad" zu bekommen?!

Ziel sollte diese moo.fx Darstellungvariante des Akkordeon-Effekts mit Reitern sein.
My target was the moo.fx accordion effect with tabs.

Image

Die Original-Site, auf der ich mir Funktion und Lösung (ohne phpwcms) angesehen hatte, ist folgende:
Here is the site, i have found "the way, to do it" (without phpwcms):
http://www.nyokiglitter.com/tutorials/tabs.html

Der Vorteil an meinem provisorischen Lösungsansatz: Es können in einer Box auch mehrere CPs eingebunden werden!!!
The pros of my solution: You can use more than one CP inside each of the accordion-boxes!!!

Ich benötige dazu 3 zusätzliche ContentParts innerhalb meines Arikels, in dem mein "Akkordeon mit den Reiterchen" arbeiten soll. Es mag auch eleganter gehen, aber so war es für mich leichter zu verstehen und auch nachträglich!!! in einen bestehenden Artikel einzubinden.
Auch lassen sich so bei bedarf die speziellen, für die Akkordeonfunktion massgeblichen Elemente, "abschalte" um alle CPs "normal" zum Laufen zu bekommen; wenn es mal ans Fehlesuchen geht ;-)
We need 3 additional ContentPart types inside an articel, to let the "tabbed accordion" play for us.


Das Funktionsprinzip meiner Lösung sieht grundsätzlich so aus:
Here is the principle way, how to use the additional ContentParts "Register(Tabs)":

CP "Register (Tabs)" / ( moo_register_1.tmpl ) = Nur die Register-Namen eingetragen! Put in tab-names only!
CP beliebig
CP beliebig
CP beliebig
CP "Register (Tabs)" / ( moo_register_2.tmpl ) = Trennelement/separator (keine Eingabe erforderlich)
CP beliebig
CP "Register (Tabs)" / ( moo_register_2.tmpl ) = Trennelement/separator (keine Eingabe erforderlich)
CP beliebig
CP beliebig
CP "Register (Tabs)" / ( moo_register_2.tmpl ) = Trennelement/separator (keine Eingabe erforderlich)
CP beliebig
CP beliebig
CP "Register (Tabs)" / ( moo_register_3.tmpl ) = "Leeres" Endelement zum Beenden des Akkordeon-Effekts


Und hier die 3 verwendeten Templates, die ich im Ordner .../template/inc_cntpart/tabs/... mit dem angegebenen Name abgespeichert habe:
Here are the 3 additional templates. Please put them into the directory .../template/inc_cntpart/tabs/... and use the given names.

moo_register_1.tmpl

Code: Select all

/* *****************************************************************************
   moo_register_1.tmpl 		- for the ContentPart "Register (Tabs)"

   08.05.08 MP (pepe)      - webDESIGN-dp.de / Manfred Peperkorn

   Corresponding to:			.../template/inc_css/specific/accordion_tabs.css
   Put this file into: 		.../template/inc_cntpart/tabs/moo_register_1.tmpl

   Switch in conf.inc.php 	-> $phpwcms['allow_cntPHP_rt']   = 1; 
   *****************************************************************************

   Wird als erster CP verwendet und nimmt "NUR die Reiterbezeichnungen" auf!

*/

<!--TABS_START//-->

[PHP]/* Einbinden des erforderlichen Steuerungs-Codes in das Template */

   $GLOBALS['block']['css']['moo_register'] = 'specific/moo_register.css';

   $GLOBALS['block']['custom_htmlhead']['prototype.lite.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/moo_fx/scripts/prototype.lite.js" type="text/javascript"></script>';
   $GLOBALS['block']['custom_htmlhead']['moo.fx.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/moo_fx/scripts/moo.fx.js" type="text/javascript"></script>';
   $GLOBALS['block']['custom_htmlhead']['moo.fx.pack.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/moo_fx/scripts/moo.fx.pack.js" type="text/javascript"></script>';


   $GLOBALS['block']['custom_htmlhead']['moo_register'] = '  
  <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}
    );

    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>

  ';

[/PHP]

<!-- START :: Akkordeon-Funktion ========== -->

[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]

[TABS_ENTRIES]<div id="moo_register">
   {TABS_ENTRIES}[/TABS_ENTRIES]

   <div class="boxholder">
      <div class="box">
         <div class="inner_box">
<!--TABS_END//-->


<!--TABS_ENTRY_START//-->
   [TABTEXT]<div class="tab">[/TABTEXT]
   <h3 class="tab[TABTEXT]txt[/TABTEXT]" title="{TABTITLE}">
      [TABHEADLINE]<div class="tabtxt">[/TABHEADLINE]<a href="#">{TABTITLE}</a>[TABHEADLINE]</div>[/TABHEADLINE]
   </h3>
   [TABTEXT]</div>[/TABTEXT]
<!--TABS_ENTRY_END//-->
moo_register_2.tmpl

Code: Select all

/* *****************************************************************************
   moo_register_2.tmpl		- for the ContentPart "Register (Tabs)"
 
   08.05.08 MP (pepe)      - webDESIGN-dp.de / Manfred Peperkorn

   Corresponding to:			.../template/inc_css/specific/accordion_tabs.css
   Put this file into:		.../template/inc_cntpart/tabs/moo_register_2.tmpl

   Switch in conf.inc.php 	-> $phpwcms['allow_cntPHP_rt']   = 1; 
   *****************************************************************************

   Zusätzlicher CP als "Trenner" zwischen den einzelnen "Inhaltsgruppen".

*/

<!--TABS_START//-->
      
         </div>
      </div>
      <div class="box">
         <div class="inner_box">

<!--TABS_END//-->
moo_register_3.tmpl

Code: Select all

/* *****************************************************************************
   moo_register_3.tmpl		- for the ContentPart "Register (Tabs)"
 
   08.05.08 MP (pepe)      - webDESIGN-dp.de / Manfred Peperkorn

   Corresponding to:			.../template/inc_css/specific/accordion_tabs.css
   Put this file into:		.../template/inc_cntpart/tabs/moo_register_3.tmpl

   Switch in conf.inc.php 	-> $phpwcms['allow_cntPHP_rt']   = 1; 
   *****************************************************************************

   Abschluss CP, "zusätzlich" hinter dem letzten Inhaltselement einfuegen!

*/

<!--TABS_START//-->
         </div><!-- //inner_box -->
      </div><!-- //box -->
      
   </div><!-- //boxholder -->


</div><!-- //moo_register -->

<!-- STOP :: Akkordeon-Funktion ========== -->

<script type="text/javascript">
	Element.cleanWhitespace("moo_register");
	init();
</script>

<!-- ===================================== -->

<!--TABS_END//-->

Ach ja, dann haben wir ja auch noch eine CSS-Datei, die abgespeichert wird unter:
OK, we need a CSS-file as well. Please save it as:

...../tempate/inc_css/specific/moo_register.css

Code: Select all

/* ================================================================= */
   Style Sheet moo_register.css
/* ================================================================= */

#moo_register { }


/* ================================================================= */
/* Nur verwenden zur Signalisierung, dass die CSS-Datei wirksam ist! */
/* 
#moo_register { padding:20px 0; background: #ff0000; } 
*/
/* ================================================================= */


#moo_register .box {
   background: #fff;
/* padding: 10px; */			/* !!! HIER NICHT ERLAUBT!!! */ 
}

#moo_register .box .inner_box {
   margin: 10px;				/* Abstand zwischen Texht und Rahmen */
}

#moo_register .boxholder { 
 width:510px;
   clear: both;
   padding: 10px 5px 5px; 	/* Randbreite des farbigen Rahmens */
   background: #8DC70A;
}


#moo_register .tab a { color: #fff;
   text-decoration: none;
}
#moo_register .tab a:hover { color: #DFE44F;
}

#moo_register .tab { 
   float: left;					/* Anordnung der Reiter */
   height: 32px;
   width: 102px;
   margin: 0 2px 0 0;			/* Abstand zwischen den Reitern */
   text-align: center;
   background: #8DC70A url(../../../template/inc_cntpart/tabAccordion/images/greentab.jpg) no-repeat;
}
#moo_register .tabtxt { 		/* Tabulator-Beschriftung */
   margin: 0;
   color: #fff;
   font-size: 12px;
   font-weight: bold;
   padding: 9px 0 0 0;
}
Wo findet man die verwendeten Scripts:
Where to find the used scripts:
Bei meinen Versuch habe ich mich an Toyas Tutorial für moo.fx orientiert.
Dort sind auch die verwendeten Scripts innerhalb der Datei tabAccordion.zip zu finden: http://www.nyokiglitter.com/tutorials/tabs.html
Download Toyas tabAccordion.zip file, to get the necessary files:


Mein Experiment - und als das ist es zu verstehen - sollte nur zeigen, daß sich "so etwas" auch in/mit phpwcms umsetzen läßt, wenn auch mit ein paar Klimmzügen.
Zumindest ist dabei nichts am CoreCode von phpwcms zu manipulieren, was sicher ein Vorteil ist, wenn man an die vielen "nightlies" denkt ;-)
Wer diesen Lösungsansatz zum "Spielen" verwendet, wird sicher nicht dummer dabei!
Ich möchte aber darauf hinweisen, "vorsichtshalber" mit der Betreiberin der o.g. Site Rücksprache zu nehmen, bevor so eine Lösung "professionell" verwendet wird !

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Thu 3. Jul 2008, 18:08
by flopi
Muss mal sagen WOW für die gute Umsetzung. Ich habs mal getestet und es funktioniert wunderbar wenn man das ganze durchschaut hat. :D
Ich bin begeistert von dem Ding. Genau sowas brauchte ich noch um es auf meiner Seite einzubauen. Nimmt nicht viel Platz ein und man kann einiges an Inhalt rein bringen.

Applaus für pepe. :o
Wirklich Danke das du das mit uns teilst.

mfg
flopi

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Thu 3. Jul 2008, 18:21
by pepe
Hi flopi,

schön, wenn du es nachvollziehen konntest und es für dich "brauchbar" ist :-)

Allerdings hab ich auch hier nur mal 1 und 1 zusamengefügt... und so 5 herausbekomen :D
Die Ehre gebührt den genialen Geistern, bei dene ich meine Infos "gefunden" habe und die ihr Gehirnschmalz eingesetzt haben.
Na kar und OG mit seinem phpwcms, bei dem solche Spielchen auch ohne Programmierkenntnisse möglich sind... phpwcms ist eben wie LEGO, das kann man selbst als "Urgroßvater" noch bewältigen :lol:

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Fri 4. Jul 2008, 10:39
by sustia
Hi, I'm really interested in this tutorial..could someone kindly translate in english?

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Fri 4. Jul 2008, 13:15
by pepe
Hi sustia,

i have added some words in ENGLISH to my short tutorial... hope, it will help, to "let your tabbed accordion play" :D

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Fri 4. Jul 2008, 13:32
by sustia
Hi pepe, thanks a lot for your kindness, I will give it a look after lunch, my stomach it now makes strange noises just now :D

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Mon 7. Jul 2008, 11:27
by sustia
Hi pepe, I'm trying to get it works, but seems that I have some problem..

This is my backend:

Image

As you can see I have this structure:

- moo_register_1.tmpl (open the tab)
- CP
- CP
- moo_register_2.tmpl (separator)
- moo_register_1.tmpl (open the tab)
- CP
- moo_register_3.tmpl (close the tab)
Anyway the result is not what I expect, as you can see in this page:
http://www.angelosignore.it/index.php?mootabs

Do you have some suggestion? :?

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Mon 7. Jul 2008, 12:38
by pepe
Hi sustia,
you are on the right way, lets see, how to help.

Please fill in the Names of ALL the Tabs inside the FIRST template (moo_register_1.tmpl) !!!

Between the different boxes of your accordion there must be only one addition (empty) template of type moo_register_2.tmpl !


Here you can see, how my moo_register_1.tmpl looks like inside the DEMO-backend:

Image

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Mon 7. Jul 2008, 13:34
by sustia
Ah ok, but what about the sequence of the different CP?

In the moo_register_1.tmpl I have this situation:

Image

and the sequence in the article backend now is this one:

Image

My question is: where I must put the different CP's?

Between the moo_register_1.tmpl and moo_register_2.tmpl?
Or after the moo_register_2.tmpl?

Thanks.

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Mon 7. Jul 2008, 13:43
by flopi
You make one moo_register_1.tmpl where u but all your registers u want.
Then CP's with your content for register 1.
Make a CP Register (Tabs) with moo_register_2.tmpl.
Then CP's with your content for register 2.
Make a CP Register (Tabs) with moo_register_2.tmpl.
Then CP's with your content for register 3.
Make a CP Register (Tabs) with moo_register_3.tmpl.

This is if u have 3 registers. At the first time i also had no clue how to use it.
But if u have it you are happy anyway. :D

mfg
flopi

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Mon 7. Jul 2008, 13:44
by pepe
That is, to load some additional codelines inside the rendered code, to get the accordion playing......
We must close the former and open the following container!!!

Have a look inside the templates and you will see, what i mean!

And pay attention, please:
There is NO content to put inside moo_register_2.tmpl and moo_reggister_3.tmpl :idea:
You have to choose the template only! All you need, is inside the templates!!!


Here is a dump of my CP :

Image

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Mon 7. Jul 2008, 14:25
by pepe
Have a look again, please...
Now you can see, where and what sort of template i have used.. and where to put the CONTENT of the accordion containers :idea:

And pay attention, please:
There is NO content to put inside all the CPs moo_register_2.tmpl and moo_reggister_3.tmpl :idea:
You have to choose the template only! All you need, is inside the templates!!!
My question is: where I must put the different CP's?

Between the moo_register_1.tmpl and moo_register_2.tmpl?
Or after the moo_register_2.tmpl?
moo_register_1.tmpl: STARTs the play, holds all register names
moo_register_2.tmpl: Separator-element between the OWN CPs-Containers (NO CONTENT)
moo_register_3.tmpl: END-element (NO CONTENT)

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Mon 7. Jul 2008, 16:44
by sustia
Perfect guys, now it works! :D
Thanks for your patience and support.

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Mon 7. Jul 2008, 17:28
by pepe
Hi susta,

great, it works perfect now....


off topic:
Now a little question from my site,
Please tell me, how you "call up" the horizontal navi of yor site.
I have "saved" the site on my localhost to have a look, but need to know the "Replacement-Tag" inside the template" :wink:

Re: ContentPart "Register (Tabs)" -> moo_register_x.tmpl

Posted: Mon 7. Jul 2008, 18:09
by sustia
pepe wrote:Hi susta,

great, it works perfect now....


off topic:
Now a little question from my site,
Please tell me, how you "call up" the horizontal navi of yor site.
I have "saved" the site on my localhost to have a look, but need to know the "Replacement-Tag" inside the template" :wink:
Hi pepe, the RT is this one:

Code: Select all

<div class="navig">{NAV_LIST_UL:,0,2,prima_riga,selected}</div>
An this is css code

Code: Select all

    /* 27.06.07  Horizontales Menü mit einer horiz. Unterebene
       Navigation core   
      http://www.phpwcms.de/forum/viewtopic.php?p=88630#88630
      [EDIT 05.05.08 KH: ]
      - All ".navig" converted to ".navig ul"
      - Call: <div class="navig">{NAV_LIST_UL:,0,2,,selected}</div>
      [/EDIT]
    */

    .navig {
       line-height: 1;
		 /*margin: 0 0 1.2em 50px;*/
       margin: 0px; /* -- EDIT --  */
		 padding: 0px;
       display: block;
       position: relative;
       width: 950px;  /*  -- EDIT --  */
		 border: 0px;
		 border-top: 1px #fff solid;
		 border-bottom: 1px #000 solid;
		 background: url(http://www.angelosignore.it/layout/menu/sfondo-menu.gif) repeat-x;
		 height: 38px;
    }

    /* remove all list stylings */
    .navig ul, .navig ul ul {
       margin: 0;
       padding: 0;
       border: 0;
       list-style-type: none;
    }

    /* move all list items into one row, by floating them */
    .navig ul li {
       margin: 0;
       padding: 0 1px;
       border: 0;
       display: block;
       float: left;
    }
	/*Imposto lo sfondo della voce, la riga a destra*/
	.navig li.sub_ul{
		 margin: 0px;
		 padding: 0px;
		 padding-right: 3px;
	}
    /* initialy hide all sub menus */
    .navig ul ul {
       width: 100%;
       display: block;
       visibility: hidden;
       position: absolute;
       clear: both;
       top: 2.8em;/* watch for this value! you must make sure that this value and value of line-height for the parent items are such that it is possible to move the mouse over to submenu */
       left: 0;
    }

    /* -- float.clear -- force containment of floated LIs inside of main UL */
    .navig ul:after {
       content: ".";
       height: 0;
       display: block;
       visibility: hidden;
       overflow: hidden;
       clear: both;
    }
    /* -- float.clear.END --  */

 	 .navig ul li.selected ul {
       visibility: hidden;
    }
	 
	 .navig ul li:hover ul{
	 	 visibility: visible;
	 }

    .navig ul li.selected ul {
       z-index: 10;
    }

    .navig ul li:hover ul {
       z-index: 100;
    }

    /*      Navigation make-up    */

    .navig ul {
		 color: #fff;
		 margin: 0 /*em auto 2em*/;
       padding: 0 1em;
       width: 950px;   /* this value should be close to what is needed for elements to stay on one line */
		 font-size: 12px;
    }

   .navig ul a {
       color: #fff;
       text-decoration: none;
       padding: 1em 15px 1.25em; /*THIS DEFINES NAV LI HEIGHT*/
       display: block;
    }
      .navig ul a:hover{
       color: #fff;
*/	 }
	  .navig ul.prima_riga a{
       color: #fff;
       text-decoration: none;
       padding: 1em 15px 1.25em; /*THIS DEFINES NAV LI HEIGHT*/
       display: block;
       text-transform: none;
		 background: url(http://www.angelosignore.it/layout/menu/sfondo-menu-voce.gif) no-repeat;
		 background-position: right;
    }
	 .navig ul.prima_riga a:hover, .navig ul.prima_riga a:active{
       color: #fff;
       text-decoration: none;
       padding: 1em 15px 1.25em; /*THIS DEFINES NAV LI HEIGHT*/
       display: block;
       text-transform: none;
   }

    .navig ul li {
       margin: 0;
       background-image: none;
    }
    .navig ul li li{
    border: 0px;
    background-image: none;	 
    }

    /* if the following selector was ".navig ul li:hover a" IE7 will NOT render nested UL! the reason is the background-color rule. */
    .navig ul li:hover {
        color: #fff;
       background-image: none;
    }
    /* which is why the link is styled separatelly */
    .navig ul li:hover a {
       color: #fff;
       background-image: none;
		 background-color: #8E0B1F/*6FAAB8-3A8112 - 325515 - 5AAFE6*/;
  }
  
  /*Questo è lo sfondo del sottomenu*/
    .navig ul li:hover ul {
	 	margin: 0px;
		 padding: 0px;
		 padding-top: 5px;
		 padding-bottom: 5px;
		 height: auto;
		 background-color: #8E0B1F/*6FAAB8*/;
		 border: 0px;
		 border-bottom: 1px;
		 border-color: #5E0715/*4EA7FF*/;
		 border-style: solid;
		background-image: none;
		line-height: 15px;
    }
	 
	 /*Formatto il testo del sottomenu*/
	   .navig ul li:hover ul a, .navig ul li:hover ul a:visited{
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #fff;
		background-color: #8E0B1F/*6FAAB8*/;
		padding: 0px;
		margin: 0px;
		 }
		 .navig ul li:hover ul a:hover{
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #fff;
		text-decoration: underline;
		padding: 0px;
		margin: 0px;
		 }
  
  
    /* always pay attention that the value for top is such that it is possible to move the mouse over to submenu */
    .navig ul ul {
       top: 2.8em;
		 padding: 0 ;/* should be identical to .navig ul, for best results */
       color: #000;
       width: 950px;
    }

    .navig ul li li {
       padding: 0 6px;
       background-image: none;
		 background: #8E0B1F/*6FAAB8*/;
    }

    .navig ul li ul {
     background-image: none;
	  background: #8E0B1F/*6FAAB8*/;
 	  color: #fff;
    }

    .navig ul li li a {
       color: #000;
       padding: 0.3em;
       font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
       font-size: 12px;
       text-transform: none;
       background-image: none;
		 background-color: #8E0B1F/*6FAAB8*/;
    }

    /* fix the colors for selected item and submenu, for better usability */

   .navig ul li.selected li a, .navig ul li.selected li a:hover {
       color: #fff;
		 background-color: #8E0B1F/*6FAAB8*/;
    }

    .navig ul li.selected li, .navig ul li.selected:hover li a, .navig ul li.selected ul {
		 color: #fff;
       text-decoration:none;
		 background-color: #8E0B1F/*6FAAB8*/;
    }

    .navig ul li li.selected, .navig ul li.selected:hover li.selected a, .navig ul li li.selected a{
	  color: #fff;
     text-decoration:none;
		 background-color: #8E0B1F/*6FAAB8*/;
    }
    .navig ul li.selected li a:hover, .navig ul li.selected:hover li a:hover{
    color: #fff;
    text-decoration:underline;
	 background-color: #8E0B1F/*6FAAB8*/;
	 }


    /* IE5/Mac: \*//*/

    .navig ul {
       display: inline-block;
    }

    .navig ul a {
       float: left;
    }

    .navig ul li ul {
       top: 1.8em;
       height: 2em;
    }

    .navig ul li li, .navig ul li li a {
       display: inline;
       float: none;
    }

    /*  */

Anyway, this was suggested by flip-flop, see this post:
http://forum.phpwcms.org/viewtopic.php?p=103206#p103206

Hope this help :)