ContentPart "Register (Tabs)" -> Accordion (MooTools)

If you have created additional (non official) documentation or tutorials or something like that please post this here
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by flip-flop »

Here we have a little tut for using the accordion function in the new ContentPart "Register (Tabs)".
(Since r134 Update version to 1.3.9, 2008-04-07) -> Please have a look: r142 Fix for CP tabs in IE - was a JavaScript related problem.
-> http://code.google.com/p/phpwcms/source/list

- There is no need for an extra JS entry at head section. All you need are the two files below.
- No troubling slide-in CPs for beginning/ending container around the main content CP.

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

File: /template/inc_cntpart/tabs/moo_accordion01.tmpl

Code: Select all

/* ********************************************************************
  moo_accordion01.tmpl for the CP Register (Tabs)
  21.04.08 KH (flip-flop) - http://planmatrix.de Knut Heermann
           MS (markus_s)  - DVA-Datenverarbeitung Markus Schartner
  Corresponding with the file /template/inc_css/specific/reg_tabs_accordion01.css
  - Put this file into the Folder /template/inc_cntpart/tabs/....
  - Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt']   = 1; 
*********************************************************************** */

<!--TABS_START//-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TABS_ENTRIES]
<div id="accordion">
<div id="tab{ID}" class="tabs">{TABS_ENTRIES}</div>
</div>
[/TABS_ENTRIES]

