{{indexmenu_n>10}}

====== Simple Tabs (MooTools v1.2x) ======


A short version in english - for using the simple tabs from Harald Kirschner in the **cp register/tabs**.

"Small, simple and unobtrusive Tab plugin for MooTools (v1.2x) including support for Ajax content. Overlays semantic XHTML markup with a tabbed interface without additional changes. Customise the style and behaviour by changing the simplified CSS or via various custom Events."

[[http://digitarald.de/project/simple-tabs/|SimpleTabs - Unobtrusive Tabs + Ajax (v1.0)]]

\\
**Frontend:**

{{:english:phpwcms-system:article:contentparts:register-tabs:simple_tabs_fe_01_1.gif|}}

**Backend:**

{{:english:phpwcms-system:article:contentparts:register-tabs:simple_tabs_be_01_1.gif|}}

\\
----

Docu: -- \\
Forum: --

**Autor:** K.Heermann (flip-flop) http://planmatrix.de //2009/12/27 // \\
- CSS made by Oliver Georgi http://phpwcms.de \\
**CMS version:** >= V1.44 r388\\
**Version:** V1.0 \\
**Update:** 26.01.10 by MP (pepe) - [[http://phpwcms-templates.de]] Manfred Peperkorn \\
- For better integration of CPs and articles with the tag {SHOW_CONTENT:....}

**Tag:** --


Filename: **mootools.SimpleTabs.js** \\
Folder: ** /template/lib/mootools/plugin-1.2/ **

Filename: **simpletabs01.tmpl** \\
Folder: ** /template/inc_cntpart/tabs/ **

Filename: **reg_tabs_simpletabs01.css** \\
Folder: ** /template/inc_css/specific/mootools/ **


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

===== Description =====


**1.** Update to the very latest version 
  * [[http://code.google.com/p/phpwcms/source/list|>= phpwcms version 1.4.4, rev 388, 2009/12/06]] or 
  * [[http://www.phpwcms-docu.de/download-dev-versions.phtml|DEV - Version ZIP Format]]! \\ 
  * check the new configvars in **config.inc.php**


**2.** Login and goto ADMIN -> Templates - see the new options 
  * choose **MooTools 1.2**, load instantly (?), use google ajax lib if you prefer. \\ It's just important to choose **MooTools 1.2** :!:


**3.** Installation: 
  * Copy and paste the three files below into the specified folder.

**4.** In use:
  * Setup a Register/tabs content part with your entries.
  * Choose the **simpletabs01.tmpl** 
  * Save and you should be done :-)

<note>
There is a new Template replacer to add JavaScript dynamically. \\
//Have a look: [[http://code.google.com/p/phpwcms/source/detail?r=381]]// Example:  
<code><!-- JS: SimpleTabs --></code> 
need exactly the following file in that path \\ 
**template/lib/mootools/plugin-1.2/mootools.SimpleTabs.js** you can use something like 
<code<php><!-- JS: http://digitarald.de/project/simple-tabs/1-0/source/SimpleTabs.js --></code> 
too.
:!: Not tested :!:

thats for the template.

In php scripts //(at example special frontend_render cases or modules)// you can use 
<code php>
<?php
initJSPlugin('SimpleTabs');
?>
</code>

it's the same.

In case you call a plugin in these ways, MooTools Lib will always be included. \\
That's all.

</note>

==== JavaScript ====

**File:**  /template/lib/mootools/plugin-1.2/mootools.SimpleTabs.js \\
//(identical to [[http://digitarald.de/project/simple-tabs/1-0/source/SimpleTabs.js]])//


<code js |h mootools.SimpleTabs.js |h >
/**
 * SimpleTabs - Unobtrusive Tabs with Ajax
 *
 * @example
 *
 *	var tabs = new SimpleTabs($('tab-element'), {
 * 		selector: 'h2.tab-tab'
 *	});
 *
 * @version		1.0
 *
 * @license		MIT License
 * @author		Harald Kirschner <mail [at] digitarald.de>
 * @copyright	2007 Author
 */
var SimpleTabs = new Class({

	Implements: [Events, Options],

	/**
	 * Options
	 */
	options: {
		show: 0,
		selector: '.tab-tab',
		classWrapper: 'tab-wrapper',
		classMenu: 'tab-menu',
		classContainer: 'tab-container',
		onSelect: function(toggle, container, index) {
			toggle.addClass('tab-selected');
			container.setStyle('display', '');
		},
		onDeselect: function(toggle, container, index) {
			toggle.removeClass('tab-selected');
			container.setStyle('display', 'none');
		},
		onRequest: function(toggle, container, index) {
			container.addClass('tab-ajax-loading');
		},
		onComplete: function(toggle, container, index) {
			container.removeClass('tab-ajax-loading');
		},
		onFailure: function(toggle, container, index) {
			container.removeClass('tab-ajax-loading');
		},
		onAdded: Class.empty,
		getContent: null,
		ajaxOptions: {},
		cache: true
	},

	/**
	 * Constructor
	 *
	 * @param {Element} The parent Element that holds the tab elements
	 * @param {Object} Options
	 */
	initialize: function(element, options) {
		this.element = $(element);
		this.setOptions(options);
		this.selected = null;
		this.build();
	},

	build: function() {
		this.tabs = [];
		this.menu = new Element('ul', {'class': this.options.classMenu});
		this.wrapper = new Element('div', {'class': this.options.classWrapper});

		this.element.getElements(this.options.selector).each(function(el) {
			var content = el.get('href') || (this.options.getContent ? this.options.getContent.call(this, el) : el.getNext());
			this.addTab(el.innerHTML, el.title || el.innerHTML, content);
		}, this);
		this.element.empty().adopt(this.menu, this.wrapper);

		if (this.tabs.length) this.select(this.options.show);
	},

	/**
	 * Add a new tab at the end of the tab menu
	 *
	 * @param {String} inner Text
	 * @param {String} Title
	 * @param {Element|String} Content Element or URL for Ajax
	 */
	addTab: function(text, title, content) {
		var grab = $(content);
		var container = (grab || new Element('div'))
			.setStyle('display', 'none')
			.addClass(this.options.classContainer)
			.inject(this.wrapper);
		var pos = this.tabs.length;
		var evt = (this.options.hover) ? 'mouseenter' : 'click';
		var tab = {
			container: container,
			toggle: new Element('li').grab(new Element('a', {
				href: '#',
				title: title
			}).grab(
				new Element('span', {html: text})
			)).addEvent(evt, this.onClick.bindWithEvent(this, [pos])).inject(this.menu)
		};
		if (!grab && $type(content) == 'string') tab.url = content;
		this.tabs.push(tab);
		return this.fireEvent('onAdded', [tab.toggle, tab.container, pos]);
	},

	onClick: function(evt, index) {
		this.select(index);
		return false;
	},

	/**
	 * Select the tab via tab-index
	 *
	 * @param {Number} Tab-index
	 */
	select: function(index) {
		if (this.selected === index || !this.tabs[index]) return this;
		if (this.ajax) this.ajax.cancel().removeEvents();
		var tab = this.tabs[index];
		var params = [tab.toggle, tab.container, index];
		if (this.selected !== null) {
			var current = this.tabs[this.selected];
			if (this.ajax && this.ajax.running) this.ajax.cancel();
			params.extend([current.toggle, current.container, this.selected]);
			this.fireEvent('onDeselect', [current.toggle, current.container, this.selected]);
		}
		this.fireEvent('onSelect', params);
		if (tab.url && (!tab.loaded || !this.options.cache)) {
			this.ajax = this.ajax || new Request.HTML();
			this.ajax.setOptions({
				url: tab.url,
				method: 'get',
				update: tab.container,
				onFailure: this.fireEvent.pass(['onFailure', params], this),
				onComplete: function(resp) {
					tab.loaded = true;
					this.fireEvent('onComplete', params);
				}.bind(this)
			}).setOptions(this.options.ajaxOptions);
			this.ajax.send();
			this.fireEvent('onRequest', params);
		}
		this.selected = index;
		return this;
	}

});
</code>

\\

==== Template ====

**File:**  /template/inc_cntpart/tabs/simpletabs01.tmpl

And please have a look to the new **[TABTITLE_ELSE]** section command. \\
If you need any empty title option, use single "-" in CP Register,  which allows forced [TABTITLE_ELSE] section.


<note>
And please have a look to the new **[TABTITLE_ELSE]** section command. \\ 
//([[http://code.google.com/p/phpwcms/source/detail?r=372]])// \\
If you need any empty title option, use single "-" in CP Register,  which allows forced [TABTITLE_ELSE] section.

</note>

**Update:** 26.01.10 by MP (pepe) - [[http://phpwcms-templates.de]] Manfred Peperkorn \\
- For better integration of CPs and articles with the tag {SHOW_CONTENT:....}

<code html>selector: \'h3\' --> selector: \'h3.moo_registerTab\'</code>

<code html><h3 title="{TABTITLE}">{TABTITLE}</h3> --> <h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3></code>

<code html><h3 title="TabElse">TabElse</h3> --> <h3 class="moo_registerTab" title="TabElse">TabElse</h3></code>




<code html |h simpletabs01.tmpl |h >
/* ********************************************************************
  moo_simpletabs01.tmpl for the CP Register (Tabs)
  http://digitarald.de/project/simple-tabs/1-0/showcase/tabbed/
  
  26.12.09 KH (flip-flop) - http://planmatrix.de Knut Heermann
  26.01.10 Update: MP (pepe) - [[http://phpwcms-templates.de]] Manfred Peperkorn
  selector: \'h3\' -> selector: \'h3.moo_registerTab\'
  <h3 title="{TABTITLE}">{TABTITLE}</h3> -> <h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3>
  <h3 title="TabElse">TabElse</h3> -> <h3 class="moo_registerTab" title="TabElse">TabElse</h3>
  ---
  Corresponding with the file /template/inc_css/specific/reg_tabs_simpletabs01.css
  Uses the js file lib/mootools/plugin-1.2/mootools.SimpleTabs.js
  - and lib/mootools/mootools-1.2-core-yc.js
  - Put this file into the Folder /template/inc_cntpart/tabs/*
  
  - Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt']   = 1; 
*********************************************************************** */

<!--TABS_START//-->

<div id="rgt_content">

[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]

<div id="simpletabs">

[TABS_ENTRIES]{TABS_ENTRIES}[/TABS_ENTRIES]

</div>

[PHP]

initJSPlugin('SimpleTabs');

	$GLOBALS['block']['css']['reg_tabs_simpletabs01'] = 'specific/mootools/reg_tabs_simpletabs01.css';
	$GLOBALS['block']['custom_htmlhead']['reg_tabs_simpletabs01'] = '  <script type="text/javascript">
  //* <![CDATA[ *//
  

	window.addEvent(\'domready\', function() {

		var tabs = new SimpleTabs(\'simpletabs\', {
			selector: \'h3.moo_registerTab\'
		});

	});
	
	//* ]]> *//
  </script>';

[/PHP]

</div> <!--  END id="rgt_content" //-->
<!--TABS_END//-->

<!--TABS_ENTRY_START//-->
[TABTITLE]
<h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3>
[/TABTITLE]
[TABTITLE_ELSE]
<h3 class="moo_registerTab" title="TabElse">TabElse</h3>
[/TABTITLE_ELSE]
	[TABCONTENT]
	<div>
		[TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE]
		[TABTEXT]{TABTEXT}[/TABTEXT]
	</div>
	[/TABCONTENT]

<!--TABS_ENTRY_END//-->


</code>


==== CSS ====

**File:** /template/inc_css/specific/mootools/reg_tabs_simpletabs01.css

<code css |h reg_tabs_simpletabs01.css |h >
/* CSS for simpletabs in RT "Register Tabs" */

#rgt_content {
	font-size:1em;
	line-height:135%;
	margin:10px 35px 0pt 20px;
	padding-bottom:55px;
	position:relative;
	z-index:5;
	width: 500px;
}

#rgt_content p {
	margin:0pt 0pt 10px;
	padding:0pt;
}

#rgt_content h1, #rgt_content h2, #rgt_content h3, #rgt_content h4, #rgt_content h5, #rgt_content h6 {
	margin:0pt 0pt 15px;
	padding:0pt;
}

#rgt_content div#simpletabs div.tab-wrapper {
	padding: 8px 8px 4px 8px;
	border: 1px solid #d0d0d0;
	background-color: #f0f0f0;
	z-index: 5;
}
#rgt_content div#simpletabs ul.tab-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	height: 21px;
	z-index: 10;
	top: 1px;
	/* border-bottom: 1px solid #dedede; */
}
#rgt_content div#simpletabs ul.tab-menu li {
	float: left;
	margin: 0 2px 0 0;
	padding: 0;
}
#rgt_content div#simpletabs ul.tab-menu li a {
	float: left;
	display: block;
	padding: 0 0 0 10px;
/*	background: #dedede url(picture/navi/tabs/simple/inactive_tab.png) no-repeat left top;
*/
	background-color: #dedede;
	color: #808080;
	font-weight: bold;
	text-decoration: none;
	height: 21px;
	overflow: hidden;
	line-height: normal;
}
#rgt_content div#simpletabs ul.tab-menu li a span {
	float: left;
	display: block;
	padding: 2px 10px 0 0;
/*	background: #dedede url(picture/navi/tabs/simple/inactive_tab.png) no-repeat right top; */
	background-color: #dedede;
	height: 21px;
	cursor: pointer;
}
#rgt_content div.simpletabs ul.tab-menu li a:focus span {
}

#rgt_content div#simpletabs ul.tab-menu li.tab-selected a {
/*	background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll left top; */
	background-color: #FDCC00;
}

#rgt_content div#simpletabs ul.tab-menu li.tab-selected a span {
/*	background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll right top; */
	background-color: #FDCC00;
	color: #4E4E4E;
}

#rgt_content div#simpletabs ul.tab-menu li a:hover, 
#rgt_content div#simpletabs ul.tab-menu li a:hover span {
	background-color: #FF946F;
	color: #1E1E1E;
}

#rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover, 
#rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover span {
	background-color: #FFAD1F;
	color: #2E2E2E;
}


</code>