Differences

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

deutsch:phpwcms-system:artikel:scripte:cp-tabs [2011/03/23 08:19]
Knut Heermann (flip-flop)
deutsch:phpwcms-system:artikel:scripte:cp-tabs [2018/06/03 18:08] (current)
Line 1: Line 1:
{{indexmenu_n>100}} {{indexmenu_n>100}}
-====== CPs gruppieren seit r409: Tabs  ======+====== CPs gruppieren: Tabs  ======
Seit der Version r409 ist es möglich ContentParts für das FE zu gruppieren. Z.B. können mit dieser Funktion CPs in Tab´s gefasst werden. Seit der Version r409 ist es möglich ContentParts für das FE zu gruppieren. Z.B. können mit dieser Funktion CPs in Tab´s gefasst werden.
-Hier am Beispiel der einfachen MGFX Tabs für MooTools gezeigt. +Hier am Beispiel der einfachen [[http://mootools.net/forge/p/mgfx_tabs|MGFX.Tabs]] //(mit fester Höhe)// für MooTools gezeigt.
\\ \\
-**Frontend:** 
-{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs-01-fe_1.gif|}}+===== Frontend: =====
-{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs-02-fe_1.gif|}}+{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs1-01-fe_1.gif|}}
-{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs-03-fe_1.gif|}}+{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs1-02-fe_1.gif|}}
 +{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs1-03-fe_1.gif|}}
-**Backend:**+ 
 +===== Backend: ===== 
{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs-00-be_1.gif|}} {{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs-00-be_1.gif|}}
Line 30: Line 32:
\\ \\
 +
 +======  ======
 +
---- ----
Line 87: Line 92:
**4.** Im Gebrauch: **4.** Im Gebrauch:
-  * Erstelle mehrere CPs unterhalb eines Artikel mit dem selben  Abschnitt: [1] und unterschiedlichen Register: [Tab-Name]+  * Erstelle mehrere CPs unterhalb eines Artikel mit dem selben  **Abschnitt: [1]** und unterschiedlichen **Register: [Tab-Name]**
  * Sichern und das Ergebnis im FE ansehen :-)   * Sichern und das Ergebnis im FE ansehen :-)
Line 181: Line 186:
<code css|h MGFXstyle.css |h> <code css|h MGFXstyle.css |h>
-#home, .tab-container-sec +.tab-regcard
- background-color:#ddd; position:relative; height:160px; width:450px; margin-bottom:10px; + background-color:#ccccee;  
 + position:relative;  
 + height:215px;  
 + width:450px;  
 + padding:5px 5px 5px 10px; 
 + margin-bottom:10px;  
 + border: 1px solid #9596ef; 
 + margin-top: -1px; 
 + z-index: 10;
} }
-.feature, .tab-content { +.tab-content { 
- background-color:#ddd; height:215px; position:absolute; width:450px; overflow:hidden; padding:5px 5px 5px 10px;+/* background-color:#ddd; */  
 + height:215px;  
 + position:absolute;  
 + width:450px;  
 + overflow:hidden;  
 +
} }
-.feature img, .tab-content img { +.tab-content img {
border:none; border:none;
} }
-#tabs, .tab-navigation {  +.tab-navigation {  
- margin-left:0;margin-bottom:0;+ margin-left:0; 
 + margin-bottom:0
 + padding: 0 0 5px 0; 
 + z-index: 20; 
 + position:relative;
} }
-#tabs li, .tab-navigation li { +.tab-navigation li { 
- background-color:transparent;display:inline;float:none;list-style:none; + background-color:transparent; 
 + display:inline; 
 + float:none; 
 + list-style:none;
} }
-#tabs li a, .tab-navigation li a { +.tab-navigation li a { 
- background-color:#edd; color:#333; display:inline; height:auto;padding:5px 20px;text-decoration:none;width:auto;+ background-color:#9596ef;  
 + color:#fff;  
 + font-weight: bold; 
 + display:inline;  
 + height:auto; 
 + padding:5px 20px 5px 20px; 
 + text-decoration:none; 
 + width:auto
 + border: 1px solid transparent; 
 + border-bottom: none; 
 + z-index: 20;
} }
-#tabs li a.active, .tab-navigation li a.active {  +.tab-navigation li.active a {  
- background-color:#ddd;color:#000; + background-color:#ccccee;  
 + color:#000;  
 + border: 1px solid #9596ef; 
 + border-bottom: none;
} }
</code> </code>
 +\\
 +
 +Ist ein Scrollbalken an der rechten Seite erwünscht,
 +
 +{{:deutsch:phpwcms-system:artikel:scripte:mgfx-tabs1-03_1-fe_1.gif|}}
 +
 +bitte folgende Klassen ergänzen:
 +
 +<code css>
 +.tab-regcard {
 + height:220px;           /* Aendern von 215 nach 220 */
 +}
 +
 +.tab-content {
 + height:220px;           /* Aendern von 215 nach 220 */
 +
 +/* overflow: hidden; */  /* Auskommetieren */
 + overflow-y: scroll;     /* Scrollbalken immer vorhanden */
 +/* overfolw-y: auto; */  /* Alternativ: Scrollbalken wird eingeblendet wenn notwendig */
 +}
 +</code>
 +
 +
\\ \\
Line 210: Line 271:
==== PHP ==== ==== PHP ====
-Dieses kleine Script ist notwendig um den vom CMS autom. generierten Quelltext an die Erfordernisse des hier verwendeten TAB-Scripts anzupassen.  +Dieses kleine Script ist notwendig um den vom CMS autom. generierten Quelltext an die Erfordernisse des hier verwendeten TAB-Scripts anzupassen. In erster Linie wird jede Registerkarte um die Klasse "**.tab-it**" erweitert. Dazu kommt noch der alle Registerkarten umschließende Container **%%<div class="tab-regcard"> ... </div>%%**. \\ 
 +Zudem wird das JS in den HEAD-Bereich geladen.
