NAVIGATION
This is an old revision of the document!
Eine kurze Beschreibung für das Erstellen von Tabs mit der Variante nuTabs.
Möglich wird der Einsatz diser 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
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.tmpl
Verzeichnis: /template/inc_cntpart/tabs/
Dateiename: nuTabs.css
Verzeichnis: /template/inc_css/specific/mootools/
<note>
Download: jQuery UI v1.7.2 - UI-JS & css-Themes (1.21 MiB, 294 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/inc_cntpart/tabs/tab_sort_section_moto_nutabs.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.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//--> [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, {})); } }); //]]> </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; }