NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
english:phpwcms-system:article:contentparts:register-tabs:accordion-tabs [2010/02/04 15:49] Knut Heermann (flip-flop) |
english:phpwcms-system:article:contentparts:register-tabs:accordion-tabs [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| - | A brief description using Accordion tabs (MooTools V1.2x) in the CP **CP Register/Tabs**. | + | A brief description using Accordion tabs (MooTools V1.2x) in the **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. | "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. | ||
| Line 11: | Line 11: | ||
| [[http://demos.mootools.net/Accordion|Accordion - MooTools Demos]] | [[http://demos.mootools.net/Accordion|Accordion - MooTools Demos]] | ||
| + | |||
| + | Have a look too: The ability to run multiple CPs within a tab. [[english/phpwcms-system/admin/template/custom_blocks/accordion-mootools-example]] | ||
| \\ | \\ | ||
| Line 51: | Line 53: | ||
| ---- | ---- | ||
| \\ | \\ | ||
| - | \\ | + | ~~UP~~ |
| ===== Description ===== | ===== Description ===== | ||
| Line 104: | Line 106: | ||
| ==== JavaScript ==== | ==== JavaScript ==== | ||
| - | **File:** /template/lib/mootools/plugin-1.2/mootools.AccordionTabs.js //("add click event to the "add section" link" entfernt)// \\ | + | **File:** /template/lib/mootools/plugin-1.2/mootools.AccordionTabs.js //("add click event to the "add section" link" removed)// \\ |
| //(Otherwise identical to [[http://demos.mootools.net/demos/Accordion/demo.js]]) // | //(Otherwise identical to [[http://demos.mootools.net/demos/Accordion/demo.js]]) // | ||
| Line 127: | Line 129: | ||
| \\ | \\ | ||
| - | Other possible settings can be found here: [[http://mootools.net/docs/more/Fx/Fx.Accordion]] | + | Other possible settings can be found here: [[http://mootools.net/docs/more/Fx/Fx.Accordion|Class: Fx.Accordion]] |
| + | |||
| + | E.g. to be able to close the active block by clicking on himself again: | ||
| + | |||
| + | <code js> | ||
| + | opacity: false, alwaysHide: true, show: -1, | ||
| + | </code> | ||
| \\ | \\ | ||
| + | |||
| + | **Example:** ... how to make each accordion item open when the user **hovers** over the item **instead of** making the user **click** ... -> [[http://davidwalsh.name/mootools-accordion-hover-event|David Walsh Blog]] | ||
| + | <code js |h mootools.AccordionTabs.js |h > | ||
| + | /* MooTools V1.2 */ | ||
| + | window.addEvent('domready', function() { | ||
| + | |||
| + | //create our Accordion instance | ||
| + | var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', { | ||
| + | opacity: false, alwaysHide: true, show: -1, | ||
| + | onActive: function(toggler, element){ | ||
| + | toggler.addClass('accordion-selected'); | ||
| + | }, | ||
| + | onBackground: function(toggler, element){ | ||
| + | toggler.removeClass('accordion-selected'); | ||
| + | } | ||
| + | }); | ||
| + | //make it open on hover | ||
| + | $$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); }); | ||
| + | }); | ||
| + | </code> | ||
| + | |||
| + | |||
| + | ~~UP~~ | ||
| ==== Template ==== | ==== Template ==== | ||
| Line 138: | Line 169: | ||
| Please also check out the new **[TABTITLE_ELSE]** section command too. \\ | Please also check out the new **[TABTITLE_ELSE]** section command too. \\ | ||
| //([[http://code.google.com/p/phpwcms/source/detail?r=372]])// \\ | //([[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. | + | If an empty or alternative title is needed, use a simple "-" in the CP. Now the contents of [TABTITLE_ELSE] is entered. |
| </note> | </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. | + | **The base framework** //(Core)// in our case will not be loaded separately with ##initJSLib();##, since this is automatically initialized by the call to ##initJSPlugin(....);##. |
| + | |||
| + | |||
| + | === JS-Plugin (More-Framework) initialize: === | ||
| - | === JS-Plugin (More-Framework) laden: === | ||
| + | **Three different methods** to load the JS-plugin (More Framework) - used in the example, the method V2: | ||
| - | **Drei unterschiedliche Methoden** um das JS-Plugin (More-Framework) zu laden, verwendet wird im Beispiel die Methode V2: | ||
| - | **Im HTML Quelltext:** | + | **In HTML source:** |
| - | **Methode V1** | + | **Method V1** |
| <code html> | <code html> | ||
| <!-- ==== Init Moore function v1 //--> | <!-- ==== Init Moore function v1 //--> | ||
| Line 161: | Line 194: | ||
| - | **Im PHP-Teil:** | + | **In PHP part:** |
| - | **Methode V2** //(wird hier verwendet)// | + | **Method V2** //(is used here)// |
| <code php> | <code php> | ||
| // ---- Init Moore function v2 | // ---- Init Moore function v2 | ||
| Line 170: | Line 203: | ||
| </code> | </code> | ||
| \\ | \\ | ||
| - | **Methode V3** | + | **Method V3** |
| <code php> | <code php> | ||
| // ---- Init Moore function v3 | // ---- Init Moore function v3 | ||
| Line 181: | Line 214: | ||
| \\ | \\ | ||
| - | === CSS laden: === | + | === CSS initialize: === |
| <code php> | <code php> | ||
| Line 189: | Line 222: | ||
| \\ | \\ | ||
| - | === JS-Plugin (Anwendung) laden: === | + | === JS-Plugin (Application) initialize: === |
| - | //(Basisframework wird autom. mitgeladen)// | + | //(Basic framework is automatically loaded)// |
| <code php> | <code php> | ||
| // ---- Loading the JS Plugin | // ---- Loading the JS Plugin | ||
| Line 230: | Line 263: | ||
| [PHP] | [PHP] | ||
| // ******************************************************* | // ******************************************************* | ||
| - | Load Mootools Framework //(set in the template)//. | + | // Load Mootools Framework (set in the template). |
| // ---- Init Moore function v2 | // ---- Init Moore function v2 | ||
| Line 271: | Line 304: | ||
| ==== CSS: ==== | ==== CSS: ==== | ||
| - | **Datei:** /template/inc_css/specific/mootools/reg_tabs_accordion01.css | + | **File:** /template/inc_css/specific/mootools/reg_tabs_accordion01.css |
| <code css |h reg_tabs_accordion01.css |h > | <code css |h reg_tabs_accordion01.css |h > | ||
