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:40]
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}} {{indexmenu_n>100}}
-====== MooTools nuTabs ======+====== nuTabs (MooTools v1.2x) ======
Line 7: Line 7:
-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:** Claus (claus)  //2010/02/20 // \\
 +**Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/02/20 // \\
**CMS version:** >= V1.44 r388\\ **CMS version:** >= V1.44 r388\\
**Version:** V1.0 \\ **Version:** V1.0 \\
Line 37: Line 38:
Verzeichnis: ** /template/lib/mootools/plugin-1.2/ ** 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/ ** Verzeichnis: ** /template/inc_cntpart/tabs/ **
Line 45: Line 46:
<note> <note>
-**Download: {{:english:phpwcms-system:article:contentparts:register-tabs:tab_sort_section_moto_nutabs.zip|MooTools V1.2x nuTabs - JS, tmpl, CSS, PHP}}**+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)//   **PHP:** [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.3]] //(Sortieren von Bereichen)//  
Line 80: Line 80:
**4.** Im Gebrauch: **4.** Im Gebrauch:
  * Fülle einen CP Register/Tabs mit deinen Einträgen //(Siehe Beispiel oben)//.   * 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 :-)   * 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 ==== ==== 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> <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//--> <!--TABS_START//-->
-<!--SORT_INTO_NEW_BLOCKS//-->+<!--SORT_INTO_NEW_BLOCKS_V13//-->
[PHP] [PHP]
Line 154: Line 269:
} }
}); });
 +
 + window.addEvent(\'domready\', function(e) {    
 + $$(\'#tabs-nav a, #tabs-body li\').tabify({
 + transition: \'bounce:out\'
 +    });
 +});
 +
   //]]>    //]]>
  </script>';   </script>';
deutsch/phpwcms-system/artikel/contentparts/register-tabs/mootools-nutabs.1266716404.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