Differences

This shows you the differences between two versions of the page.

deutsch:phpwcms-system:artikel:contentparts:register-tabs:accordion-tabs [2010/08/14 09:31]
Knut Heermann (flip-flop)
deutsch:phpwcms-system:artikel:contentparts:register-tabs:accordion-tabs [2018/06/03 18:08] (current)
Line 1: Line 1:
{{indexmenu_n>20}} {{indexmenu_n>20}}
-====== Accordion Tabs (MooTools v1.2x) ======+====== Accordion Tabs (MooTools v1.2x/V1.4x) ======
-Eine kurze Beschreibung für die Verwendung von Accordion Tabs (Mootools V1.2x) im **CP Register/Tabs**.+Eine kurze Beschreibung für die Verwendung von Accordion Tabs (Mootools V1.2x/1.4x) im **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.+"Kleine, einfache und unauffällige Tab-Plugin für MooTools //(v1.2x und v1.4x)// Mit dem Plugin Accordion ist es möglich nur die wirklich benötigten Inhalte zu zeigen.
Line 33: Line 33:
**CMS version:** >= V1.44 r388\\ **CMS version:** >= V1.44 r388\\
**Version:** V1.0 \\ **Version:** V1.0 \\
-**Update:** --+**Update:** 31.03.2013
**Tag:** -- **Tag:** --
-Dateiename: **mootools.AccordionTabs.js** \\ +Dateiename: **mootools.AccordionTabs.js** / **mootools.AccordionTabs_V14.js** \\ 
-Verzeichnis: ** /template/lib/mootools/plugin-1.2/ **+Verzeichnis: ** /template/lib/mootools/plugin-1.2/ / /template/lib/mootools/plugin-1.4/**
-Dateiename: **accordiontabs01.tmpl** \\+Dateiename: **accordiontabs01.tmpl** / **accordiontabs_V14.tmpl** \\
Verzeichnis: ** /template/inc_cntpart/tabs/ ** Verzeichnis: ** /template/inc_cntpart/tabs/ **
-Dateiename: **reg_tabs_accordiontabs01.css** \\+Dateiename: **reg_tabs_accordiontabs01.css** / **reg_tabs_accordiontabs_V14.css** \\
Verzeichnis: ** /template/inc_css/specific/mootools/ ** Verzeichnis: ** /template/inc_css/specific/mootools/ **
Line 64: Line 64:
**2.** Login und gehe nach  ADMIN -> Vorlagen - begutachte die neuen Optionen **2.** Login und gehe nach  ADMIN -> Vorlagen - begutachte die neuen Optionen
-  * Wähle **MooTools 1.2**, immer laden (?), und Google Ajax Lib benutzen, wenn notwendig. \\ Hier ist es sehr wichtig, **MooTools 1.2** auszuwählen :!:+  * Wähle **MooTools 1.2**, immer laden (?), und Google Ajax Lib benutzen, wenn notwendig. \\ Hier ist es sehr wichtig, **MooTools 1.2** oder **MooTools 1.4** auszuwählen :!:
Line 72: Line 72:
**4.** Im Gebrauch: **4.** Im Gebrauch:
  * Fülle eine CP Register/Tabs mit deinen Einträgen //(Siehe Beispiel oben)//.   * Fülle eine CP Register/Tabs mit deinen Einträgen //(Siehe Beispiel oben)//.
-  * Wähle als Vorlage: **accordiontabs01.tmpl** +  * Wähle als Vorlage: **accordiontabs01.tmpl** oder **accordiontabs_V14.tmpl**
  * Sichern und das Ergebnis im FE ansehen :-)   * Sichern und das Ergebnis im FE ansehen :-)
Line 344: Line 344:
</code> </code>
 +
 +
 +\\
 +
 +\\
 +
 +===== 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]]) //
 +
 +
 +<code js |h mootools.AccordionTabs_V14.js |h >
 +/* MooTools V1.4 */
 +
 +window.addEvent('domready', function(){
 +  new Fx.Accordion($('accordion'), '#accordion h3', '#accordion .content');
 +});
 +</code>
 +
 +\\
 +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:
 +
 +<code js>
 +opacity: false, alwaysHide: true, show: -1,
 +</code>
 +
 +\\
 +
 +~~UP~~
 +
 +==== Template: ====
 +
 +**Datei:** /template/inc_cntpart/tabs/accordiontabs_V14.tmpl
 +
 +<code html |h accordiontabs_V14.tmpl |h >
 +/* ********************************************************************
 +  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/*
 + 
 +*********************************************************************** */
 + 
 +<!--TABS_START//-->
 + 
 +<div id="rgt_content">
 + 
 +    [TITLE]<h1>{TITLE}</h1>[/TITLE]
 +    [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
 + 
 +    <div id="accordion">
 +        [TABS_ENTRIES]{TABS_ENTRIES}[/TABS_ENTRIES]
 +    </div>
 + 
 +</div> <!--  END id="rgt_content" //-->
 +
 + 
 +<!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion -->
 +<!-- CSS: {TEMPLATE}inc_css/specific/mootools/reg_tabs_accordion_V14.css -->
 +<!-- JS: AccordionTabs_V14 -->
 +
 + 
 +<!--TABS_END//-->
 + 
 + 
 + 
 +<!--TABS_ENTRY_START//-->
 +[TABTITLE]
 +<h3 class="toggler" title="{TABTITLE}">{TABTITLE}</h3>
 +[/TABTITLE]
 +[TABTITLE_ELSE]
 +<h3 class="toggler" title="TabElse">TabElse</h3>
 +[/TABTITLE_ELSE]
 +    [TABCONTENT]
 +    <div class="element">
 +        [TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE]
 +        [TABTEXT]{TABTEXT}[/TABTEXT]
 +    </div>
 +    [/TABCONTENT]
 + 
 +<!--TABS_ENTRY_END//-->
 +
 +</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.1281771094.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