NAVIGATION
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/
<note>
Download: jQuery UI v1.7.2 - UI-JS & css-Themes (1.21 MiB, 319 downloads)
PHP: php_script_v1.2 (Sortieren von Bereichen)
</note>
Bedingung: → /config/phpwcms/conf.inc.php
1. Update auf die jüngste Version
2. Login und gehe nach ADMIN → Vorlagen - begutachte die neuen Optionen
3. Installation:
4. Im Gebrauch:
Datei: /template/inc_cntpart/tabs/tab_sort_section_jquery.tmpl
<note>
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.
</note>
/** ******************************************************************** * 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//-->
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