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/

Download: jQuery UI v1.7.2 - UI-JS & css-Themes (1.21 MiB, 81 downloads)

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

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

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

Documentation

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


Template

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

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.

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
  • /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: 2010/02/21 11:17 by Knut Heermann (flip-flop)
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