[PHP]

	$GLOBALS['block']['custom_htmlhead']['mootools.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
	initMootools();

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

	$GLOBALS['block']['custom_htmlhead']['reg_tabs_accordion'] = '  <script type="text/javascript">
  // <![CDATA[
	window.addEvent(\'domready\',
	function(){
	var accordion = new Accordion(\'div.at1Start\', \'div.at2Start\', {
	opacity: 0.5, duration: 500, alwaysHide: true, show: -1
  },$(\'accordion\'));
	accordion.showThisHideOpen(); //no open element on load
	});
	// ]]>
  </script>';

[/PHP]

<!--TABS_END//-->

<!--TABS_ENTRY_START//-->
	<div class="toggler at1Start" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';" ><div><span>{TABTITLE}</span></div></div>
	<div class="element at2Start">
	[TABCONTENT]<div class="accordion_content">
		[TABHEADLINE]<h3>{TABHEADLINE}</h3>[/TABHEADLINE]
		[TABTEXT]{TABTEXT}[/TABTEXT]
		</div>
	[/TABCONTENT]
	</div>
<!--TABS_ENTRY_END//-->
File: /template/inc_css/specific/reg_tabs_accordion01.css

Code: Select all

/* ========================================================================
  reg_tabs_accordion01.css for the CP Register (Tabs)
  21.04.08 KH (flip-flop) - http://planmatrix.de Knut Heermann
           MS (markus_s)  - DVA-Datenverarbeitung Markus Schartner
  Corresponding with the file /template/inc_cntpart/tabs/moo_accordion01.tmpl 
  - Put this css file (accordion_tabs.css) into the folder /template/inc_css/specific/....
=========================================================================== */

#accordion {
  width: 95%;
  background: #ffffff;
  padding: 0px;
  margin: 0px;
}
.accordion_content {
  background-color: #FFFFEF;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #c6c6c6; 
  border-left: 1px solid #ccc;
  padding: 0px 10px 10px 10px;
}
.element p {
  margin: 0;
  padding: 5px;
}

/* accordion togglers */
.toggler {
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  display:block;
  width:100%;
  cursor:pointer;
  height: 20px; 
  background: #f0f0f0 url(../../../img/symbols/klapp_zu.gif) 5px 6px no-repeat;
  vertical-align: middle;
  margin-bottom: 1px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
.toggler div {
  margin-left: 15px;
  position: relative;
}
.toggler div span {
  margin-left: 5px;
  line-height: 25px !important;
  line-height: 20px ;
}

/* toggler hover */

.togglerHover {
  display:block;
  width:100%;
  font-weight: bold;
  cursor:pointer;
  height:20px; 
  background: #d9d9d9 url(../../../img/symbols/klapp_auf.gif) 5px 6px no-repeat;
  vertical-align: middle;
  margin-bottom: 1px;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
.togglerHover div {
  margin-left: 15px;
  position: relative;
}
.togglerHover div span {
  margin-left: 5px;
  line-height: 25px !important;
  line-height: 20px ;
}
[EDIT 02.05.08]/template/inc_css/accordion_tabs.css moved to /template/inc_css/specific/accordion_tabs.css [/EDIT]
[EDIT 10.05.08]
/template/inc_cntpart/tabs/moo_tabs.tmpl renamed to
/template/inc_css/specific/moo_accordion01.tmpl

/template/inc_css/specific/accordion_tabs.css renamed to
/template/inc_css/specific/reg_tabs_accordion01.css
[/EDIT]

Have fun

Knut :D
Last edited by flip-flop on Sat 10. May 2008, 09:47, edited 7 times in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by update »

flip-flop wrote:Have fun
will have - soon ;) thank you!
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
marcus@localhorst
Posts: 815
Joined: Fri 28. May 2004, 11:31
Location: localhorst
Contact:

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by marcus@localhorst »

thank you!
User avatar
sustia
Posts: 651
Joined: Fri 2. Apr 2004, 22:29
Location: Lecce (Italy)
Contact:

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by sustia »

Hi flip.flop, thanks for sharing :D

Maybe there is a little typo mistake.

Code: Select all

File: /template/inc_cntpart/moo_tabs.tmpl
sholud be

Code: Select all

File: /template/inc_cntpart/tabs/moo_tabs.tmpl
Campeones del mundo!
Vegetables!
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by flip-flop »

Oh, yes -> solved :?

Thank you ......
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by flip-flop »

[EDIT 02.05.08]/template/inc_css/accordion_tabs.css moved to /template/inc_css/specific/accordion_tabs.css [/EDIT] :!:
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by pepe »

Moin flip-flop,

basierend auf deiner Grundidee habe ich nachgedacht und für mich die angebotene Funktion so verändert, daß ich per CP "Register (Tab)" nun nahezu alle Contenparts integrieren kann!

So kann ich nun im Minutenschnelle ein "informatives Akkordeon" erstellen, das nicht mehr nur auf Text basiert, sondern auch Bilder und Videos... etc. aufnehmen kann.

Damit sind endlich Codekopierereien beim Zusammenstellen nun NICHT mehr erforderlich. Alles geht per Mausklick... so soll es sein.

Für die Anregung deshalb ein GROSSES DANKESCHÖN :D :D :D
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by update »

hey pepe,
wie hast Du's denn nun genau gemacht - dmit wir NOOBs das nachmachen können ;)
Wo müssen wir drehen, damit die Schraube sitz?
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by pepe »

Eigentlich habe ich diesen ContentPart einfach "vergewaltigt"...
Du weißt, ich bin weder Programmierer noch will ich viel Zeit aufwenden... Die Lösung muß schnell gehen, denk an mein Alter :?

Es ist gewiss nicht elegant... aber macht was ich will ;-) Also, verrat's keinem weiter!!!
Das schöne... da ich nur die Tabulatoren ohne Inhalt "produziere", kann man das auch nachträglich schnell nachrüsten :)
Und daß es mit verschiedenen CPs als Inhalt funktioniert, siehst du hier:

Image

Damit ich alle üblichen CP einfügen kann... habe ich die Lösung einfach "zelegt" in 3 Hauptgruppen.
Ich rufe also lediglich das passenden Template im CP auf, um die Tabulatoren zu erzeugen...
Dazu fülle ich NUR den Contetpart -Titel ein, sonst nichts!

Die eigentlichen Inhalte kommen separat... so kann ich jederzeit alles verschieben!
Das sieht dann etwa so aus:

+ CP "Register (Tabs)" mit Template: moo_tabs_oben.tmpl
- beliebige CPs
- beliebige CPs
+ CP "Register (Tabs)" mit Template: moo_tabs_standard.tmpl
- beliebige CPs
- beliebige CPs
+ CP "Register (Tabs)" mit Template: moo_tabs_standard.tmpl
- beliebige CPs
- beliebige CPs
+CP "Register (Tabs)" mit Template: moo_tabs_unten.tmpl


Hier die einzelnen Templates:

