[[jQuery UI Tabs]]
You are here: Willkommen im phpwcms-HowTo:wiki » Benutzerhandbuch (DE) » phpwcms System » ARTIKEL » ContentParts » Register (Tabs) » jQuery UI Tabs
Show pageOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

Differences

This shows you the differences between two versions of the page.

deutsch:phpwcms-system:artikel:contentparts:register-tabs:jquery-ui-tabs [2010/02/15 21:23]
Knut Heermann (flip-flop) 		deutsch:phpwcms-system:artikel:contentparts:register-tabs:jquery-ui-tabs [2018/06/03 18:08] (current)
Line 8: Line 8:
[[http://jqueryui.com/home|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. [[http://jqueryui.com/home|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: [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section]]
\\ \\
Line 24: Line 24:
Docu: -- \\ Docu: -- \\
-Forum: --+Forum: -- \\ 
 +Basis: [[http://jqueryui.com/demos/tabs/]]
**Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/02/15 // \\ **Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/02/15 // \\
Line 38: Line 39:
Verzeichnis: ** /template/lib/jquery/plugin/ ** Verzeichnis: ** /template/lib/jquery/plugin/ **
-Dateiename: **tab_sort_section_jquery.tmpl.tmpl** \\+Dateiename: **tab_sort_section_jquery.tmpl** \\
Verzeichnis: ** /template/inc_cntpart/tabs/ ** Verzeichnis: ** /template/inc_cntpart/tabs/ **
-Dateiename: **ui.all.css** \\+Dateiename: **ui.all.css** //(aus dem UI-Set )// \\
Verzeichnis: ** /template/inc_css/specific/jquery/themes/base/ ** Verzeichnis: ** /template/inc_css/specific/jquery/themes/base/ **
- +<note> 
-**Bedingung:** ##$phpwcms['allow_cntPHP_rt']   = 1;## -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]]  +**Download: {{:deutsch:phpwcms-system:artikel:contentparts:register-tabs:jquery_ui_and_theme_172.zip|jQuery UI v1.7.2 - UI-JS & css-Themes}}**
----- +
-----+
\\ \\
\\ \\
 +
 +**PHP:** [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.2]] //(Sortieren von Bereichen)//  
 +
 +</note>
 +
 +**Bedingung:**  -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\
 +  * $phpwcms['allow_ext_init']  = 1;
 +  * $phpwcms['allow_cntPHP_rt']   = 1;
 +
 +----
 +
 +~~UP~~
===== Beschreibung ===== ===== Beschreibung =====
-FIXME In Bearbeitung 
**1.** Update auf die jüngste Version **1.** Update auf die jüngste Version
Line 67: Line 77:
**3.** Installation: **3.** Installation:
  * Erstelle aus den drei folgenden Texten die drei angegebenen Dateien in den angegebenen Verzeichnissen.   * Erstelle aus den drei folgenden Texten die drei angegebenen Dateien in den angegebenen Verzeichnissen.
 +  * Installiere **PHP:** [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.2]] //(Sortieren von (Template) Bereichen)//
**4.** Im Gebrauch: **4.** Im Gebrauch:
-  * Fülle eine CP Register/Tabs mit deinen Einträgen //(Siehe Beispiel oben)//.+  * Fülle einen CP Register/Tabs mit deinen Einträgen //(Siehe Beispiel oben)//.
  * Wähle als Vorlage: **tab_sort_section_jquery.tmpl**   * Wähle als Vorlage: **tab_sort_section_jquery.tmpl**
  * Sichern und das Ergebnis im FE ansehen :-)   * Sichern und das Ergebnis im FE ansehen :-)
 +\\
