NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
deutsch:phpwcms-system:artikel:scripte:cp-tabs [2011/03/23 10:02] 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: ===== | ===== Frontend: ===== | ||
| Line 91: | 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 241: | Line 242: | ||
| } | } | ||
| </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 247: | 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. In erster Linie wird jede Registerkarte um die Klasse ".tab-it" erweitert. \\ | + | 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. | 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 262: | Line 285: | ||
| \\ | \\ | ||
| - | **Datei:** template/inc_script/frontend_render/mootools/cp_register_tabs.php | + | **Datei:** template/inc_script/frontend_render/cp_register_tabs.php |
| Line 320: | Line 343: | ||
| // Insert the class tab-regcard between last </ul> and first <li> | // 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"]); | $content["all"] = preg_replace('/\<ul class="tab-navigation"\>(.*?)\<\/ul\>/s','<ul class="tab-navigation">$1</ul>'.LF.'<div class="tab-regcard">', $content["all"]); | ||
| - | // cliose the the inserted class tab-regcard | + | // 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"]); | $content["all"] = str_replace('<div class="tab-container-clear"></div>','</div>'.LF.'<div class="tab-container-clear"></div>',$content["all"]); | ||
| Line 354: | 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 364: | 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)// |
