Differences

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

--- deutsch:phpwcms-system:artikel:scripte:cp-tabs [2011/03/23 08:20]
Knut Heermann (flip-flop)
+++ deutsch:phpwcms-system:artikel:scripte:cp-tabs [2018/06/03 18:08] (current)
@@ Line 1: / Line 1: @@
 {{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.
-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|}}
@@ Line 30: / Line 32: @@
 \\
+======  ======
 ----
@@ Line 87: / Line 92: @@
 **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 :-)
@@ Line 181: / Line 186: @@
 <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;
 }
-#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>
+\\
+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 ====
-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.
@@ 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) {
-	$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');
 	initJSPlugin($mootools_more, true);
+	// Load the required "plugins"
 	initJSPlugin('MGFXrotater');
 	initJSPlugin('MGFXtabs');
+	// Load the runtime JS into the head area
 	$js ='
 		<script type="text/javascript">
@@ Line 265: / Line 330: @@
 				transitionDuration:500,
 				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"]);
+	// 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>
@@ 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'); %%##
@@ Line 320: / Line 388: @@
 ==== 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)// \\
@@ Line 363: / Line 431: @@
 	</ul>
-	<div style="visibility: visible; opacity: 1;" id="tab-cp-tab010" class="tab-content">
+	<div class="tab-regcard">
-		-- CP-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">
-		-- CP-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">
-		-- CP-CONTENT --
+			-- CP-CONTENT --
+		</div>
 	</div>
 	<div class="tab-container-clear"></div>
 </div>

deutsch/phpwcms-system/artikel/scripte/cp-tabs.1300864822.txt.gz · Last modified: 2018/06/03 18:06 (external edit)

Show page Old revisions