jQuery UI Tabs

Eine kurze Beschreibung für das Erstellen von Tabs mit dem jQuery UserInterface UI.

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: Sortieren von (Template) Bereichen


Frontend:

Backend:



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

Autor: K.Heermann (flip-flop) http://planmatrix.de 2010/02/15
- CSS: 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/

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

PHP: php_script_v1.2 (Sortieren von Bereichen)

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

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

Beschreibung

1. Update auf die jüngste Version

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

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.

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.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

Beispiel aus dem jQuery UI Theme “Base”: (Bitte schauen Sie sich die Funktionsweise der Themen genauer an.)

Datei: /template/inc_css/specific/jquery/base/ui.all.css

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

Datei: /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");

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
deutsch/phpwcms-system/artikel/contentparts/register-tabs/jquery-ui-tabs.txt · Last modified: 2010/02/21 11:15 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