NAVIGATION
This shows you the differences between two versions of the page.
english:phpwcms-system:article:contentparts:register-tabs:accordion-tabs [2010/02/04 16:07] 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 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 273: | 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 > |