NAVIGATION
This is an old revision of the document!
A brief description using Accordion tabs (MooTools V1.2x) in the CP CP Register/Tabs.
“Klein, einfach und unauffälliges Tab-Plugin für MooTools (v1.2x) Mit dem Plugin Accordion ist es möglich nur die wirklich benötigten Inhalte zu zeigen.
Small, simple and unobtrusive tab-plugin for MooTools (v1.2x) Using the Accordion plugin it is possible that only the really needed content is showing.
Frontend:
Backend:
Docu: –
Forum: –
Author: K.Heermann (flip-flop) http://planmatrix.de 2010/02/02
- CSS made by http://mootools.net
CMS version: >= V1.44 r388
Version: V1.0
Update: –
Tag: –
Filename: mootools.AccordionTabs.js
Folder: /template/lib/mootools/plugin-1.2/
Filename: accordiontabs01.tmpl
Folder: /template/inc_cntpart/tabs/
Filename: reg_tabs_accordiontabs01.css
Folder: /template/inc_css/specific/mootools/
Bedingung: $phpwcms['allow_cntPHP_rt'] = 1; → /config/phpwcms/conf.inc.php —-
1. Update to the latest version
2. Login and go to ADMIN → Template - have a look to the new options
3. Installation:
4. In use:
<note> For Developers:
A new template Replacer is available to loading JavaScript dynamically.
See: http://code.google.com/p/phpwcms/source/detail?r=381 Eg.:
<!-- JS: AccordionTabs -->
Needs exactly this path
template/lib/mootools/plugin-1.2/mootools.AccordionTabs.js You can also use something like
<!-- JS: http://demos.mootools.net/demos/Accordion/demo.js -->
Untested
This is for the template.
In PHP Scripts (z.B. spezielle frontend_render Aktionen oder Module) kann auch das verwendet werden
<?php initJSPlugin('AccordionTabs'); ?>
It is the same.
When calling a plugin that way, the Mootools Lib is always automatically loaded.
That´s all.
</note>
File: /template/lib/mootools/plugin-1.2/mootools.AccordionTabs.js (“add click event to the “add section” link” entfernt)
(Otherwise identical to http://demos.mootools.net/demos/Accordion/demo.js)
/* MooTools V1.2 */ window.addEvent('domready', function() { //create our Accordion instance var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', { opacity: false, onActive: function(toggler, element){ toggler.setStyle('color', '#41464D'); }, onBackground: function(toggler, element){ toggler.setStyle('color', '#528CE0'); } }); });
Other possible settings can be found here: http://mootools.net/docs/more/Fx/Fx.Accordion
File: /template/inc_cntpart/tabs/accordiontabs01.tmpl
<note>
Please also check out the new [TABTITLE_ELSE] section command too.
(http://code.google.com/p/phpwcms/source/detail?r=372)
Wenn ein leerer oder alternativer Titel gebraucht wird, verwende einen einfachen ”-” im CP Register. Nun wird der Inhalt aus [TABTITLE_ELSE] eingetragen.
</note>
The base framework (Core) muss in unserem Fall nicht mit initJSLib(); separat geladen werden, da dieses automatisch durch den Aufruf von initJSPlugin(….); initialisiert wird.
Drei unterschiedliche Methoden um das JS-Plugin (More-Framework) zu laden, verwendet wird im Beispiel die Methode V2:
Im HTML Quelltext:
Methode V1
<!-- ==== Init Moore function v1 //--> <!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion -->
Im PHP-Teil:
Methode V2 (wird hier verwendet)
// ---- Init Moore function v2 $js[1] = 'MORE:Fx/Fx.Elements,Fx/Fx.Accordion'; renderHeadJS($js);
Methode V3
// ---- Init Moore function v3 $mootools_more = array( 'Fx/Fx.Elements', 'Fx/Fx.Accordion' ); initJSPlugin($mootools_more, true);
// ---- Loading the right CSS-file. $GLOBALS['block']['css']['reg_tabs_accordion01'] = 'specific/mootools/reg_tabs_accordion01.css';
(Basisframework wird autom. mitgeladen)
// ---- Loading the JS Plugin initJSPlugin('AccordionTabs');
/* ******************************************************************** accordion01.tmpl for the CP Register (Tabs) 02.02.10 KH (flip-flop) - http://planmatrix.de Knut Heermann Corresponding with the file /template/inc_css/specific/reg_tabs_accordion01.css Uses the js file lib/mootools/plugin-1.2/mootools.AccordionTabs.js - and lib/mootools/mootools-1.2-core-yc.js - Put this file into the Folder /template/inc_cntpart/tabs/* - Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt'] = 1; *********************************************************************** */ <!--TABS_START//--> <div id="rgt_content"> [TITLE]<h1>{TITLE}</h1>[/TITLE] [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE] <div id="accordion"> [TABS_ENTRIES]{TABS_ENTRIES}[/TABS_ENTRIES] </div> </div> <!-- END id="rgt_content" //--> [PHP] // ******************************************************* Load Mootools Framework //(set in the template)//. // ---- Init Moore function v2 $js[1] = 'MORE:Fx/Fx.Elements,Fx/Fx.Accordion'; renderHeadJS($js); // ---- Loading the right CSS-file. $GLOBALS['block']['css']['reg_tabs_accordion01'] = 'specific/mootools/reg_tabs_accordion01.css'; // ---- Loading the JS Plugin initJSPlugin('AccordionTabs'); // ******************************************************* [/PHP] <!--TABS_END//--> <!--TABS_ENTRY_START//--> [TABTITLE] <h3 class="toggler" title="{TABTITLE}">{TABTITLE}</h3> [/TABTITLE] [TABTITLE_ELSE] <h3 class="toggler" title="TabElse">TabElse</h3> [/TABTITLE_ELSE] [TABCONTENT] <div class="element"> [TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE] [TABTEXT]{TABTEXT}[/TABTEXT] </div> [/TABCONTENT] <!--TABS_ENTRY_END//-->
Datei: /template/inc_css/specific/mootools/reg_tabs_accordion01.css
/* CSS for accordiontabs in RT "Register Tabs" */ #rgt_content { font-size:1em; line-height:135%; margin:10px 35px 0pt 20px; padding: 10px 10px 10px 10px; position:relative; z-index:5; width: 500px; border: 1px solid #888; background-color: #FAFFEF; } #accordion { margin:20px 0px; } h3.toggler { cursor: pointer; border: 1px solid #f5f5f5; border-right-color: #ddd; border-bottom-color: #ddd; font-family: 'Andale Mono', sans-serif; font-size: 12px; background: #D2E0E6; /* background: #C3DFCC; */ color: #528CE0; margin: 0 0 4px 0; padding: 3px 5px 1px; } div.element p, div.element h4 { margin:0px; padding:4px; } blockquote { padding:5px 20px; }