Es ist das Gleiche.
Beim Aufruf eines Plugins auf diese Weise, wird die Mootools Lib immer automatisch geladen. \\
Das ist alle.
/* 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');
}
});
});
\\
Weitere mögliche Einstellungen sind hier zu finden: [[http://mootools.net/docs/more/Fx/Fx.Accordion|Class: Fx.Accordion]]
Z.B. um den aktiven Block mit einem Klick auf sich selbst wieder schließen zu können:
opacity: false, alwaysHide: true, show: -1,
\\
**Beispiel:** ... wie jedes Akkordeon Element geöffnet werden kann mit **"hover" anstatt "click"** ... -> [[http://davidwalsh.name/mootools-accordion-hover-event|David Walsh Blog]]
/* 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'); });
});
~~UP~~
==== Template ====
**Datei:** /template/inc_cntpart/tabs/accordiontabs01.tmpl
\\
**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);
\\
=== CSS laden: ===
// ---- Loading the right CSS-file.
$GLOBALS['block']['css']['reg_tabs_accordion01'] = 'specific/mootools/reg_tabs_accordion01.css';
\\
=== JS-Plugin (Anwendung) laden: ===
//(Basisframework wird autom. mitgeladen)//
// ---- Loading the JS Plugin
initJSPlugin('AccordionTabs');
\\
=== Template: ===
/* ********************************************************************
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;
*********************************************************************** */
[TITLE]{TITLE}
[/TITLE]
[SUBTITLE]{SUBTITLE}
[/SUBTITLE]
[TABS_ENTRIES]{TABS_ENTRIES}[/TABS_ENTRIES]
[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]
[TABTITLE]
{TABTITLE}
[/TABTITLE]
[TABTITLE_ELSE]
TabElse
[/TABTITLE_ELSE]
[TABCONTENT]
[TABHEADLINE]{TABHEADLINE}
[/TABHEADLINE]
[TABTEXT]{TABTEXT}[/TABTEXT]
[/TABCONTENT]
\\
==== CSS: ====
**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;
}
\\
\\
===== MooTools V1.4 =====
==== JavaScript: ====
**Datei:** /template/lib/mootools/plugin-1.4/mootools.AccordionTabs_V14.js \\
//(Siehe auch [[http://demos.mootools.net/demos/Accordion/demo.js]]) //
/* MooTools V1.4 */
window.addEvent('domready', function(){
new Fx.Accordion($('accordion'), '#accordion h3', '#accordion .content');
});
\\
Weitere mögliche Einstellungen sind hier zu finden: [[http://mootools.net/docs/more/Fx/Fx.Accordion|Class: Fx.Accordion]]
/* 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');
}
});
});
Z.B. um den aktiven Block mit einem Klick auf sich selbst wieder schließen zu können:
opacity: false, alwaysHide: true, show: -1,
\\
~~UP~~
==== Template: ====
**Datei:** /template/inc_cntpart/tabs/accordiontabs_V14.tmpl
/* ********************************************************************
accordion_V14.tmpl for the CP Register (Tabs)
31.03.13 KH (flip-flop) - http://planmatrix.de Knut Heermann
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
- and lib/mootools/mootools-1.4-core-yc.js
- Put this file into the Folder /template/inc_cntpart/tabs/*
*********************************************************************** */
[TITLE]{TITLE}
[/TITLE]
[SUBTITLE]{SUBTITLE}
[/SUBTITLE]
[TABS_ENTRIES]{TABS_ENTRIES}[/TABS_ENTRIES]
[TABTITLE]
{TABTITLE}
[/TABTITLE]
[TABTITLE_ELSE]
TabElse
[/TABTITLE_ELSE]
[TABCONTENT]
[TABHEADLINE]{TABHEADLINE}
[/TABHEADLINE]
[TABTEXT]{TABTEXT}[/TABTEXT]
[/TABCONTENT]
\\
==== CSS: ====
**Datei:** /template/inc_css/specific/mootools/reg_tabs_accordion_V14.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;
}
/* ----------- Original -------------
#accordion {
margin: 20px 0 0;
max-width: 400px;
}
#accordion H3 {
background: #6B7B95;
color: white;
cursor: pointer;
font: 12px Helvetica, Arial, sans-serif;
line-height: 16px;
margin: 0 0 4px 0;
padding: 3px 5px 1px;
}
#accordion .element {
background-color: #F4F5F5;
}
#accordion .element p {
margin: 0.5em 0;
padding: 0 6px 8px 6px;
}
----------------------------------- */
\\