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:25]
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 378: Line 400:
==== Template: ==== ==== Template: ====
 +
 +**Datei:** /template/inc_cntpart/tabs/accordiontabs_V14.tmpl
<code html |h accordiontabs_V14.tmpl |h > <code html |h accordiontabs_V14.tmpl |h >
Line 385: 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 405: 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 429: 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 444: Line 456:
</code> </code>
 +
 +\\
 +
 +
 +==== CSS: ====
 +
 +**Datei:** /template/inc_css/specific/mootools/reg_tabs_accordion_V14.css
 +
 +<code css |h reg_tabs_accordion_V14.css |h >
 +/* 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;
 +  }
 +  
 + ----------------------------------- */
 +
 +</code>
 +
\\ \\
deutsch/phpwcms-system/artikel/contentparts/register-tabs/accordion-tabs.1364732708.txt.gz · Last modified: 2018/06/03 18:06 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0