NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
deutsch:phpwcms-system:artikel:contentparts:register-tabs:accordion-tabs [2013/03/31 14:27] 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 350: | Line 352: | ||
| ===== MooTools V1.4 ===== | ===== MooTools V1.4 ===== | ||
| - | ==== 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 379: | Line 401: | ||
| ==== Template: ==== | ==== Template: ==== | ||
| - | Datei: /template/inc_cntpart/tabs/accordiontabs_V14.tmpl | + | **Datei:** /template/inc_cntpart/tabs/accordiontabs_V14.tmpl |
| <code html |h accordiontabs_V14.tmpl |h > | <code html |h accordiontabs_V14.tmpl |h > | ||
| 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> | ||
