{{indexmenu_n>100}}

====== 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 [[http://mootools.net/forge/p/mgfx_tabs|MGFX.Tabs]] //(Fixed Height)// for MooTools. 

\\

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

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

</note>

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


----

~~UP~~

===== Description =====


**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 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 :-)

\\



==== JavaScript ====

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

//The rotator (mootools.MGFXrotater.js) is used when the function "autoplay" is called.// 


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

Example from [[http://seanmonstar.github.com/MGFX.Tabs/|MGFX.Tabs]]


**File:** 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>
\\

Is a scroll bar on the right side allowed,

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

please complete the following classes: 

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

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


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

Given source:

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



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

\\



==== CMS generated HTML ====

With the initialization: ##%% var tabs = new MGFX.Tabs('.tab-it','.tab-content');%%##  //(see 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-generated HTML with PHP and JS ====

With the initialization: ##%% var tabs = new MGFX.Tabs('.tab-it','.tab-content');%%## //(see 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>

\\


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.

\\