ich habe jetzt ca. 3 Tage an einem neuen Modul gearbeitet, welches ich soeben fertiggestellt habe.
An dieser Stelle möchte ich mich erst einmal ganz herzlich bei kummer und wosch bedanken, die mir bei so manchen kleinen Hürden die während der Entwicklung zu bewältigen waren super geholfen haben. Also ein dickes Dankeschön an euch Beide !
So nun aber zum eigentlichen Thema:
Das Modul bietet die Möglichkeit beliebige Inhalte zu Gruppieren und in Tabs darzustellen. Es spielt keine Rolle was ihr "tabben" möchtet, sei es ein Bild, ein Text, beides zusammen, eine Tabelle oder was auch immer, nahezu alles ist möglich. Ihr könnt die Tabs natürlich frei mit CSS gestalten, nähres dazu unten. Bearbeitet werden die Inhalte ganz normal im Backend wie auch die ganz normalen Inhalte, insite-editing und WYSIWYG ist beides möglich.
So, dann mal zum Styling, folgende Klassen könnt ihr fürs CSS Styling nutzen:
So soviel zu CSS..table_tabs -> Die Tabelle in der die Rabs dargestellt werden
.tab_base -> Standard aussehen eines Tabs
.tab_loaded -> Aussehen des aktiven Tabs
.tab_base:hover -> Standardtab bei Mouseover
.tabbedContent -> DIV Container mit dem Content des Tabs (auch über #table_loader_div[MODULINSTANZ] zu steuern, wobei [MODULINSTANZ] durch die Instanzennummer des Moduls ersetzt werden muss)
Jetzt kommen wir zum eingemachten, der Funktionsweise.
Grunsätzlich baut das Modul auf Javascript auf, ohne is also nicht! Dabei werden die Inhalte in einem Array abgelegt und dann je nach dem welches Tab man anklickt werden diese Inhalte dann an eine Funktion übergeben, welche dann im entsprechenden DIV-Container den Inhalt ersetzt.
Ich habe schon angefangen den Modulquelltext zu kommentieren, bin aber noch nicht ganz durch. Grundsätzlich sollte das Modul aber schon laufen. Ich werde im laufe der nächsten Tage immer mal wieder ein Update machen wo ich dann den Quellcode weiter aufgeräumt und kommentiert habe, so dass nachher jeder durchblicken kann. Deshalb sehe ich das hier erst mal als Beta-Release an, es hat also kein Anspruch auf 100%ige Funktionalität !
So okay genug geredet, hier der Modulcode:
Input:Output:Code: Alles auswählen
/*********************************************** * CONTENIDO MODUL - Input * * Modulname : Tabbed Content * Author(s) : Marcel Bensch * Copyright : MISTRAL! marketing, Marcel Bensch * URL : www.marcelbensch.de , www.mistral-marketing.de * Created : 23.10.2007 * Credits : Danke an kummer, und wosch für eure Hilfe !!! ************************************************/ ?> <table border="0"> <tr> <td><?php echo mi18n("Anzahl der Tabs");?></td> <td> <input type="text" name="<?php echo "CMS_VAR[0]";?>" value="<?php echo "CMS_VALUE[0]";?>"></td> </tr> <tr> <td><?php echo mi18n("Modulinstanz");?></td> <td> <input type="text" name="<?php echo "CMS_VAR[1]";?>" value="<?php echo "CMS_VALUE[1]";?>"></td> </tr> </table><?
Code: Alles auswählen
<?php /*********************************************** * CONTENIDO MODUL - OUTPUT * * Modulname : Tabbed Content * Author(s) : Marcel Bensch * Copyright : MISTRAL! marketing, Marcel Bensch * URL : www.marcelbensch.de , www.mistral-marketing.de * Created : 23.10.2007 * Credits : Danke an kummer, und wosch für eure Hilfe ! ************************************************/ /** * Initialisierung des Moduls und der Modulvariablen */ $anzahl = "CMS_VALUE[0]"; $instance = "CMS_VALUE[1]"; //Überprüfen ob Daten übergeben wurden if (!isset($anzahl) || empty($anzahl) || $anzahl="0") { $anzahl ="2"; } else { $anzahl = "CMS_VALUE[0]"; } if (!isset($instance) || empty($instance) || $instance == "0") { $instance = "1"; } else { $instance = "CMS_VALUE[1]"; } /** * Bin ich im Bearbeitungsmodus oder nicht ? */ $editmode = false; // Standardinitialisierung der Variable ist false if($contenido&&($view=="edit")){ // Überprüfung auf Editmode $editmode = true; // Wenn okay, dann bin ich im Editmode } /** * Abarbeitung des Skriptes je nach Modus (Editmode / Viewmode) */ ////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ////////////////////################\\\\\\\\\\\\\\\\\\\\ ////////////////////# BACKENDEMODE #\\\\\\\\\\\\\\\\\\\\ ////////////////////################\\\\\\\\\\\\\\\\\\\\ ////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\ if ($editmode===true) { /** * Includes der benötigten Klassen */ cInclude("includes", "functions.lang.php"); cInclude("classes", "class.htmlelements.php"); /** * ID's initialisieren */ $onr = 40; $val= $instance.$onr; /** * Backendstyling Kopfbereich */ echo "<div style=\"border:1px solid #334f77;\"> <div style=\"padding-left:10px;background:#c6c6d5;color:white;font-weight:bold;\">Tabbed Content</div> <div style=\"padding:15px;background:#e8e8ee;color:black;\"> <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">"; for($i=1;$i<=$anzahl;$i++) { /** * Tab Id ausgeben */ echo "<tr><td style=\"background-color:#dedede;color:black;padding-left:5px;font-weight:bold;\"> Tab Item Nr. $i</td><tr><tr><td style=\"padding-left:15px;padding-top:5px;\"> <strong><em>Tabname:</em></strong></td></tr> <tr><td style=\"padding-left:15px;\">"; /** * Tabname: * * Editierbaren Bereich ausgeben analog zu CMS_HTMLHEAD[n] */ $tmp = $a_content['CMS_HTMLHEAD'][$val]; $tmp = urldecode($tmp); //$tmp = AddSlashes(AddSlashes($tmp)); //$tmp = str_replace("\\\'","'",$tmp); //$tmp = str_replace("\$",'\\\$',$tmp); if ($tmp == "") { $tmp = " "; } $insiteEditingDIV = new cHTMLDiv; $insiteEditingDIV->setId("HTMLHEAD_".$db->f("idtype")."_".$val); $insiteEditingDIV->setEvent("Focus", "this.style.border='1px solid #bb5577';"); $insiteEditingDIV->setEvent("Blur", "this.style.border='1px dashed #bfbfbf';"); $insiteEditingDIV->setStyleDefinition("border", "1px dashed #bfbfbf"); $insiteEditingDIV->setStyleDefinition("direction", langGetTextDirection($lang)); $insiteEditingDIV->setStyleDefinition("background", "#ffffff"); $insiteEditingDIV->updateAttributes(array("contentEditable" => "true")); $insiteEditingDIV->setContent("_REPLACEMENT_"); /* Edit anchor and image */ $editLink = $sess->url("front_content.php?action=10&idcat=$idcat&idart=$idart&idartlang=$idartlang&type=CMS_HTMLHEAD&typenr=$val"); $editAnchor = new cHTMLLink; $editAnchor->setLink("javascript:setcontent('$idartlang','" . $editLink . "');"); $editButton = new cHTMLImage; $editButton->setSrc($cfg["path"]["contenido_fullhtml"].$cfg["path"]["images"]."but_edithead.gif"); $editButton->setBorder(0); $editButton->setStyleDefinition("margin-right", "2px"); $editAnchor->setContent($editButton); /* Save anchor and image */ $saveAnchor = new cHTMLLink; $saveAnchor->setLink("javascript:setcontent('$idartlang','0')"); $saveButton = new cHTMLImage; $saveButton->setSrc($cfg["path"]["contenido_fullhtml"].$cfg["path"]["images"]."but_speichern.gif"); $saveButton->setBorder(0); $saveAnchor->setContent($saveButton); /* Process for output with echo */ $finalEditButton = $editAnchor->render(); $finalEditingDiv = $insiteEditingDIV->render(); $finalEditingDiv = str_replace("_REPLACEMENT_", $tmp, $finalEditingDiv); $finalSaveButton = $saveAnchor->render(); echo $finalEditingDiv . $finalEditButton . $finalSaveButton; echo "</td></tr><tr><td> </td></tr>"; echo "<tr><td style=\"padding-left:15px;\"><strong><em>Tabinhalt:</em></strong></td></tr><tr><td style=\"padding-left:15px;\">"; /** * Tab Inhalt: * * Editierbares Feld ausgeben, analog zu CMS_HTML[n] */ /* Bestehenden Content laden falls vorhanden */ $tmp = $a_content['CMS_HTML'][$val]; $tmp = urldecode($tmp); /* Prüfen ob Content besteht */ if ($tmp == "") { // Für den Fall das kein Content besteht wird ein Leerzeichen ausgegeben $tmp = " "; } /* Neuer Container fürs Insite Editing wird erstellt */ //Initialisierung des Onjektes für den Container $insiteEditingDIV = new cHTMLDiv; //Zuweisung der Objekteigenschaften #>DB Eigenschaften $insiteEditingDIV->setId("HTML_2_".$val); #ID des Objektes (setzt sich zusammen aus der typeid und dem internen Counter #>JS Eigenschaften $insiteEditingDIV->setEvent("Focus", "this.style.border='1px solid #bb5577';"); #Setzen der Javascript Eventhandler, anscheinend nur relevant im IE [..>] $insiteEditingDIV->setEvent("Blur", "this.style.border='1px dashed #bfbfbf';"); # [..>] einfach aus der Datenbank mit übernommen, schadet ja nicht ;-) #>CSS Eigenschaften $insiteEditingDIV->setStyleDefinition("border", "1px dashed #bfbfbf"); #Setzen der CSS Eigenschaft für das Aussehen des Randes $insiteEditingDIV->setStyleDefinition("direction", langGetTextDirection($lang)); #Setzen der CSS Eigenschaft für die Leserichtung - Intenationalisierung $insiteEditingDIV->setStyleDefinition("background", "#ffffff"); #Setzen der CSS Eigenschaft für den Hintergrund #>Editierbarkeit des Contents $insiteEditingDIV->updateAttributes(array("contentEditable" => "true")); #Auf false setzen um Insite-Editing abzuschalten; Bearbeitung dann nur noch über WYSIWYG #>Content-Platzhalter einsetzen $insiteEditingDIV->setContent("_REPLACEMENT_"); #Wird im späteren Verlauf des Scriptes durch den eigentlichen Content ersetzt /* Bearbeiten Button und Bild dahinter */ //Link erstellen $editLink = $sess->url("front_content.php?action=10&idcat=$idcat&idart=$idart&idartlang=$idartlang&type=CMS_HTML&typenr=$val"); $editAnchor = new cHTMLLink; $editAnchor->setLink("javascript:setcontent('$idartlang','" . $editLink . "');"); //Bild erstellen $editButton = new cHTMLImage; $editButton->setSrc($cfg["path"]["contenido_fullhtml"].$cfg["path"]["images"]."but_edithtml.gif"); $editButton->setBorder(0); $editButton->setStyleDefinition("margin-right", "2px"); //Bild und Link zusammenfügen $editAnchor->setContent($editButton); /* Speichern Button und Bild dahinter */ //Link erstellen $saveAnchor = new cHTMLLink; $saveAnchor->setLink("javascript:setcontent('$idartlang','0')"); //Bild erstellen $saveButton = new cHTMLImage; $saveButton->setSrc($cfg["path"]["contenido_fullhtml"].$cfg["path"]["images"]."but_speichern.gif"); $saveButton->setBorder(0); //Bild und Link zusammenfügen $saveAnchor->setContent($saveButton); /* HTML Inhalte rendern um sie mit echo() auszugeben */ $finalEditButton = $editAnchor->render(); $finalEditingDiv = $insiteEditingDIV->render(); $finalEditingDiv = str_replace("_REPLACEMENT_", $tmp, $finalEditingDiv); $finalSaveButton = $saveAnchor->render(); /* Ausgabe der Inhalte */ echo $finalEditingDiv . $finalEditButton . $finalSaveButton; echo "</td></tr><tr><td> </td></tr><tr><td> </td></tr>"; /* Counter erhöhen */ $val++; } echo "</table>"; echo "</div></div></div>"; } ////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ////////////////////################\\\\\\\\\\\\\\\\\\\\ ////////////////////# FRONTENDMODE #\\\\\\\\\\\\\\\\\\\\ ////////////////////################\\\\\\\\\\\\\\\\\\\\ ////////////////////////////\\\\\\\\\\\\\\\\\\\\\\\\\\\\ else { /** * Includes der benötigten Klassen */ cInclude("includes", "functions.general.php"); cInclude("includes", "functions.lang.php"); cInclude("classes", "class.htmlelements.php"); /** * Contents generieren */ getAvailableContentTypes($idartlang); /** * Zähler initialisieren */ $onr = 40; $val= $instance.$onr; echo "<script type='text/javascript' language='JavaScript'>"; echo "var content_HTML". $instance." = Array();\n"; for ($i=1; $i<=$anzahl;$i++) { $content = $a_content['CMS_HTML'][$val]; $content = urldecode($content); $content = str_replace("\\\'","'",$content); echo "content_HTML".$instance."[$val] = '$content';\n"; $val++; } //Zähler zurücksetzen $val2= $instance.$onr; echo "function change_tabs_$instance(contentTab) { for(i=$val2;i<$val;i++) { document.getElementById('content_tab' + i).className = 'tab_base'; } document.getElementById('table_loader_div$instance').innerHTML=content_HTML".$instance."[contentTab]; document.getElementById('content_tab' + contentTab).className = 'tab_loaded'; } "; echo "</script>"; echo "<div id=\"table_complete_$instance\" align=\"center\">"; /** * Tabs werden generiert mit den Werten aus dem CMS_HTMLHEAD - Containern */ echo "<div id=\"tabellen_tabs_$instance\">"; echo "<table class='table_tabs' NAME='tab_table_$instance' align='left'>"; echo "<tr>"; //Zähler zurücksetzen $val= $instance.$onr; for($i=0;$i<$anzahl;$i++) { $headline = $a_content['CMS_HTMLHEAD'][$val]; $headline = urldecode($headline); echo "<td class='tab_base' id='content_tab".$val."' align='center'onmousedown=\"change_tabs_$instance($val);\">"; echo $headline; echo "</td>"; $val++; } echo "</tr>"; echo "</table>"; echo "</div>"; //Zähler zurücksetzen $val= $instance.$onr; //Eigentliche Ausgabe des Inhaltes echo "<div id='table_loader_div$instance' class='tabbedContent'></div>"; echo "<script type='text/javascript' language='JavaScript'>"; echo "change_tabs_$instance($val);"; echo "</script>"; echo "</div>"; echo "<div style=\"clear:both;\" ></div><p> </p>"; } ?>
So, dann mal viel Spaß damit !
Für konstruktive Kritik und Anregungen bin ich natürlich immer offen !
Wehr Fehler findet sollte sie nicht behalten sondern posten (gilt natürlich nicht für evtl. Rechtschreibfehler in diesem Post )
Also dann, gutes Gelingen !
Mfg,
Marcel