This is an old revision of the document!


MooTools nuTabs

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/

FIXME <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

  • $phpwcms['allow_ext_init'] = 1;
  • $phpwcms['allow_cntPHP_rt'] = 1;

Beschreibung

1. Update auf die jüngste Version

2. Login und gehe nach ADMIN → Vorlagen - begutachte die neuen Optionen

  • Wähle mootols 1.2

3. Installation:

  • Erstelle aus den drei folgenden Texten die drei angegebenen Dateien in den angegebenen Verzeichnissen.
  • Installiere PHP: php_script_v1.3

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
  • Sichern und das Ergebnis im FE ansehen :-)


Template

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//-->


CSS

Beispiel aus dem mootools nuTabs

Datei: template/inc_css/specific/mootools/nuTabs.css

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;
    }
deutsch/phpwcms-system/artikel/contentparts/register-tabs/mootools-nutabs.1266715379.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