{{indexmenu_n>30}}


====== jQuery SimpleTabs ======

**Einfache Tabs basierend auf JQuery, mit denen CP´s gruppiert werden können.**

Mittlerweile ist es mit der Aktivierung der Einstellung **Register (Tabs)** ##x## im CP möglich, CP´s innerhalb eines Artikels in Registern zu organisieren. 

Dazu müssen lediglich die Namen in **Register:** der zusammenzufassenden CP´s identisch sein und alle CP´s im selben **Abschnitt:** ##Nr## liegen.  

Ein Abschnitt beinhaltet Register und ein Register beinhaltet CP´s.

<note>
**Dieses Verfahren eignet sich nur bedingt für Seiten die auch hörbehinderte gerichtet sind, da die Registernamen vom CP-Inhalt getrennt werden **
</note>

{{:deutsch:andere-erweiterungen:jquery:register_tab_einstellung_fe01_1.gif|}}

{{:deutsch:andere-erweiterungen:jquery:register_tab_einstellung_fe02_1.gif|}}

\\
----
----
\\
**jquery.jQsimpleTabs.js** V1.0  07.03.12  

Docu: -- \\
Forum: [[http://forum.phpwcms.org/viewtopic.php?p=134169|CP´s in JQuery Tabs gruppieren]]


**Autor:**  uwe367 \\
wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de) \\
**CMS Version:** >= 1.4.4 (r381) \\ 
**Version:** V1.0 \\

**Dateiname:** template/lib/jquery/plugin/jquery.jQsimpleTabs.js \\
**Dateiname:** template/inc_css/specific/jQsimpleTabs.css


----

**Bedingung:**  -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\
  * JS im Browser eingeschaltet

-----
-----


\\



~~UP~~

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

===== Artikelübersicht: =====


{{:deutsch:andere-erweiterungen:jquery:register_tab_einstellung_be01_1.gif|}}

~~UP~~

===== Content-Parts: =====


==== CP "Text mit Bild" im Register 01 ====


{{:deutsch:andere-erweiterungen:jquery:register_tab_einstellung_be02_1.gif|}}

~~UP~~

==== CP "Bilder <div>" im Register 02 ====


{{:deutsch:andere-erweiterungen:jquery:register_tab_einstellung_be03_1.gif|}}

~~UP~~





===== HTML CP: =====

**Initialisierung von JS und CSS.**

Innerhalb des Artikels einen HTML-CP anlegen mit diesem Inhalt:

<code html>
<!-- CSS: {TEMPLATE}inc_css/specific/jQsimpleTabs.css -->
<!-- JS: jQsimpleTabs -->
</code>

\\



===== Templates: =====

**Text mit Bild**

In der Datei ##template/inc_cntpart/imagetext/float.tmpl## ablegen.


<code html|h float.tmpl|h>
[IMAGETEXT]
<div class="image-with-text-float">
{IMAGETEXT}
</div>
[/IMAGETEXT]
</code>

\\
**Bilder <div>**

In der Datei ##template/inc_cntpart/images/float.tmpl## ablegen.


<code html|h float.tmpl|h>
<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; settings will overwrite CP settings
;width			= 100
;height			= 100
;col				= 1
;zoom			= 1
;crop			= 0
;space			= 10
;lightbox		= 1
;nocaption		= 0
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
;center_image	= 0
<!--IMAGE_SETTINGS_END//-->

<!--IMAGES_HEADER_START//-->
<div class="images-float" id="images{ID}">

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

<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
	<div class="imageEntry[FIRST] first[/FIRST][LAST] last[/LAST][ROW] row{ROW}[/ROW]" id="img{IMGID}">
		{IMAGE}
		[CAPTION]<p>{CAPTION}</p>[/CAPTION][CAPTION_ELSE]<p>{IMGNAME}</p>[/CAPTION_ELSE]
	</div>
	<!-- 

		XFILE_INFO: (RT)    {XFILE_INFO:{IMAGE_ID}}
		XFILE_COPYR: (RT)   {XFILE_COPYR:{IMAGE_ID}}
		Caption:            {CAPTION}
		Alt:                {ALT}
		Link:               {LINK}
		Title:              {TITLE}
		Copyright:          {COPYRIGHT}
		Thumbnail image:    {THUMB_NAME}
		  relative:         {THUMB_REL}
		  absolute:         {THUMB_ABS}
		  height/width:     {THUMB_HEIGHT}px/{THUMB_WIDTH}px
		  height/width max: {THUMB_HEIGHT_MAX}px/{THUMB_WIDTH_MAX}px
		  columns:          {THUMB_COLUMNS}
		  image ID:         {IMAGE_ID}
		  image Hash:       {IMAGE_HASH}
		
		If you are not sure wrap zoomed image:
		[ZOOM]
		Zoomed (big) image: {IMAGE_NAME}
		  relative: {IMAGE_REL}
		  absolute: {IMAGE_ABS}
		  height/width: {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px
		[/ZOOM]		

	//-->
<!--IMAGES_ENTRY_END//-->


<!--IMAGES_ENTRY_SPACER_START//-->

	<!-- space between images {SPACE}px -->
	<img class="imageEntry" src="img/leer.gif" width="{SPACE}" height="50" border="0" alt="" />

<!--IMAGES_ENTRY_SPACER_END//-->


<!--IMAGES_ROW_SPACER_START//-->

	<!-- space between image rows {SPACE}px -->

<!--IMAGES_ROW_SPACER_END//-->



<!--IMAGES_FOOTER_START//-->
<div class="imageText">[TEXT]{TEXT}[/TEXT]</div>

</div>
<!--IMAGES_FOOTER_END//-->
</code>

\\





===== Java-Script: =====


In der Datei ##template/lib/jquery/plugin/jquery.jQsimpleTabs.js## ablegen.


<code js|h jquery.jQsimpleTabs.js|h>
/*************************************************************
* 07.03.12
*
* JQuery Skript fuer das Gruppieren mehrerer CP´s innerhalb 
* eines Registers im selben Abschnitt.
*
**************************************************************/

$(function () {
	var tabContainers = $('.tab-content');
	
	tabContainers.hide().filter(':first').show();
	
	// Wenn ein bestimmtes Register beim Seitenaufruf geoeffnet werden soll
	//tabContainers.hide().filter('#tab-register-032').show();
	
	$('.tab-navigation a').click(function () {
		tabContainers.hide();
		
		// Geschwindigkeit zum oeffnen der Tabs in ms (hier 500)
		tabContainers.filter(this.hash).show(500);
		
		$('.tab-container ul.tab-navigation a').removeClass('selected');
		$(this).addClass('selected');
		
		return false;
	}).filter(':first').click();
	
	// Wenn ein bestimmtes Register beim Seitenaufruf geoeffnet werden soll
	// }).filter('#tab-register-032').click();
	
	
	//Die folgende Zeile schlieszt alle Tabs beim Seitenaufruf. 
	//Soll der erste Tab geoeffnet sein, diese Zeile bitte loeschen oder auskomentieren.
	
	// $('.tab-content').hide(); 
	
}); 
</code>

\\



===== CSS: =====

In der Datei ##template/inc_css/specific/jQsimpleTabs.css## ablegen.


<code css|h jQsimpleTabs.css|h>
/*************************************************************
* 07.03.12 CSS zu
* JQuery Skript fuer das Gruppieren mehrerer CP´s innerhalb 
* eines Registers im selben Abschnitt.
*
**************************************************************/

.tab-container {
    min-height: 300px;
    border: 1px solid #ccc;
    width: 605px;
    padding: 0 25px 10px 25px;
}
.tab-navigation {
    list-style: none outside none;
    margin: 20px 0 12px 10px;
    padding: 0;
}
.tab-navigation li {
    display: inline;
}
.tab-navigation li a {
    background-color: mediumorchid;  /* #8EA0BA; */ 
    color: #fff;
    padding: 10px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    -moz-border radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-decoration: none;
}
.tab-navigation li a.selected {
    background-color: blueviolet; 
    color: #FFFFFF;
    padding-top: 10px;
}

.tab-navigation li a:hover {
    background-color: indigo; /* #606163; */
    color: #FFFFFF;
    padding-top: 10px;
}
.tab-navigation li a:focus {
    outline: 0 none;
}
.tab-content {
    overflow: hidden;
    border: 3px solid #606163;
    background-color: #D6D2DD; /* #DDDDDD; */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    margin-top: 3px;
    padding: 5px;
    width: 585px;
}
.tab-container-clearX {
    clear: both;
} 
</code>

\\