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



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


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 (1.21 MiB, 299 downloads)

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



  • $phpwcms['allow_ext_init'] = 1;
  • $phpwcms['allow_cntPHP_rt'] = 1;


1. Update to the latest version

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 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 :-)


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

<note> Please also check out the new section command [TABTITLE_ELSE].
If an empty or alternative title is needed, use a simple ”-” in the CP register. Now the contents of [TABTITLE_ELSE] is entered.



 * 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;
// ===========================================================================
// ---- 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
// ---- Load the right js
$GLOBALS['block']['custom_htmlhead']['jqueryui-tabs'] = '  <script type="text/javascript">
    $(function() {
            collapsible: true
        $("#tabs").tabs(\'option\', \'fx\', { height: \'toggle\', opacity: \'toggle\' });
// ===========================================================================
[BLOCK_01X_PREFIX]<ul class="tabnav">[/BLOCK_01X_PREFIX]
<div style="width: 560px;">
<div id="tabs">
    <li><a href="#tabs-[COUNTX]">[TABTITLE]<b>{TABTITLE}</b>[/TABTITLE][TABTITLE_ELSE]<b>New Title</b>[/TABTITLE_ELSE]</a></li>
[TABCONTENT]<div id="tabs-[COUNTX]">


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

  • /template/inc_css/specific/jquery/base/ui.tabs.css
  • /template/inc_css/specific/jquery/base/ui.theme.css
english/phpwcms-system/article/contentparts/register-tabs/jquery-ui-tabs.txt · Last modified: 2018/06/03 18:09 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0