Code: Select all

/* **************************************************************************
   moo_tabs_oben.tmpl 		- for the ContentPart "Register (Tabs)"
   21.04.08 KH (flip-flop) - http://planmatrix.de Knut Heermann
            MS (markus_s)  - DVA-Datenverarbeitung Markus Schartner
   02.05.08 MP (pepe)      - webDESIGN-dp / Manfred Peperkorn

   Corresponding with:		.../template/inc_css/specific/accordion_tabs.css

   Put this file into: 		.../template/inc_cntpart/tabs/moo_tabs_oben.tmpl

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

<!--TABS_START//-->

[TITLE]
<!-- START :: Akkordeon-Funktion ========== -->

<div id="accordion">
<div id="tab{ID}" class="tabs">

   <div class="toggler at1Start" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';" >
      <div><span>{TITLE}</span></div>
   </div>
   <div class="element at2Start">
      <div class="accordion_content">

[PHP]	/* Einbinden des erforderlichen Steuerungs-Codes in das Template */
   
   $GLOBALS['block']['css']['accordion'] = 'specific/accordion_tabs.css';

   $GLOBALS['block']['custom_htmlhead']['mootools.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools.js" type="text/javascript"></script>';
   initMootools();

   $GLOBALS['block']['custom_htmlhead']['accordion'] = '  <script type="text/javascript">
    // <![CDATA[
    window.addEvent("domready", function(){ 
    var accordion = new Accordion("div.at1Start", "div.at2Start", {
    opacity: 0.5, duration: 500, alwaysHide: true, show: -1},$("accordion"));
    accordion.showThisHideOpen();                 // no open element on load
    });
    // ]]>
  </script>
  ';
  
[/PHP]
[/TITLE]

<!--TABS_END//-->

Code: Select all

/* *****************************************************************************
   moo_tabs_standard.tmpl	- for the ContentPart "Register (Tabs)"
   21.04.08 KH (flip-flop) - http://planmatrix.de Knut Heermann
            MS (markus_s)  - DVA-Datenverarbeitung Markus Schartner
   02.05.08 MP (pepe)      - webDESIGN-dp / Manfred Peperkorn

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

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

<!--TABS_START//-->
      </div>
   </div>

   <div class="toggler at1Start" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';" >
      <div><span>{TITLE}</span></div>
   </div>
   <div class="element at2Start">
      <div class="accordion_content">
<!--TABS_END//-->

Code: Select all

/* **************************************************************************
   moo_tabs_unten.tmpl		- for the ContentPart "Register (Tabs)"
   21.04.08 KH (flip-flop) - http://planmatrix.de Knut Heermann
            MS (markus_s)  - DVA-Datenverarbeitung Markus Schartner
   02.05.08 MP (pepe)      - webDESIGN-dp / Manfred Peperkorn

   Corresponding with:		.../template/inc_css/specific/accordion_tabs.css

   Put this file into:		.../template/inc_cntpart/tabs/moo_tabs_unten.tmpl

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

<!--TABS_START//-->
      </div>
   </div>
</div>
</div>
<!-- STOP :: Akkordeon-Funktion ========== -->

<!--TABS_END//-->
Du siehst... eigentlich ein SAKRILEG.... verrate es bloß nicht flip-flop! Der macht mich platt! :( :( :(
Last edited by pepe on Sun 4. May 2008, 01:15, edited 1 time in total.
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by Jensensen »

[x]
Last edited by Jensensen on Sat 20. Sep 2008, 18:52, edited 1 time in total.
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by flip-flop »

Du siehst... eigentlich ein SAKRILEG.... verrate es bloß nicht flip-flop! Der macht mich platt! :( :( :(
Garnicht, bin für jeder Erweiterung zu haben. :D
CP Tabs will be an interesting alternative for pagination of CPs...
Nein, der Clou ist die Kombination aus beidem. Wir haben nun erstmalig die Möglichkeit mit der CP Paginierung und dem jetzt funktionierenden "Abschnittstitel (Paginierung):" so eine Art manuelle Sortierung der CPs mit Überschrift einzusetzen. [CP_PAGINATE_MENU].!!! (Überschrift: <ul><li>... mit .active Klasse).

Oh no, the real feature is the combination of the CP pagination and the mootool snippet.
This is the first time we have the possibility to create a small sorting of CPs with a linkable headline using the new feature [CP_PAGINATE_MENU].!!! (Headline:<ul><li>.... with .active class).


Layout ist im Bsp. noch nicht vorhanden. (No layout inside this example).
Image

MooTools und die Paginierung sind hier getrennt zu betrachten. (Wird gerade zufällig von mir in einen Topf geworfen).
Das MooTool Snippet wurde zu diesem Zweck aufgeteilt in die Bereiche hinein:

Please have a diferent look onto the article pagination and the MooTools. (It is a accident that I write about this two features at this place).
The mootool snippet is broken in three areas:


- Artikel Template [article template]

Code: Select all

<!--CP_PAGINATE_START//-->

<div class="cpPagination">
[CP_PAGINATE_MENU]
	<!-- when no item prefix/suffix/... is given the default will be used (ul/li) -->
	<!-- with parameter: [ CP_PAGINATE_MENU : item_prefix|item_suffix|active_class|hide_active ] -->
	<div class="cp_horiz1">{CP_PAGINATE_MENU}</div>
	<br class="clear" />
[/CP_PAGINATE_MENU]
</div>

<div id="accordion">
<div id="tab{ID}" class="tabs">

<!--CP_PAGINATE_END//-->
.........
[PHP]
.......
[/PHP]
- CP Template (Bei mir "Bilder <div>") [CP template (for me image <div>)]

Code: Select all

[TITLE]<div class="toggler at1Start" onmouseover="this.className = 'togglerHover';" onmouseout="this.className = 'toggler';" >
<div><span><h3>{TITLE}</h3></span></div>
[SUBTITLE]<div><span><h4>({SUBTITLE})</h4></span></div>[/SUBTITLE]
</div>[/TITLE]

<div class="images" id="images{ID}">

<div class="element at2Start">
<!--IMAGES_HEADER_END//-->
.........
<!--IMAGES_FOOTER_START//-->
.........
</div>
</div>
<!--IMAGES_FOOTER_END//-->
- Und ein HTML-CP als letzten CP, beinhaltend </div></div> And one html cp at last position, containing </div></div>

(Die MooTools Geschichte könnte man sicher auch in einen Custom-Block packen).

[Ich bin jetzt irgendwie in Tread vom Thema Register Tab abgekommen. :? ]
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by Jensensen »

Hi pepe, Hi flip-flop, Hi friends,

thank you very much for your code samples!
Inspired by your work I used your snippets to run some tests this afternoon

[x]

obsolete anyway
Last edited by Jensensen on Sat 20. Sep 2008, 18:52, edited 1 time in total.
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by Jensensen »

i guess we shouldn't confuse the issues:

[x]
Last edited by Jensensen on Sat 20. Sep 2008, 18:50, edited 1 time in total.
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
User avatar
360fusion
Posts: 120
Joined: Wed 30. Aug 2006, 01:15
Location: Yarm, UK
Contact:

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by 360fusion »

When i first started plying with the tabs content part that's exactly what i expected it to do. just work straight away and not have to look for templates to add.

I expected it to work like this site: http://www.zugsailing.com/cms/index.php?de_personen created by mazze. http://forum.phpwcms.org/viewtopic.php?f=12&t=17008

Pepe and flip-flop's templates are great and I'd have been completely stuck without them.

Does anyone have (or can make) a template to make the tabs CP work like Mazze's site? I'm not skilled enough in code to make one myself.

Regards
Ben
User avatar
Jensensen
Posts: 3000
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: ContentPart "Register (Tabs)" -> Accordion (MooTools)

Post by Jensensen »

Hi Ben,
360fusion wrote:...I expected it to work like this site: http://www.zugsailing.com/cms/index.php?de_personen created by mazze...
I did so, too.

As far as I understand, pagination of CPs is required at first. And then [ ] -> this is, what I'm working on to get to know what's happening...

360fusion wrote:...Pepe and flip-flop's templates are great...
Yes, they really are.
360fusion wrote:...and I'd have been completely stuck without them...
actually still is the same for me. :(
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
Post Reply