Group CPs: Tabs

Since the version r409, it is possible to group content parts for the FE. E.g. with this function you can be combinedin CPs in Tab's.

This shows an example of the simple MGFX.Tabs (Fixed Height) for MooTools.

Docu: –
Forum: –
Basis: http://mootools.net/forge/p/mgfx_tabs

Author: K.Heermann (flip-flop) http://planmatrix.de 2011/03/21
CMS version: >= V1.47 r409
Version: V1.0
Update: –

Tag: –

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

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

Filename: cp_register_tabs.php
Folder: /template/inc_script/frontend_render/

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

<note>

Download: MGFX.Tabs V1.3 - JS, Script, CSS (5 KiB, 125 downloads)

</note>

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

• $phpwcms['allow_ext_render'] = 1;

1. Update auf die jüngste Version

• >= phpwcms version 1.4.7, rev 409, 2010/12/12
• Prüfe die neuen Konfigurationsvariablen in der config.inc.php

2. Login and goto ARTICLE → site structure and article list → any ContetPart — see the new options.

• Choose tabs: [x]

3. Installation:

• Install the files from the ZIP archive.

4. In use:

• Create multiple CPs below an article with the same subsection: [1] and tab: [Tab Name]
• Back up and study the result in the FE

File: /template/lib/mootools/plugin-1.2/mootools.MGFXtabs.js

The rotator (mootools.MGFXrotater.js) is used when the function “autoplay” is called.

/*
---
script: tabs.js
description: MGFX.Tabs, extension of base class that adds tabs to control the rotater.
authors: Sean McArthur (http://seanmonstar.com)
license: MIT-style license
requires:
 core/1.3.0: [Event, Element.Event, Fx.CSS]
 more/1.3.0.1: [Fx.Elements]
provides: [MGFX.Tabs]
...
*/
 
//MGFX.Tabs. Copyright (c) 2008-2010 Sean McArthur <http://seanmonstar.com/>, MIT Style License.
 
if(!window.MGFX) MGFX = {};
 
MGFX.Tabs = new Class({
 
    Extends: MGFX.Rotater,
 
    options: {
        autoplay: false,
        onShowSlide: function(slideIndex) {
            this.tabs.removeClass('active');
            this.tabs[slideIndex].addClass('active');
        }
    },
 
    initialize: function(tabs, slides, options){
        this.setOptions(options);
        this.tabs = $$(tabs);
        this.createTabs();
        if(this.options.hash && window.location.hash) {
            this.getHashIndex();
        }
        return this.parent(slides,options);
    },
 
    createTabs: function () {
        var that = this;
        this.tabs.forEach(function(tab,index){
            //need index, thats why theres the forEach
            tab.addEvent('click', function(event){
                event.preventDefault();
                that.showSlide(index);
                that.stop(true);
            });
        });
    }.protect(),
 
    getHashIndex: function() {
        var hash = window.location.hash.substring(1);
        this.tabs.forEach(function(el, index) {
            if(el.get('id') == hash) {
                options.startIndex = index;
            }
        });
    }.protect()
 
});
 
if(!window.Tabs) var Tabs = MGFX.Tabs;

Example from MGFX.Tabs

File: template/inc_css/specific/mootools/MGFXstyle.css

.tab-regcard {
    background-color:#ccccee;
    position:relative;
    height:215px;
    width:450px;
    padding:5px 5px 5px 10px;
    margin-bottom:10px;
    border: 1px solid #9596ef;
    margin-top: -1px;
    z-index: 10;
}
.tab-content {
/*    background-color:#ddd; */
    height:215px;
    position:absolute;
    width:450px;
    overflow:hidden;
 
}
.tab-content img {
    border:none;
}
 
.tab-navigation {
    margin-left:0;
    margin-bottom:0;
    padding: 0 0 5px 0;
    z-index: 20;
    position:relative;
}
.tab-navigation li {
    background-color:transparent;
    display:inline;
    float:none;
    list-style:none;
}
.tab-navigation li a {
    background-color:#9596ef;
    color:#fff;
    font-weight: bold;
    display:inline;
    height:auto;
    padding:5px 20px 5px 20px;
    text-decoration:none;
    width:auto;
    border: 1px solid transparent;
    border-bottom: none;
    z-index: 20;
}
.tab-navigation li.active a {
    background-color:#ccccee;
    color:#000;
    border: 1px solid #9596ef;
    border-bottom: none;
}

Is a scroll bar on the right side allowed,

please complete the following classes:

.tab-regcard {
    height:220px;           /* Aendern von 215 nach 220 */
}
 
.tab-content {
    height:220px;           /* Aendern von 215 nach 220 */
 
/*    overflow: hidden; */  /* Auskommetieren */
    overflow-y: scroll;     /* Scrollbalken immer vorhanden */
/*    overfolw-y: auto; */  /* Alternativ: Scrollbalken wird eingeblendet wenn notwendig */
}

This small Script is necessarily to adapt the autom. generated source text of the CMS to the requirements of the used TAB Script. First and foremost, any tab is extendet with the class “.tab-it” erweitert. Last but not least an all the tabs surrounding container <div class="tab-regcard"> ... </div>.
In addition, the JS is loaded into the HEAD section.

Options for the JavaScript Version 1.3.0 (in PHP-Script justable):