-**Options** +**Optionen** für das JavaScript Version 1.3.0 //(im PHP-Script einstellbar)//:
-Version 1.3.0+
    * **slideInterval:** (int) Time in milliseconds to remain on each slide. Default: 5 seconds.     * **slideInterval:** (int) Time in milliseconds to remain on each slide. Default: 5 seconds.
Line 224: Line 285:
\\ \\
-**Datei:** template/inc_script/frontend_render/mootools/cp_register_tabs.php+**Datei:** template/inc_script/frontend_render/cp_register_tabs.php
Line 246: Line 307:
 +// Is the switch "tabs: " in a CP active?
if(strpos($content["all"],'id="TABBOX') !== false) { if(strpos($content["all"],'id="TABBOX') !== false) {
- $GLOBALS['block']['css']['MGFXstyle'] = 'specific/mootools/MGFXstyle.css';+ // Load the CSS file 
 + $block['css']['MGFXstyle'] = 'specific/mootools/MGFXstyle.css';
 + // Load the required "more" component
$mootools_more = array('Fx/Fx.Elements'); $mootools_more = array('Fx/Fx.Elements');
initJSPlugin($mootools_more, true); initJSPlugin($mootools_more, true);
 + // Load the required "plugins"
initJSPlugin('MGFXrotater'); initJSPlugin('MGFXrotater');
initJSPlugin('MGFXtabs'); initJSPlugin('MGFXtabs');
 + // Load the runtime JS into the head area
$js =' $js ='
<script type="text/javascript"> <script type="text/javascript">
Line 265: Line 330:
transitionDuration:500, transitionDuration:500,
slideInterval:3000, slideInterval:3000,
- hover:true+ hover: true
}); });
}); });
Line 274: Line 339:
-// Source anpassen + // Customize the html source (add the class "tab-it")
$content["all"] = str_replace('tab-item-','tab-it tab-item-',$content["all"]); $content["all"] = str_replace('tab-item-','tab-it tab-item-',$content["all"]);
 + // Insert the class tab-regcard between last </ul> and first <li> 
 + $content["all"] = preg_replace('/\<ul class="tab-navigation"\>(.*?)\<\/ul\>/s','<ul class="tab-navigation">$1</ul>'.LF.'<div class="tab-regcard">', $content["all"]); 
 + // close the the inserted class tab-regcard behind the last </li> 
 + $content["all"] = str_replace('<div class="tab-container-clear"></div>','</div>'.LF.'<div class="tab-container-clear"></div>',$content["all"]); 
 +
} }
?> ?>
- 
</code> </code>
Line 310: Line 377:
-Der Aufruf. Das erste Argument ist die Registerkarte, das zweite Argument ist die Registerkarte. Eine drittes optionales Argument ist ein Satz von Optionen der die Standardwerte überschreibt.+Der Aufruf des J-Scripts.\\ 
 +- Das erste Argument ist der Registerreiter, das zweite Argument ist die Registerkarte. Eine drittes optionales Argument ist ein Satz von Optionen der die Standardwerte überschreibt //(siehe PHP-Script)//.
##%% var tabs = new MGFX.Tabs('#tabs li a', '#home .feature'); %%## ##%% var tabs = new MGFX.Tabs('#tabs li a', '#home .feature'); %%##
Line 320: Line 388:
==== CMS generiertes HTML ==== ==== CMS generiertes HTML ====
-Mit der Initialisierung: ##%% var tabs = new MGFX.Tabs('.tab-it','.tab-content'); %%## //(siehe PHP-Script)//+Mit der Initialisierung: ##%% var tabs = new MGFX.Tabs('.tab-it','.tab-content');%%## //(siehe PHP-Script)//
Line 349: Line 417:
\\ \\
-==== CMS generiertes HTML mit PHP ====+==== CMS generiertes HTML mit PHP und JS ====
Mit der Initialisierung: ##%% var tabs = new MGFX.Tabs('.tab-it','.tab-content');%%## //(siehe PHP-Script)// \\ Mit der Initialisierung: ##%% var tabs = new MGFX.Tabs('.tab-it','.tab-content');%%## //(siehe PHP-Script)// \\
Line 363: Line 431:
</ul> </ul>
- <div style="visibility: visible; opacity: 1;" id="tab-cp-tab010" class="tab-content"> + <div class="tab-regcard"> 
- -- CONTENT -- + <div style="visibility: visible; opacity: 1;" id="tab-cp-tab010" class="tab-content"> 
- </div>+ -- CP-CONTENT -- 
 + </div>
- <div style="visibility: hidden; opacity: 0;" id="tab-cp-tab021" class="tab-content"> + <div style="visibility: hidden; opacity: 0;" id="tab-cp-tab021" class="tab-content"> 
- -- CONTENT -- + -- CP-CONTENT -- 
- </div>+ </div>
- <div style="visibility: hidden; opacity: 0;" id="tab-cp-tab032" class="tab-content"> + <div style="visibility: hidden; opacity: 0;" id="tab-cp-tab032" class="tab-content"> 
- -- CONTENT --+ -- CP-CONTENT -- 
 + </div>
</div> </div>
- +
<div class="tab-container-clear"></div> <div class="tab-container-clear"></div>
</div> </div>
deutsch/phpwcms-system/artikel/scripte/cp-tabs.1300864770.txt.gz · Last modified: 2018/06/03 18:06 (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