Line 79: Line 90:
==== Template ==== ==== Template ====
-**Datei:**  /template/inc_cntpart/tabs/simpletabs01.tmpl+**Datei:**  /template/inc_cntpart/tabs/tab_sort_section_jquery.tmpl
<note> <note>
Line 88: Line 99:
</note> </note>
-**Update:** 26.01.10 by MP (pepe) - [[http://phpwcms-templates.de]] Manfred Peperkorn \\ 
-- Für eine bessere Integration von CPs und Artikeln mit dem Tag {SHOW_CONTENT:....} 
-<code html>selector: \'h3\' --> selector: \'h3.moo_registerTab\'</code>+<code html |h tab_sort_section_jquery.tmpl |h > 
 +/** 
 + ********************************************************************  
 + * 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
-<code html><h3 title="{TABTITLE}">{TABTITLE}</h3> --> <h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}<;/h3></code>+ * 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;  
 + ********************************************************************* 
 +*/
-<code html><h3 title="TabElse">TabElse</h3> --> <h3 class="moo_registerTab" title="TabElse">TabElse</h3></code>+<!--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';
-<code html |h simpletabs01.tmpl |h > +// ---- Load the right JS plugin 
-/* ******************************************************************** +initJSPlugin('jquery-ui.min');
-  moo_simpletabs01.tmpl for the CP Register (Tabs) +
-  http://digitarald.de/project/simple-tabs/1-0/showcase/tabbed/ +
-   +
-  26.12.09 KH (flip-flop) - http://planmatrix.de Knut Heermann +
-  26.01.10 Update: MP (pepe) - [[http://phpwcms-templates.de]] Manfred Peperkorn +
-  selector: \'h3\' -> selector: \'h3.moo_registerTab\' +
-  <;h3 title="{TABTITLE}">{TABTITLE}</h3> -> <h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3> +
-  <h3 title="TabElse">TabElse</h3> -> <h3 class="moo_registerTab" title="TabElse">TabElse</h3> +
-  --- +
-  Corresponding with the file /template/inc_css/specific/reg_tabs_simpletabs01.css +
-  Uses the js file lib/mootools/plugin-1.2/mootools.SimpleTabs.js +
-  - and lib/mootools/mootools-1.2-core-yc.js +
-  - Put this file into the Folder /template/inc_cntpart/tabs/* +
-   +
-  - Switch in your conf.inc.php -> $phpwcms['allow_cntPHP_rt']   = 1;  +
-*********************************************************************** */+
-<!--TABS_START//-->+// ---- 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]
-<div id="rgt_content"> 
-[TITLE]<h1>{TITLE}</h1>[/TITLE]+[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE] [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
-<div id="simpletabs">+[CP_TRIG_DEFINITION]
-[TABS_ENTRIES]{TABS_ENTRIES}[/TABS_ENTRIES]+[BLOCK_01X_PREFIX]<ul class="tabnav">[/BLOCK_01X_PREFIX] 
 +[BLOCK_01X_SUFFIX]</ul>[/BLOCK_01X_SUFFIX]
-</div>+[BLOCK_02X_PREFIX][/BLOCK_02X_PREFIX] 
 +[BLOCK_02X_SUFFIX][/BLOCK_02X_SUFFIX]
-[PHP]+[/CP_TRIG_DEFINITION]
-initJSPlugin('SimpleTabs');+[TABS_ENTRIES]
- $GLOBALS['block']['css']['reg_tabs_simpletabs01'] = 'specific/mootools/reg_tabs_simpletabs01.css'; +<div style="width: 560px;">; 
- $GLOBALS['block']['custom_htmlhead']['reg_tabs_simpletabs01'] = '  <script type="text/javascript"> +<div id="tabs"> 
-  //* <![CDATA[ *// +[CP_TRIG_WRAP_CONTENT] 
-  + {TABS_ENTRIES} 
 +[/CP_TRIG_WRAP_CONTENT] 
 +</div><!--/tabs--> 
 +</div>
- window.addEvent(\'domready\', function() { 
- var tabs = new SimpleTabs(\'simpletabs\', { +[/TABS_ENTRIES] 
- selector: \'h3.moo_registerTab\' +<!--TABS_END//-->;
- });+
- }); 
-  
- //* ]]> *// 
-  </script>'; 
- 
-[/PHP] 
- 
-</div> <!--  END id="rgt_content" //--> 
-<!--TABS_END//--> 
<!--TABS_ENTRY_START//--> <!--TABS_ENTRY_START//-->
-[TABTITLE] 
-<h3 class="moo_registerTab" title="{TABTITLE}">{TABTITLE}</h3> 
-[/TABTITLE] 
-[TABTITLE_ELSE] 
-<h3 class="moo_registerTab" title="TabElse">TabElse</h3> 
-[/TABTITLE_ELSE] 
- [TABCONTENT] 
- <div> 
- [TABHEADLINE]<h4>{TABHEADLINE}</h4>[/TABHEADLINE] 
- [TABTEXT]{TABTEXT}[/TABTEXT] 
- </div> 
- [/TABCONTENT] 
-<!--TABS_ENTRY_END//-->+[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]
-</code>+[BLOCK_02X] 
 +[TABCONTENT]<div id="tabs-[COUNTX]"> 
 + [TABHEADLINE]<h3>{TABHEADLINE}</h3>[/TABHEADLINE] 
 + [TABTEXT]{TABTEXT}[/TABTEXT] 
 +</div>[/TABCONTENT] 
 +[/BLOCK_02X]
-==== CSS ==== 
-**Datei:** /template/inc_css/specific/mootools/reg_tabs_simpletabs01.css+[/CP_TRIG_CONTENT]
-<code css |h reg_tabs_simpletabs01.css |h > +<!--TABS_ENTRY_END//-->
-/* CSS for simpletabs in RT "Register Tabs" */+
-#rgt_content { +<;/code>;
- font-size:1em; +
- line-height:135%; +
- margin:10px 35px 0pt 20px; +
- padding-bottom:55px; +
- position:relative; +
- z-index:5; +
- width: 500px; +
-}+
-#rgt_content p { +\\
- margin:0pt 0pt 10px; +
- padding:0pt; +
-}+
-#rgt_content h1, #rgt_content h2, #rgt_content h3, #rgt_content h4, #rgt_content h5, #rgt_content h6 { +==== CSS ====
- margin:0pt 0pt 15px; +
- padding:0pt; +
-}+
-#rgt_content div#simpletabs div.tab-wrapper { +Beispiel aus dem [[http://jqueryui.com/|jQuery UI]] Theme ";Base";: (Bitte schauen Sie sich die Funktionsweise der Themen genauer  an.)
- padding: 8px 8px 4px 8px; +
- border: 1px solid #d0d0d0; +
- background-color: #f0f0f0; +
- z-index: 5; +
-} +
-#rgt_content div#simpletabs ul.tab-menu { +
- list-style: none; +
- padding: 0; +
- margin: 0; +
- position: relative; +
- height: 21px; +
- z-index: 10; +
- top: 1px; +
- /* border-bottom: 1px solid #dedede; */ +
-} +
-#rgt_content div#simpletabs ul.tab-menu li { +
- float: left; +
- margin: 0 2px 0 0; +
- padding: 0; +
-} +
-#rgt_content div#simpletabs ul.tab-menu li a { +
- float: left; +
- display: block; +
- padding: 0 0 0 10px; +
-/* background: #dedede url(picture/navi/tabs/simple/inactive_tab.png) no-repeat left top; +
-*/ +
- background-color: #dedede; +
- color: #808080; +
- font-weight: bold; +
- text-decoration: none; +
- height: 21px; +
- overflow: hidden; +
- line-height: normal; +
-} +
-#rgt_content div#simpletabs ul.tab-menu li a span { +
- float: left; +
- display: block; +
- padding: 2px 10px 0 0; +
-/* background: #dedede url(picture/navi/tabs/simple/inactive_tab.png) no-repeat right top; */ +
- background-color: #dedede; +
- height: 21px; +
- cursor: pointer; +
-} +
-#rgt_content div.simpletabs ul.tab-menu li a:focus span { +
-}+
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a { +**Datei:** /template/inc_css/specific/jquery/base/ui.all.css 
-/* background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll left top; */ +<code css>; 
- background-color: #FDCC00; +@import "ui.base.css"; 
-}+@import "ui.theme.css"; 
 +</code>
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a span { +**Datei:** /template/inc_css/specific/jquery/base/ui.base.css 
-/* background: #FDCC00 url(picture/navi/tabs/simple/active_tab.png) no-repeat scroll right top; */ +<;code css>; 
- background-color: #FDCC00; +@import url("ui.core.css");
- color: #4E4E4E; +
-}+
-#rgt_content div#simpletabs ul.tab-menu li a:hover,  +@import url("ui.accordion.css"); 
-#rgt_content div#simpletabs ul.tab-menu li a:hover span { +@import url("ui.datepicker.css"); 
- background-color: #FF946F; +@import url("ui.dialog.css"); 
- color: #1E1E1E; +@import url("ui.progressbar.css"); 
-}+@import url("ui.resizable.css"); 
 +@import url("ui.slider.css"); 
 +@import url("ui.tabs.css"); 
 +</code>
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover,  +**Datei:** /template/inc_css/specific/jquery/base/ui.core.css
-#rgt_content div#simpletabs ul.tab-menu li.tab-selected a:hover span { +
- background-color: #FFAD1F; +
- color: #2E2E2E; +
-}+
 +**Datei:** /template/inc_css/specific/jquery/base/ui.theme.css
-</code>+\\ 
 +**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.1266265422.txt.gz · Last modified: 2018/06/03 18:06 (external edit)
Show pageOld revisions
Back to top
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