nuTabs (MooTools v1.2x)

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

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

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;
    }