{{indexmenu_n>100}}

====== 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 [[http://mootools.net/forge/p/mgfx_tabs|MGFX.Tabs]] //(mit fester Höhe)// für MooTools gezeigt. 

\\

===== Frontend: =====

{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs1-01-fe_1.gif|}}

{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs1-02-fe_1.gif|}}

{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs1-03-fe_1.gif|}}



===== Backend: =====


{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs-00-be_1.gif|}}

{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs-01-be_1.gif|}}

{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs-02-be_1.gif|}}

{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs-03-be_1.gif|}}

\\

======  ======

----

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: {{:deutsch:phpwcms-system:artikel:scripte:mgfx_tabs.zip|MGFX.Tabs  V1.3 - JS, Script, CSS}} 

</note>

**Bedingung:**  -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\
  * $phpwcms['allow_ext_render']  = 1;


----

~~UP~~

===== Beschreibung =====


**1.** Update auf die jüngste Version 
  * [[http://code.google.com/p/phpwcms/source/list|>= 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 :-)

\\



==== JavaScript ====

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

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


<code js |h mootools.MGFXtabs.js |h >
/*
---
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;
</code>



\\

~~UP~~

==== CSS ====

Beispiel aus dem [[http://seanmonstar.github.com/MGFX.Tabs/|MGFX.Tabs]]


**Datei:** template/inc_css/specific/mootools/MGFXstyle.css

<code css|h MGFXstyle.css |h>
.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;
}
</code>
\\

Ist ein Scrollbalken an der rechten Seite erwünscht, 

{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs1-03_1-fe_1.gif|}}

bitte folgende Klassen ergänzen: 

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



\\
~~UP~~

==== PHP ====

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


<code php|h cp_register_tabs.php |h>
<?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"]);
	
}
?>
</code>

\\

==== Original HTML ====

Vorgegebener Quelltext:

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



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'); %%##

\\



==== CMS generiertes HTML ====

Mit der Initialisierung: ##%% var tabs = new MGFX.Tabs('.tab-it','.tab-content');%%##  //(siehe PHP-Script)//


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

\\

==== CMS generiertes HTML mit PHP und JS ====

Mit der Initialisierung: ##%% var tabs = new MGFX.Tabs('.tab-it','.tab-content');%%## //(siehe PHP-Script)// \\



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

\\


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.

\\