Differences

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

--- deutsch:phpwcms-system:artikel:contentparts:register-tabs:accordion-tabs [2010/06/18 10:13]
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}}
-====== 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\\
 **Version:** V1.0 \\
-**Update:** --
+**Update:** 31.03.2013
 **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/ **
-Dateiename: **reg_tabs_accordiontabs01.css** \\
+Dateiename: **reg_tabs_accordiontabs01.css** / **reg_tabs_accordiontabs_V14.css** \\
 Verzeichnis: ** /template/inc_css/specific/mootools/ **
@@ Line 52: / Line 52: @@
 ----
 \\
-\\
+~~UP~~
 ===== Beschreibung =====
@@ Line 64: / Line 64: @@
 **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:
   * 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 :-)
@@ Line 136: / Line 136: @@
 \\
+**Beispiel:** ... wie jedes Akkordeon Element geöffnet werden kann mit **"hover" anstatt "click"** ... -> [[http://davidwalsh.name/mootools-accordion-hover-event|David Walsh Blog]]
+<code js |h mootools.AccordionTabs.js |h >
+/* 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'); });
+});
+</code>
+~~UP~~
 ==== Template ====
@@ Line 322: / Line 344: @@
 </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)
+.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.1276848832.txt.gz · Last modified: 2018/06/03 18:06 (external edit)

Show page Old revisions