NAVIGATION
Eine kurze Beschreibung für das Erstellen von Tabs mit der Variante nuTabs (MooTools V1.2x).
Möglich wird der Einsatz dieser MooTool Tabs erst durch die Verwendung dieses frontend_init-Scriptes: php_script_v1.3
Frontend:
Backend:
Docu: –
Forum: –
Basis: http://mootools.net/shell/oskar/dvaXj/
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
Update: –
Tag: –
Dateiename: mootools.nuTabs.js
Verzeichnis: /template/lib/mootools/plugin-1.2/
Dateiename: tab_sort_section_moto_nutabs_v13.tmpl
Verzeichnis: /template/inc_cntpart/tabs/
Dateiename: nuTabs.css
Verzeichnis: /template/inc_css/specific/mootools/
<note> Download: MooTools V1.2x nuTabs-V1.3 - JS, tmpl, CSS (4.29 KiB, 89 downloads)
PHP: php_script_v1.3 (Sortieren von Bereichen)
</note>
Bedingung: → /config/phpwcms/conf.inc.php
1. Update auf die jüngste Version
2. Login und gehe nach ADMIN → Vorlagen - begutachte die neuen Optionen
3. Installation:
4. Im Gebrauch:
Datei: /template/lib/mootools/plugin-1.2/mootools.nuTabs.js
Änderungen: * Elements.implement({ …..
- wurde in die Datei /template/inc_cntpart/tabs/tab_sort_section_moto_nutabs_v13.tmpl verschoben.
/* --- 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' }); }); ========== */
Datei: /template/inc_cntpart/tabs/tab_sort_section_moto_nutabs_v13.tmpl
<note>
Schau dir bitte auch das neue [TABTITLE_ELSE] Sektionskommando an.
(http://code.google.com/p/phpwcms/source/detail?r=372)
Wenn ein leerer oder alternativer Titel gebraucht wird, verwende einen einfachen ”-” im CP Register. Nun wird der Inhalt aus [TABTITLE_ELSE] eingetragen.
</note>
tab_sort_section_moto_nutabs_v13.tmpl
/** ******************************************************************** * Template to build in a MooTools tab snippet using mootools * tab_sort_section_moto.nutabs.tmpl for the CP Register (Tabs) * http://mootools.net/shell/oskar/dvaXj/ * * 20.02.10 Knut Heermann (flip-flop) - http://planmatrix.de * ------------------------------------------------------------------ * Selector: #tabs-nav a, #tabs-body li * Corresponding with the basic css file: * - template/inc_css/specific/mootools/nuTabs.css * * Uses the js files: * - template/lib/mootools/jmootools-1.2-core-yc.js (Core) * - template/lib/mootools/more/Element/Element.Measure.js (More) * - template/lib/mootools/plugin-1.2/mootools.nuTabs.js * * Recomended: * - template/inc_script/frontend_init/cp_trig_sort_section.php (V1.3) * * * Put this file into the Folder * - template/inc_cntpart/tabs/* * * Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt'] = 1; ********************************************************************* */ <!--TABS_START//--> <!--SORT_INTO_NEW_BLOCKS_V13//--> [PHP] // **************************************************************************** // ---- Load the right css classes $GLOBALS['block']['css']['mootools_nuTabs'] = 'specific/mootools/nuTabs.css'; // ---- Load the right JS lib plugin $js[1] = 'MORE:Element/Element.Measure'; renderHeadJS($js); // ---- Load the right JS plugin initJSPlugin('nuTabs'); $GLOBALS['block']['custom_htmlhead']['mootools_nuTabsInit'] = ' <script type="text/javascript"> //<![CDATA[ Elements.implement({ tabify: function(options){ this.tabNav = this.slice(0, this.length/2); this.tabBody = this.slice([COUNTX_TOTAL], 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\' }); }); //]]> </script>'; // **************************************************************************** [/PHP] [TITLE]<h3>{TITLE}</h3>[/TITLE] [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE] [CP_TRIG_DEFINITION] [BLOCK_01X_PREFIX]<ul id="tabs-nav"> [/BLOCK_01X_PREFIX] [BLOCK_01X_SUFFIX]</ul> [/BLOCK_01X_SUFFIX] [CLASS_01X_FIRST] class="selected"[/CLASS_01X_FIRST] [CLASS_01X_LAST][/CLASS_01X_LAST] [BLOCK_02X_PREFIX]<ul id="tabs-body"> [/BLOCK_02X_PREFIX] [BLOCK_02X_SUFFIX]</ul> [/BLOCK_02X_SUFFIX] [CLASS_02X_FIRST] class="active"[/CLASS_02X_FIRST] [CLASS_02X_LAST][/CLASS_02X_LAST] [/CP_TRIG_DEFINITION] [TABS_ENTRIES] <div id="tab{ID}" style="width:560px"> [CP_TRIG_WRAP_CONTENT] {TABS_ENTRIES} [/CP_TRIG_WRAP_CONTENT] </div> [/TABS_ENTRIES] <!--TABS_END//--> <!--TABS_ENTRY_START//--> [CP_TRIG_CONTENT] [BLOCK_01X] <li[CLASS_01X_FIRST]><a href="#"> [TABTITLE]<b>{TABTITLE}</b>[/TABTITLE][TABTITLE_ELSE]<b>New Title</b>[/TABTITLE_ELSE] </a></li> [/BLOCK_01X] [BLOCK_02X] [TABCONTENT]<li[CLASS_02X_FIRST]> [TABHEADLINE]<h3>{TABHEADLINE}</h3>[/TABHEADLINE] [TABTEXT]{TABTEXT}[/TABTEXT] </li>[/TABCONTENT] [/BLOCK_02X] [/CP_TRIG_CONTENT] <!--TABS_ENTRY_END//-->
Beispiel aus dem mootools nuTabs
Datei: template/inc_css/specific/mootools/nuTabs.css
body { font-family: Helvetica, Arial, sans-serif; font-size: .8em; line-height: 140%; background: #C7C3C2; } #tabs-nav { height: 30px; } #tabs-nav li { float: left; padding: 0 10px 0 0; list-style-type:none; } #tabs-nav li a { color: #333; font-weight: bold; text-decoration: none; text-shadow: 0 1px 0 #fff; font-size: 1.1em; padding: 5px 7px 3px; } #tabs-nav li.selected a { background: #333333; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-bottom: solid 1px #fff; color: #C7C3C2; text-shadow: none; } #tabs-body { position: relative; overflow: hidden; background: #333333; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-bottom: solid 1px #fff; } #tabs-body li { padding: 10px; color: #fff; display: none; } #tabs-body li.active { display: block; }