NAVIGATION
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> | ||
+ | |||
+ | |||
+ | \\ | ||