CPs gruppieren: Tabs

Seit der Version r409 ist es möglich ContentParts für das FE zu gruppieren. Z.B. können mit dieser Funktion CPs in Tab´s gefasst werden.

Hier am Beispiel der einfachen MGFX.Tabs (mit fester Höhe) für MooTools gezeigt.

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

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

Tag: –

Dateiename: mootools.MGFXrotater.js
Verzeichnis: /template/lib/mootools/plugin-1.2/

Dateiename: mootools.MGFXtabs.js
Verzeichnis: /template/lib/mootools/plugin-1.2/

Dateiename: cp_register_tabs.php
Verzeichnis: /template/inc_script/frontend_render/

Dateiename: MGFXstyle.css
Verzeichnis: /template/inc_css/specific/mootools/

<note>

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

</note>

Bedingung: → /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 und gehe nach ARTIKEL → Seitenstruktur und Artikelliste → irgendein ContetPart — begutachte die neuen Optionen

• Wähle Register (Tabs): [x]

3. Installation:

• Installiere die Dateien aus dem ZIP-Archiv.

4. Im Gebrauch:

• Erstelle mehrere CPs unterhalb eines Artikel mit dem selben Abschnitt: [1] und unterschiedlichen Register: [Tab-Name]
• Sichern und das Ergebnis im FE ansehen

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

(Der Rotator (mootools.MGFXrotater.js) wird verwendet wenn eben diese Funktion “autoplay” abgerufen wird).

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

Beispiel aus dem MGFX.Tabs

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

Ist ein Scrollbalken an der rechten Seite erwünscht,

bitte folgende Klassen ergänzen:

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

Dieses kleine Script ist notwendig um den vom CMS autom. generierten Quelltext an die Erfordernisse des hier verwendeten TAB-Scripts anzupassen. In erster Linie wird jede Registerkarte um die Klasse “.tab-it” erweitert. Dazu kommt noch der alle Registerkarten umschließende Container <div class="tab-regcard"> ... </div>.
Zudem wird das JS in den HEAD-Bereich geladen.

Optionen für das JavaScript Version 1.3.0 (im PHP-Script einstellbar):

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

Datei: 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"]);
 
}
?>

Vorgegebener Quelltext:

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

Der Aufruf des J-Scripts.
- Das erste Argument ist der Registerreiter, das zweite Argument ist die Registerkarte. Eine drittes optionales Argument ist ein Satz von Optionen der die Standardwerte überschreibt (siehe PHP-Script).

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

Mit der Initialisierung: var tabs = new MGFX.Tabs('.tab-it','.tab-content'); (siehe 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>

Mit der Initialisierung: var tabs = new MGFX.Tabs('.tab-it','.tab-content'); (siehe 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>

Die vom CMS generiert Ausgabe des Quelltextes wird mit dem PHP-Script an die Originalausgabe angepasst.

Mit dieser neuen Funktion und einem kleinen PHP-Script können die verschiedensten TAB-Scripte verwendet werden.