NAVIGATION
This shows you the differences between two versions of the page.
deutsch:phpwcms-system:artikel:contentparts:register-tabs:accordion-tabs [2013/03/31 14:28] Knut Heermann (flip-flop) |
deutsch:phpwcms-system:artikel:contentparts:register-tabs:accordion-tabs [2018/06/03 18:08] (current) |
||
---|---|---|---|
Line 345: | Line 345: | ||
</code> | </code> | ||
+ | |||
+ | \\ | ||
\\ | \\ | ||
Line 352: | Line 354: | ||
==== JavaScript: ==== | ==== JavaScript: ==== | ||
- | **Datei:** /template/lib/mootools/plugin-1.4/mootools.AccordionTabs_V14.js //("add click event to the "add section" link" entfernt)// \\ | + | **Datei:** /template/lib/mootools/plugin-1.4/mootools.AccordionTabs_V14.js \\ |
- | //(Sonst identisch mit [[http://demos.mootools.net/demos/Accordion/demo.js]]) // | + | //(Siehe auch [[http://demos.mootools.net/demos/Accordion/demo.js]]) // |
Line 366: | Line 368: | ||
\\ | \\ | ||
Weitere mögliche Einstellungen sind hier zu finden: [[http://mootools.net/docs/more/Fx/Fx.Accordion|Class: Fx.Accordion]] | Weitere mögliche Einstellungen sind hier zu finden: [[http://mootools.net/docs/more/Fx/Fx.Accordion|Class: Fx.Accordion]] | ||
+ | |||
+ | <code js |h mootools.AccordionTabs_V14.js |h > | ||
+ | /* MooTools V1.4 */ | ||
+ | |||
+ | window.addEvent('domready', function() { | ||
+ | |||
+ | //create our Accordion instance | ||
+ | var myAccordion = new Fx.Accordion($('accordion'), 'h3.toggler', 'div.element', { | ||
+ | opacity: false, | ||
+ | onActive: function(toggler, element){ | ||
+ | toggler.setStyle('color', '#41464D'); | ||
+ | }, | ||
+ | onBackground: function(toggler, element){ | ||
+ | toggler.setStyle('color', '#528CE0'); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </code> | ||
+ | |||
+ | |||
Z.B. um den aktiven Block mit einem Klick auf sich selbst wieder schließen zu können: | Z.B. um den aktiven Block mit einem Klick auf sich selbst wieder schließen zu können: | ||
Line 387: | Line 409: | ||
31.03.13 KH (flip-flop) - http://planmatrix.de Knut Heermann | 31.03.13 KH (flip-flop) - http://planmatrix.de Knut Heermann | ||
- | Corresponding with the file /template/inc_css/specific/reg_tabs_accordion01.css | + | Corresponding with the file /template/inc_css/specific/reg_tabs_accordion_V14.css |
Uses the js file lib/mootools/plugin-1.4/mootools.AccordionTabs_V14.js | Uses the js file lib/mootools/plugin-1.4/mootools.AccordionTabs_V14.js | ||
- and lib/mootools/mootools-1.4-core-yc.js | - and lib/mootools/mootools-1.4-core-yc.js | ||
- Put this file into the Folder /template/inc_cntpart/tabs/* | - Put this file into the Folder /template/inc_cntpart/tabs/* | ||
- | - Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt'] = 1; | ||
*********************************************************************** */ | *********************************************************************** */ | ||
Line 407: | Line 428: | ||
</div> <!-- END id="rgt_content" //--> | </div> <!-- END id="rgt_content" //--> | ||
+ | |||
- | [PHP] | + | <!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion --> |
- | // ******************************************************* | + | <!-- CSS: {TEMPLATE}inc_css/specific/mootools/reg_tabs_accordion_V14.css --> |
- | // Load Mootools Framework //(set in the template)//. | + | <!-- JS: AccordionTabs_V14 --> |
- | + | ||
- | // ---- 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_accordion_V14'] = 'specific/mootools/reg_tabs_accordion_V14.css'; | + | |
- | + | ||
- | // ---- Loading the JS Plugin | + | |
- | initJSPlugin('AccordionTabs_V14'); | + | |
- | + | ||
- | // ******************************************************* | + | |
- | [/PHP] | + | |
<!--TABS_END//--> | <!--TABS_END//--> | ||
Line 431: | Line 441: | ||
<!--TABS_ENTRY_START//--> | <!--TABS_ENTRY_START//--> | ||
[TABTITLE] | [TABTITLE] | ||
- | <h3 title="{TABTITLE}">{TABTITLE}</h3> | + | <h3 class="toggler" title="{TABTITLE}">{TABTITLE}</h3> |
[/TABTITLE] | [/TABTITLE] | ||
[TABTITLE_ELSE] | [TABTITLE_ELSE] | ||
- | <h3 title="TabElse">TabElse</h3> | + | <h3 class="toggler" title="TabElse">TabElse</h3> |
[/TABTITLE_ELSE] | [/TABTITLE_ELSE] | ||
[TABCONTENT] | [TABCONTENT] | ||
- | <div class="content"> | + | <div class="element"> |
[TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE] | [TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE] | ||
[TABTEXT]{TABTEXT}[/TABTEXT] | [TABTEXT]{TABTEXT}[/TABTEXT] | ||
Line 468: | Line 478: | ||
background-color: #FAFFEF; | 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; | ||
+ | } | ||
+ | |||
+ | /* ----------- Original ------------- | ||
#accordion { | #accordion { | ||
Line 482: | Line 521: | ||
padding: 3px 5px 1px; | padding: 3px 5px 1px; | ||
} | } | ||
- | #accordion .content { | + | #accordion .element { |
background-color: #F4F5F5; | background-color: #F4F5F5; | ||
} | } | ||
- | #accordion .content p { | + | #accordion .element p { |
margin: 0.5em 0; | margin: 0.5em 0; | ||
padding: 0 6px 8px 6px; | padding: 0 6px 8px 6px; | ||
} | } | ||
+ | |||
+ | ----------------------------------- */ | ||
</code> | </code> |