NAVIGATION
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>'; |