nuTabs (MooTools v1.2x)

FIXME translate

A brief description of how to create tabs with the variant nuTabs (MooTools V1.2x).

The use of these MooTool Tabs is possible only in combination with this frontend_init-script: php_script_v1.3


Frontend:

Backend:



Docu: –
Forum: –
Basis: http://mootools.net/shell/oskar/dvaXj/

Author: Claus (claus) 2010/02/20
Author: K.Heermann (flip-flop) http://planmatrix.de 2010/02/20
CMS version: >= V1.44 r388
Version: V1.0
Update:

Tag:

Filename: mootools.nuTabs.js
Folder: /template/lib/mootools/plugin-1.2/

Filename: tab_sort_section_moto_nutabs_v13.tmpl
Folder: /template/inc_cntpart/tabs/

Filename: nuTabs.css
Folder: /template/inc_css/specific/mootools/

Download: MooTools V1.2x nuTabs-V1.3 - JS, tmpl, CSS (4.29 KiB, 13 downloads)


PHP: php_script_v1.3 (Sorting of (template) areas)

Condition:/config/phpwcms/conf.inc.php

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

Documentation

1. Update to the latest version

2. Login and go to ADMIN → template - evaluate the new options

  • Select mootols 1.2

3. Installation:

  • Create with the following three texts the three specified files in the specified directories
  • Install php_script_v1.3 (Sorting of (template) areas)

4. In use:

  • Fill a CP register / tabs with your entries (See example above).
  • Choose the template: tab_sort_section_moto_nutabs_v13.tmpl
  • Save and watch the result in the FE :-)


JavaScript

File /template/lib/mootools/plugin-1.2/mootools.nuTabs.js

changes:

  • Elements.implement({ …..
  • window.addEvent('domready', function(e) { ….

- was moved into the file /template/inc_cntpart/tabs/tab_sort_section_moto_nutabs_v13.tmpl.

mootools.nuTabs.js

/*
---
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'
    });
});
========== */


Template

File: /template/inc_cntpart/tabs/tab_sort_section_moto_nutabs_v13.tmpl

Please also check out the new section command [TABTITLE_ELSE].
(http://code.google.com/p/phpwcms/source/detail?r=372)
If an empty or alternative title is needed, use a simple ”-” in the CP register. Now the contents of [TABTITLE_ELSE] is entered.

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


CSS

Example from mootools nuTabs

File: 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;
    }
english/phpwcms-system/article/contentparts/register-tabs/mootools-nutabs.txt · Last modified: 2010/02/21 18:24 by Claus
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