Differences

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

--- deutsch:phpwcms-system:artikel:contentparts:register-tabs:mootools-nutabs [2010/02/21 02:22]
Knut Heermann (flip-flop)
+++ deutsch:phpwcms-system:artikel:contentparts:register-tabs:mootools-nutabs [2018/06/03 18:08] (current)
@@ Line 1: / Line 1: @@
 {{indexmenu_n>100}}
-====== MooTools nuTabs ======
+====== nuTabs (MooTools v1.2x) ======
-Eine kurze Beschreibung für das Erstellen von Tabs mit der Variante [[http://mootools.net/shell/oskar/dvaXj/|nuTabs]].
+Eine kurze Beschreibung für das Erstellen von Tabs mit der Variante [[http://mootools.net/shell/oskar/dvaXj/|nuTabs]] //(MooTools V1.2x)//.
-Möglich wird der Einsatz diser [[http://mootools.net/shell/oskar/dvaXj/|MooTool Tabs]] erst durch die Verwendung dieses frontend_init-Scriptes: [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.3]]
+Möglich wird der Einsatz dieser [[http://mootools.net/shell/oskar/dvaXj/|MooTool Tabs]] erst durch die Verwendung dieses frontend_init-Scriptes: [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.3]]
 \\
@@ Line 27: / Line 27: @@
 **Autor:** Claus (claus)  //2010/02/20 // \\
+**Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/02/20 // \\
 **CMS version:** >= V1.44 r388\\
 **Version:** V1.0 \\
@@ Line 37: / Line 38: @@
 Verzeichnis: ** /template/lib/mootools/plugin-1.2/ **
-Dateiename: **tab_sort_section_moto_nutabs.tmpl** \\
+Dateiename: **tab_sort_section_moto_nutabs_v13.tmpl** \\
 Verzeichnis: ** /template/inc_cntpart/tabs/ **
@@ Line 43: / Line 44: @@
 Verzeichnis: ** /template/inc_css/specific/mootools/ **
-FIXME
 <note>
-**Download: {{:deutsch:phpwcms-system:artikel:contentparts:register-tabs:jquery_ui_and_theme_172.zip|jQuery UI v1.7.2 - UI-JS & css-Themes}}**
+Download: {{:english:phpwcms-system:article:contentparts:register-tabs:tab_sort_section_moto_nutabs_v13.zip|MooTools V1.2x nuTabs-V1.3 - JS, tmpl, CSS}}
-\\
-\\
+\\
 **PHP:** [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.3]] //(Sortieren von Bereichen)//
@@ Line 80: / Line 80: @@
 **4.** Im Gebrauch:
   * Fülle einen CP Register/Tabs mit deinen Einträgen //(Siehe Beispiel oben)//.
-  * Wähle als Vorlage: **tab_sort_section_moto_nutabs.tmpl**
+  * Wähle als Vorlage: **tab_sort_section_moto_nutabs_v13.tmpl**
   * Sichern und das Ergebnis im FE ansehen :-)
@@ Line 86: / Line 86: @@
+==== JavaScript ====
+**Datei:**  /template/lib/mootools/plugin-1.2/mootools.nuTabs.js
+**Änderungen:**
+  * Elements.implement({ .....
+  * window.addEvent('domready', function(e) { ....
+- wurde in die Datei **/template/inc_cntpart/tabs/tab_sort_section_moto_nutabs_v13.tmpl** verschoben.
+<code js |h mootools.nuTabs.js |h >
+/*
+---
+script: nuTabs.js
+decription: nuTabs - MooTools-based, transitionified switcherification
+license: MIT-style license.
+authors:
+ - Oskar Krawczyk (http://nouincolor.com/)
+requires:
+  core:1.2.3:
+  - Class.Extras
+  - Element.Event
+  - Element.Style
+  - Element.Dimensions
+  - Fx.Tween
+  - Fx.Morph
+  - String
+  - Array
+  more:1.2.3.2:
+  - Element.Measure
+provides: [nuTabs]
+...
+*/
+var nuTabs = new Class({
+    Implements: [Events, Options],
+    options: {
+        // transition: $empty,
+        navActiveClass: 'selected'
+    },
+    initialize: function(tabsNav, tabsBody, options){
+        this.setOptions(options);
+        this.tNav = tabsNav;
+        this.tBody = tabsBody;
+        this.attach();
+    },
+    attach: function(){
+        this.tNav.each(function(tab, index){
+            tab.addEvent('click', this.resize.bindWithEvent(this, index));
+        }, this);
+    },
+    alteredHeight: function(index){
+        // expose to measurement
+        return this.tBody[index].measure(function(){
+            return this.getSize().y;
+        });
+    },
+    resize: function(e, index){
+        e.stop();
+        this.tBodyCont = this.tBody.getParent();
+        this.tNavCont = this.tNav.getParent();
+        // set transitions if needed
+        this.tBodyCont.set('tween', {
+            transition: $pick(this.options.transition, 'sine:out')
+        });
+        // alter the wrappers's height
+        this.tBodyCont.tween('height', this.alteredHeight(index));
+        // absolutize and hide the content items
+        this.tBody.set('styles', {
+            'position': 'absolute',
+            'top': 0,
+            'opacity': 0
+        }).fade('out');
+        // show the active content item
+        this.tBody[index].set('styles', {
+            'display': 'block',
+            'opacity': 0
+        }).fade('in');
+        // add class to the active tab
+        this.tNavCont.removeClass(this.options.navActiveClass);
+        this.tNavCont[index].addClass(this.options.navActiveClass);
+    }
+});
+/* ======== Moved to template in register tab. -KH 20.02.2010
+Elements.implement({
+    tabify: function(options){
+        this.tabNav = this.slice(0, this.length/2);
+        this.tabBody = this.slice(4, this.length);
+        new nuTabs($$(this.tabNav), $$(this.tabBody), $pick(options, {}));
+    }
+});
+window.addEvent('domready', function(e) {
+    $$('#tabs-nav a, #tabs-body li').tabify({
+        transition: 'bounce:out'
+    });
+});
+========== */
+</code>
+\\
 ==== Template ====
-**Datei:**  /template/inc_cntpart/tabs/tab_sort_section_moto_nutabs.tmpl
+**Datei:**  /template/inc_cntpart/tabs/tab_sort_section_moto_nutabs_v13.tmpl
 <note>
@@ Line 99: / Line 214: @@
-<code html |h tab_sort_section_moto_nutabs.tmpl |h >
+<code html |h tab_sort_section_moto_nutabs_v13.tmpl |h >
 /**
  ********************************************************************
@@ Line 131: / Line 246: @@
 <!--TABS_START//-->
-<!--SORT_INTO_NEW_BLOCKS//-->
+<!--SORT_INTO_NEW_BLOCKS_V13//-->
 [PHP]
@@ Line 154: / Line 269: @@
 		}
 	});
+	window.addEvent(\'domready\', function(e) {
+		$$(\'#tabs-nav a, #tabs-body li\').tabify({
+			transition: \'bounce:out\'
+    });
+});
    //]]>
   </script>';

deutsch/phpwcms-system/artikel/contentparts/register-tabs/mootools-nutabs.1266715379.txt.gz · Last modified: 2018/06/03 18:06 (external edit)

Show page Old revisions