Table of Contents

jQuery UI Tabs

A short description for providing Tabs using the jQuery UserInterface UI.

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: Sorting of (template) areas


Frontend:

Backend:


Docu: –
Forum: –
Base: http://jqueryui.com/demos/tabs/

Author: K.Heermann (flip-flop) http://planmatrix.de 2010/02/15
- CSS: 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: jQuery UI v1.7.2 - UI-JS & css-Themes

PHP: php_script_v1.2 (Sorting of (template) areas)

</note>

Condition: → /config/phpwcms/conf.inc.php

Back to top

Documentation

1. Update to the latest version

2. Login and go to ADMIN → template - evaluate the new options

3. Installation:

4. In use:


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>

tab_sort_section_jquery.tmpl

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


CSS

Example from the 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 

@import "ui.base.css";
@import "ui.theme.css";

File: /template/inc_css/specific/jquery/base/ui.base.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");

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