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

If you have created additional (non official) documentation or tutorials or something like that please post this here

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

Postby flip-flop on Mon Apr 21, 2008 19:45

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 May 10, 2008 07:47, edited 7 times in total.
>> DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
flip-flop
 
Posts: 5519
Joined: Sat May 21, 2005 19:25
Location: HAMM (Germany)

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

Postby claus on Mon Apr 21, 2008 20:17

flip-flop wrote:Have fun

will have - soon ;) thank you!
The following (and the previous) wouldn't have happened if there had been a GURM!
update process in progress 90% - Please stand by.. don't hit any key. Hold your breath...
User avatar
claus
 
Posts: 2557
Joined: Mon Jan 10, 2005 16:29
Location: germany / outdoor

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

Postby marcus@localhorst on Tue Apr 22, 2008 08:27

thank you!
„go out and love everyone“ (Akron/Family)
User avatar
marcus@localhorst
 
Posts: 729
Joined: Fri May 28, 2004 09:31
Location: localhorst

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

Postby sustia on Tue Apr 22, 2008 09:55

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
sustia
 
Posts: 603
Joined: Fri Apr 02, 2004 20:29
Location: Lecce (Italy)

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

Postby flip-flop on Tue Apr 22, 2008 10:03

Oh, yes -> solved :?

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

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

Postby flip-flop on Fri May 02, 2008 07:37

[EDIT 02.05.08]/template/inc_css/accordion_tabs.css moved to /template/inc_css/specific/accordion_tabs.css [/EDIT] :!:
>> DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
flip-flop
 
Posts: 5519
Joined: Sat May 21, 2005 19:25
Location: HAMM (Germany)

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

Postby pepe on Sat May 03, 2008 20:22

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
mfG pepe

Natürlich lese ich hier immer noch mit (ist ja nicht mehr so viel), gespannt darauf, was noch kommen wird... und wann!
Denn phpwcms ist - nach wie vor - ein TOP CMS, welches einen Vergleich nicht scheuen muß!

phpWCMS Installation + Quick-Start + Tuning | some Replacement-Tags | free-X templates (4.000 downloads/anno)
User avatar
pepe
 
Posts: 2815
Joined: Mon Jan 19, 2004 12:46
Location: Mülheim-Ruhr, Germany

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

Postby claus on Sat May 03, 2008 20:56

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?
The following (and the previous) wouldn't have happened if there had been a GURM!
update process in progress 90% - Please stand by.. don't hit any key. Hold your breath...
User avatar
claus
 
Posts: 2557
Joined: Mon Jan 10, 2005 16:29
Location: germany / outdoor

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

Postby pepe on Sat May 03, 2008 22:41

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 Sat May 03, 2008 23:15, edited 1 time in total.
mfG pepe

Natürlich lese ich hier immer noch mit (ist ja nicht mehr so viel), gespannt darauf, was noch kommen wird... und wann!
Denn phpwcms ist - nach wie vor - ein TOP CMS, welches einen Vergleich nicht scheuen muß!

phpWCMS Installation + Quick-Start + Tuning | some Replacement-Tags | free-X templates (4.000 downloads/anno)
User avatar
pepe
 
Posts: 2815
Joined: Mon Jan 19, 2004 12:46
Location: Mülheim-Ruhr, Germany

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

Postby Jensensen on Sat May 03, 2008 23:07

[x]
Last edited by Jensensen on Sat Sep 20, 2008 16:52, edited 1 time in total.
wann tötensen den jensensen?
[another seo experiment]
User avatar
Jensensen
 
Posts: 2481
Joined: Tue Oct 17, 2006 19:11
Location: docking dock docked, refueling stop

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

Postby flip-flop on Sun May 04, 2008 08:11

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. :? ]
>> DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
flip-flop
 
Posts: 5519
Joined: Sat May 21, 2005 19:25
Location: HAMM (Germany)

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

Postby Jensensen on Sun May 04, 2008 21:55

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 Sep 20, 2008 16:52, edited 1 time in total.
wann tötensen den jensensen?
[another seo experiment]
User avatar
Jensensen
 
Posts: 2481
Joined: Tue Oct 17, 2006 19:11
Location: docking dock docked, refueling stop

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

Postby Jensensen on Sun May 04, 2008 23:55

i guess we shouldn't confuse the issues:

[x]
Last edited by Jensensen on Sat Sep 20, 2008 16:50, edited 1 time in total.
wann tötensen den jensensen?
[another seo experiment]
User avatar
Jensensen
 
Posts: 2481
Joined: Tue Oct 17, 2006 19:11
Location: docking dock docked, refueling stop

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

Postby 360fusion on Mon May 05, 2008 10:18

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
360fusion
 
Posts: 118
Joined: Tue Aug 29, 2006 23:15
Location: Yarm, UK

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

Postby Jensensen on Mon May 05, 2008 10:45

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. :(
wann tötensen den jensensen?
[another seo experiment]
User avatar
Jensensen
 
Posts: 2481
Joined: Tue Oct 17, 2006 19:11
Location: docking dock docked, refueling stop

Next

Return to (unofficial) tutorials & documentation

Who is online

Users browsing this forum: Alexa [Bot] and 0 guests