{{indexmenu_n>100}}

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


A short description for providing [[http://jqueryui.com/demos/tabs/|Tabs]] using the jQuery **U**ser**I**nterface UI.

[[http://jqueryui.com/home|jQuery UI]] provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

jQuery Tabs becomes possible only by the use of this frontend_init-Snippet: [[english/phpwcms_replacer_rts/frontend_init/cp_trigger/sort-of-areas]] 

\\
**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: -- \\
Base: [[http://jqueryui.com/demos/tabs/]]

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


Filename: **jquery.jquery-ui.min.js** \\
Folder: ** /template/lib/jquery/plugin/ **

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

Filename: **ui.all.css** //(aus dem UI-Set )// \\
Folder: ** /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:** [[english/phpwcms_replacer_rts/frontend_init/cp_trigger/sort-of-areas#php_script_v1.2]] //(Sorting of (template) areas)//  

</note>

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

----

~~UP~~

===== Documentation =====


**1.** Update to the 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 in ZIP format]]! \\ 
  * Check the new configuration in **config.inc.php**


**2.** Login and go to  ADMIN -> template - evaluate the new options
  * Select **jQuery 1.4**


**3.** Installation: 
  * Create with the following three texts the three specified files in the specified directories.
  * Install [[english/phpwcms_replacer_rts/frontend_init/cp_trigger/sort-of-areas#php_script_v1.2]] //(Sorting of (template) areas)//

**4.** In use:
  * Fill a CP register / tabs with your entries //(See example above)//.
  * Choose the template:  **tab_sort_section_jquery.tmpl** 
  * Save and watch the result in the FE :-)





\\

==== Template ====

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

<note>
Please also check out the new section command **[TABTITLE_ELSE]**. \\ 
//([[http://code.google.com/p/phpwcms/source/detail?r=372]])// \\
If an empty or alternative title is needed, use a simple "-" in the CP register. Now the contents of [TABTITLE_ELSE] is entered.

</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_v12.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 ====

Example from the [[http://jqueryui.com/|jQuery UI]] theme "base" //(Please have a closer look at the functioning of the themes)//: 

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

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

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

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

\\
**For Tabs are only used:** 
  * /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