{{indexmenu_n>100}}

====== jQuery UI Tabs ======


Eine kurze Beschreibung für das Erstellen von [[http://jqueryui.com/demos/tabs/|Tabs]] mit dem jQuery **U**ser**I**nterface UI.

[[http://jqueryui.com/home|jQuery UI]] bietet Abstraktionen für Low-Level-Interaktion und Animationen, anspruchsvolle Effekte und sehr gute vorlagenfähige Widgets, auf  der jQuery-Bibliothek aufbauend die verwendet werden können um interaktive Webanwendungen zu erstellen.

Möglich wird der Einsatz der jQuery Tabs erst durch die Verwendung dieses frontend_init-Scriptes: [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section]] 

\\
**Frontend:**


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

**Backend:**

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

\\
----

Docu: -- \\
Forum: -- \\
Basis: [[http://jqueryui.com/demos/tabs/]]

**Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/02/15 // \\
- CSS:  [[http://jqueryui.com|jQuery UI]] \\
**CMS version:** >= V1.44 r388\\
**Version:** V1.0 \\
**Update:** -- \\

**Tag:** --


Dateiename: **jquery.jquery-ui.min.js** \\
Verzeichnis: ** /template/lib/jquery/plugin/ **

Dateiename: **tab_sort_section_jquery.tmpl** \\
Verzeichnis: ** /template/inc_cntpart/tabs/ **

Dateiename: **ui.all.css** //(aus dem UI-Set )// \\
Verzeichnis: ** /template/inc_css/specific/jquery/themes/base/ **

<note>
**Download: {{:deutsch:phpwcms-system:artikel:contentparts:register-tabs:jquery_ui_and_theme_172.zip|jQuery UI v1.7.2 - UI-JS & css-Themes}}**
\\
\\

**PHP:** [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.2]] //(Sortieren von Bereichen)//  

</note>

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

----

~~UP~~

===== Beschreibung =====


**1.** Update auf die jüngste Version 
  * [[http://code.google.com/p/phpwcms/source/list|>= phpwcms version 1.4.4, rev 388, 2009/12/06]] oder 
  * [[http://www.phpwcms-docu.de/download-dev-versionen.phtml|DEV - Version im ZIP Format]]! \\ 
  * Prüfe die neuen Konfigurationsvariablen in der **config.inc.php**


**2.** Login und gehe nach  ADMIN -> Vorlagen - begutachte die neuen Optionen
  * Wähle **jQuery 1.4**


**3.** Installation: 
  * Erstelle aus den drei folgenden Texten die drei angegebenen Dateien in den angegebenen Verzeichnissen.
  * Installiere **PHP:** [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.2]] //(Sortieren von (Template) Bereichen)//

**4.** Im Gebrauch:
  * Fülle einen CP Register/Tabs mit deinen Einträgen //(Siehe Beispiel oben)//.
  * Wähle als Vorlage: **tab_sort_section_jquery.tmpl** 
  * Sichern und das Ergebnis im FE ansehen :-)

\\



==== Template ====

**Datei:**  /template/inc_cntpart/tabs/tab_sort_section_jquery.tmpl

<note>
Schau dir bitte auch das neue **[TABTITLE_ELSE]** Sektionskommando an. \\ 
//([[http://code.google.com/p/phpwcms/source/detail?r=372]])// \\
Wenn ein leerer oder alternativer Titel gebraucht wird, verwende einen einfachen "-" im CP Register. Nun wird der Inhalt aus [TABTITLE_ELSE] eingetragen.

</note>


<code html |h tab_sort_section_jquery.tmpl |h >
/**
 ******************************************************************** 
 * Template to build in a jQuery tab snippet using jQuery-UI
 * tab_sort_section_query.tmpl for the CP Register (Tabs)
 * http://jqueryui.com/demos/tabs/
 * 
 * 15.02.10 Knut Heermann (flip-flop) - http://planmatrix.de 
 * ------------------------------------------------------------------
 * Selector: #tabs

 * Corresponding with the basic css file:
 * - template/inc_css/specific/jquery/themes/base/ui.all.css.css
 * 
 * Uses the js files: 
 * - template/lib/jquery/plugin/jquery.jquery-ui.min.js  (UI)
 * - template/lib/jquery/jquery-1.4.min.js (Core)
 * 
 * Recomended:
 * - template/inc_script/frontend_init/cp_trig_sort_section.php
 *
 *  
 * Put this file into the Folder 
 * - template/inc_cntpart/tabs/*
 * 
 * Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt']   = 1; 
 *********************************************************************
*/

<!--TABS_START//-->
<!--SORT_INTO_NEW_BLOCKS_V12//-->

[PHP] 
// ===========================================================================
// ---- Load all UI css classes
$GLOBALS['block']['css']['jquery_ui_tabs'] = 'specific/jquery/themes/base/ui.all.css';

// ---- Load the right UI css classes (Only these files are used for the tabs)
// $GLOBALS['block']['css']['jquery_ui_core'] = 'specific/jquery/themes/base/ui.core.css';
// $GLOBALS['block']['css']['jquery_ui_tabs'] = 'specific/jquery/themes/base/ui.tabs.css';
// $GLOBALS['block']['css']['jquery_ui_theme'] = 'specific/jquery/themes/base/ui.theme.css';


// ---- Load the right JS plugin
initJSPlugin('jquery-ui.min');

// ---- Load the right js
$GLOBALS['block']['custom_htmlhead']['jqueryui-tabs'] = '  <script type="text/javascript">
	//<![CDATA[
	$(function() {
		$("#tabs").tabs({
			collapsible: true
		});
		
		//setter
		$("#tabs").tabs(\'option\', \'fx\', { height: \'toggle\', opacity: \'toggle\' });
	});
	//]]>
	
	</script>';

// ===========================================================================
[/PHP]


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

[CP_TRIG_DEFINITION]

[BLOCK_01X_PREFIX]<ul class="tabnav">[/BLOCK_01X_PREFIX]
[BLOCK_01X_SUFFIX]</ul>[/BLOCK_01X_SUFFIX]

[BLOCK_02X_PREFIX][/BLOCK_02X_PREFIX]
[BLOCK_02X_SUFFIX][/BLOCK_02X_SUFFIX]

[/CP_TRIG_DEFINITION]

[TABS_ENTRIES]

<div style="width: 560px;">
<div id="tabs">
[CP_TRIG_WRAP_CONTENT]
	{TABS_ENTRIES}
[/CP_TRIG_WRAP_CONTENT]
</div><!--/tabs-->
</div>


[/TABS_ENTRIES]
<!--TABS_END//-->


<!--TABS_ENTRY_START//-->

[CP_TRIG_CONTENT]

[BLOCK_01X]
	<li><a href="#tabs-[COUNTX]">[TABTITLE]<b>{TABTITLE}</b>[/TABTITLE][TABTITLE_ELSE]<b>New Title</b>[/TABTITLE_ELSE]</a></li>
[/BLOCK_01X]

[BLOCK_02X]
[TABCONTENT]<div id="tabs-[COUNTX]">
	[TABHEADLINE]<h3>{TABHEADLINE}</h3>[/TABHEADLINE]
	[TABTEXT]{TABTEXT}[/TABTEXT]
</div>[/TABCONTENT]
[/BLOCK_02X]



[/CP_TRIG_CONTENT]

<!--TABS_ENTRY_END//-->

</code>

\\

==== CSS ====

Beispiel aus dem [[http://jqueryui.com/|jQuery UI]] Theme "Base": (Bitte schauen Sie sich die Funktionsweise der Themen genauer  an.)

**Datei:** /template/inc_css/specific/jquery/base/ui.all.css
<code css>
@import "ui.base.css";
@import "ui.theme.css";
</code>

**Datei:** /template/inc_css/specific/jquery/base/ui.base.css
<code css>
@import url("ui.core.css");

@import url("ui.accordion.css");
@import url("ui.datepicker.css");
@import url("ui.dialog.css");
@import url("ui.progressbar.css");
@import url("ui.resizable.css");
@import url("ui.slider.css");
@import url("ui.tabs.css");
</code>

**Datei:** /template/inc_css/specific/jquery/base/ui.core.css

**Datei:** /template/inc_css/specific/jquery/base/ui.theme.css

\\
**Für die Tabs werden lediglich verwendet:** 
  * /template/inc_css/specific/jquery/base/ui.core.css
  * /template/inc_css/specific/jquery/base/ui.tabs.css
  * /template/inc_css/specific/jquery/base/ui.theme.css