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