• slideInterval: (int) Time in milliseconds to remain on each slide. Default: 5 seconds.
• transitionDuration: (int) Time in milliseconds for the transition effect to take. Default: 1 second.
• startIndex: (int) A zero-based number for which Tab should be displayed first. Default: 0 (first Tab).
• autoplay: (boolean) Whether the tabs should automatically rotate. Default: false.
• hover: (boolean) Whether the mouse hovering over a tab should stop the autoplay. Default: true.
• hash: (boolean) Whether the Tabs should examine the hash of the URL to determine the startindex. Example: “example.com/portfolio#card”. Default: true.

File: template/inc_script/frontend_render/cp_register_tabs.php

<?php
/**
 ********************************************************************
 * KH 13.12.2010: For CP Reg Tabs since r409
 * http://mootools.net/forge/p/mgfx_tabs
 *
 * Fx/Fx.Elements
 * MGFXrotator
 * MGFXtabs
 ********************************************************************/
 
// ------------------------------------------------------------------
// obligate check for phpwcms constants
if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); }
// ------------------------------------------------------------------
 
 
 
// Is the switch "tabs: " in a CP active?
if(strpos($content["all"],'id="TABBOX') !== false) {
 
    // Load the CSS file
    $block['css']['MGFXstyle'] = 'specific/mootools/MGFXstyle.css';
 
    // Load the required "more" component
    $mootools_more = array('Fx/Fx.Elements');
 
    initJSPlugin($mootools_more, true);
 
    // Load the required "plugins"
    initJSPlugin('MGFXrotater');
    initJSPlugin('MGFXtabs');
 
    // Load the runtime JS into the head area
    $js ='
        <script type="text/javascript">
        window.addEvent(\'domready\',function(){
            this.tabs = new MGFX.Tabs(\'.tab-it\',\'.tab-content\',{
                autoplay: false,
                transitionDuration:500,
                slideInterval:3000,
                hover: true
            });
        });
        </script>
        ';
 
    $block['custom_htmlhead']['MGFXtabs.js'] = $js;
 
 
    // Customize the html source (add the class "tab-it")
    $content["all"] = str_replace('tab-item-','tab-it tab-item-',$content["all"]);
    // Insert the class tab-regcard between last </ul> and first <li>
    $content["all"] = preg_replace('/\<ul class="tab-navigation"\>(.*?)\<\/ul\>/s','<ul class="tab-navigation">$1</ul>'.LF.'<div class="tab-regcard">', $content["all"]);
    // close the the inserted class tab-regcard behind the last </li>
    $content["all"] = str_replace('<div class="tab-container-clear"></div>','</div>'.LF.'<div class="tab-container-clear"></div>',$content["all"]);
 
}
?>

Given source:

   <ul id="tabs">
     <li><a class="tab" href="#" id="one">One</a></li>
     <li><a class="tab" href="#" id="two">Two</a></li>
     <li><a class="tab" href="#" id="three">Three</a></li>
   </ul>
   <div id="home">
     <div class="feature">
       -- CONTENT --
     </div>
     <div class="feature"">
       -- CONTENT --
     </div>
     <div class="feature">
       -- CONTENT --
     </div>
   </div>

Invoke the constructor.
The first argument is the tab buttons, the second argument is the tab panes. A third optional argument is a set of options to override the defaults. (see PHP-Script).

var tabs = new MGFX.Tabs('#tabs li a', '#home .feature');

With the initialization: var tabs = new MGFX.Tabs('.tab-it','.tab-content'); (see PHP-Script)

<div id="TABBOX-ec32c07eb24dc923747f1af4c062e1d3" class="tab-container">
    <ul class="tab-navigation">
        <li class="tab-item-1 tab-first"><a href="#tab-cp-tab010" title="CP-Tab01">CP-Tab01</a></li>
        <li class="tab-item-2"><a href="#tab-cp-tab021" title="CP-Tab02">CP-Tab02</a></li>
        <li class="tab-item-3 tab-last"><a href="#tab-cp-tab032" title="CP-Tab03">CP-Tab03</a></li>
    </ul>
 
    <div id="tab-cp-tab010" class="tab-content">
        -- CONTENT --
    </div>
 
    <div id="tab-cp-tab021" class="tab-content">
        -- CONTENT --
    </div>
 
    <div id="tab-cp-tab032" class="tab-content">
        -- CONTENT --
    </div>
 
    <div class="tab-container-clear"></div>
</div>

With the initialization: var tabs = new MGFX.Tabs('.tab-it','.tab-content'); (see PHP-Script)

<div id="TABBOX-ec32c07eb24dc923747f1af4c062e1d3" class="tab-container">
    <ul class="tab-navigation">
        <li class="tab-it tab-item-1 tab-first active"><a href="#tab-cp-tab010" title="CP-Tab01">CP-Tab01</a></li>
        <li class="tab-it tab-item-2"><a href="#tab-cp-tab021" title="CP-Tab02">CP-Tab02</a></li>
        <li class="tab-it tab-item-3 tab-last"><a href="#tab-cp-tab032" title="CP-Tab03">CP-Tab03</a></li>
    </ul>
 
    <div class="tab-regcard">
        <div style="visibility: visible; opacity: 1;" id="tab-cp-tab010" class="tab-content">
            -- CP-CONTENT --
        </div>
 
        <div style="visibility: hidden; opacity: 0;" id="tab-cp-tab021" class="tab-content">
            -- CP-CONTENT --
        </div>
 
        <div style="visibility: hidden; opacity: 0;" id="tab-cp-tab032" class="tab-content">
            -- CP-CONTENT --
        </div>
    </div>
 
    <div class="tab-container-clear"></div>
</div>

The generated source by the CMS in FE is adjusted with the PHP script to the original edition.

With this new feature and a small PHP script, you can use various TAB scripts.