CPs gruppieren seit r409: 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 für MooTools gezeigt.

Frontend:

Backend:

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

#home, .tab-container-sec {
    background-color:#ddd; position:relative; height:160px; width:450px; margin-bottom:10px;
}
.feature, .tab-content {
    background-color:#ddd; height:215px; position:absolute; width:450px; overflow:hidden; padding:5px 5px 5px 10px;
}
.feature img, .tab-content img {
    border:none;
}
 
#tabs, .tab-navigation {
    margin-left:0;margin-bottom:0;
}
#tabs li, .tab-navigation li {
    background-color:transparent;display:inline;float:none;list-style:none;
}
#tabs li a, .tab-navigation li a {
    background-color:#edd; color:#333; display:inline; height:auto;padding:5px 20px;text-decoration:none;width:auto;
}
#tabs li a.active, .tab-navigation li a.active {
    background-color:#ddd;color:#000;
}

Dieses kleine Script ist notwendig um den vom CMS autom. generierten Quelltext an die Erfordernisse des hier verwendeten TAB-Scripts anzupassen.

Options Version 1.3.0

• 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/mootools/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."); }
// ------------------------------------------------------------------
 
 
 
 
if(strpos($content["all"],'id="TABBOX') !== false) {
 
    $GLOBALS['block']['css']['MGFXstyle'] = 'specific/mootools/MGFXstyle.css';
 
    $mootools_more = array('Fx/Fx.Elements');
 
    initJSPlugin($mootools_more, true);
 
    initJSPlugin('MGFXrotater');
    initJSPlugin('MGFXtabs');
 
    $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;
 
 
// Source anpassen
 
    $content["all"] = str_replace('tab-item-','tab-it tab-item-',$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. Das erste Argument ist die Registerkarte, das zweite Argument ist die Registerkarte. Eine drittes optionales Argument ist ein Satz von Optionen der die Standardwerte überschreibt.

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