{{indexmenu_n>100}}

====== nuTabs (MooTools v1.2x) ======

FIXME translate

A brief description of how to create tabs with the variant [[http://mootools.net/shell/oskar/dvaXj/|nuTabs]] //(MooTools V1.2x)//.

The use of these [[http://mootools.net/shell/oskar/dvaXj/|MooTool Tabs]] is possible only in combination with this frontend_init-script:
[[english/phpwcms_replacer_rts/frontend_init/cp_trigger/sort-of-areas#php_script_v1.3]] 

\\
**Frontend:**


{{:english:phpwcms-system:article:contentparts:register-tabs:mootools_nutabs_fe_01_1.gif|}}

**Backend:**

{{:english:phpwcms-system:article:contentparts:register-tabs:mootools_nutabs_be_01_1.gif|}}

\\
----

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


<note>
Download: {{:english:phpwcms-system:article:contentparts:register-tabs:tab_sort_section_moto_nutabs_v13.zip|MooTools V1.2x nuTabs-V1.3 - JS, tmpl, CSS}} 

\\
**PHP:** [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.3]] //(Sorting of (template) areas)//  

</note>

**Condition:**  -> [[http://www.phpwcms-docu.de/conf_inc_php_en.phtml|/config/phpwcms/conf.inc.php]] \\
  * $phpwcms['allow_ext_init']  = 1;
  * $phpwcms['allow_cntPHP_rt']   = 1;


----

~~UP~~

===== Documentation =====


**1.** Update to the latest version 
  * [[http://code.google.com/p/phpwcms/source/list|>= phpwcms version 1.4.4, rev 388, 2009/12/06]] or 
  * [[http://www.phpwcms-docu.de/download-dev-versionen.phtml|DEV - Version in ZIP Format]]! \\ 
  * Check the new configuration in **config.inc.php**


**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 [[english/phpwcms_replacer_rts/frontend_init/cp_trigger/sort-of-areas#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**.

<code js |h mootools.nuTabs.js |h >
/*
---
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'
    });
});
========== */
</code>

\\

==== Template ====

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

<note>
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.

</note>


<code html |h tab_sort_section_moto_nutabs_v13.tmpl |h >
/**
 ******************************************************************** 
 * 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//-->

</code>

\\

==== CSS ====

Example from [[http://mootools.net/shell/oskar/dvaXj/|mootools nuTabs]]



**File:** template/inc_css/specific/mootools/nuTabs.css
<code css|h nuTabs.css |h>
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;
    }
</code>