wrf_jQueryDynAccordion

yodatortenboxer · Beitrag von **yodatortenboxer** » Mo 23. Jul 2012, 09:09

Hallo,

ich habe eben beim Aufräumen ein Modul gefunden. Es wurde vor ca. 2 Jahren für einen Kunden benötigt.

Beispiel: http://conmods.ralf-fleischer.de/cms/fr ... =54&lang=1

Funktion:
Im Inputbereich kann man eine unbegrenzte Anzahl von Arccordionbereichen einstellen.
Im Editor hat man dann dementsprechend pro Bereich einmal eine Headline (CMS_HEAD) und einen Textbereich(CMS_HTML).
Diese kann man dann einfach per Editor mit Text oder Bildern füllen.
Im Frontend erfolgt die Ausgabe der Bereiche dann als Accordion.

Die Grundlage ist jQuery Accordion siehe:
http://docs.jquery.com/UI/Accordion
Wobei nicht alle Funktionen eingearbeitet wurden.
Hinterlegt ist momentan Autoheight, Animation und Mouseover zum öffnen.

Im Output sind die benötigten jQuery Dateien als externe verlinkt:

Code: Alles auswählen

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Diese könnt ihr entweder dort stehen lassen, oder im Output entfernen und im Layout im head-Bereich hinzufügen.

Input:

Code: Alles auswählen

?><?php
/***********************************************
* Dynamisches CMS_HTML und CMS_HTMLHEAD jQuery Accordion
* 
* Inputbereich
*
* Author      :     Ralf Fleischer
* Copyright   :     Werbung R. Fleischer.de	
* Mail        :     werbung@ralf-fleischer.de
* Created     :     01-06-2010
* Version     :     0.0.1
************************************************/

$sSubmitLink = '<a href="javascript:if (document.tplcfgform.send) {document.tplcfgform.send.value = 0}; document.tplcfgform.submit();"><img src="images/submit.gif" /></a>';
$sSubmitOnchange='javascript:if (document.tplcfgform.send) {document.tplcfgform.send.value = 0}; document.tplcfgform.submit();';

?>
<table style="border:1px solid #e2e2e2" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>&nbsp;<?php echo mi18n("Anzahl der Bereiche:");?>&nbsp;</td>
        <td style="border-left:1px solid #e2e2e2;" colspan="3">&nbsp;<input type="text" name="CMS_VAR[10]" value="CMS_VALUE[10]" size="3" />&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;<?php echo mi18n("StartId (Bsp: 5 für CMS_HTML[5]):");?>&nbsp;</td>
        <td style="border-left:1px solid #e2e2e2;" colspan="3">&nbsp;<input type="text" name="CMS_VAR[11]" value="CMS_VALUE[11]" size="3" />&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;<?php echo mi18n("Startfenster (Bsp: 1 für zweites geöffnet):");?>&nbsp;</td>
        <td style="border-left:1px solid #e2e2e2;" colspan="3">&nbsp;<input type="text" name="CMS_VAR[12]" value="CMS_VALUE[12]" size="3" />&nbsp;<?php echo mi18n("(Zahlen oder false um alle beim laden zu schließen)");?>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;<?php echo mi18n("Animation:");?>&nbsp;</td>
        <td style="border-left:1px solid #e2e2e2;" colspan="3">&nbsp;<input <?php if("CMS_VALUE[13]"==true){echo "checked=\"checked\"";}?> type="checkbox" name="CMS_VAR[13]" value="true" />&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;<?php echo mi18n("Automatische Höhe:");?>&nbsp;</td>
        <td style="border-left:1px solid #e2e2e2;" colspan="3">&nbsp;<input <?php if("CMS_VALUE[14]"==true){echo "checked=\"checked\"";}?> type="checkbox" name="CMS_VAR[14]" value="true" />&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;<?php echo mi18n("Event Mouseover:");?>&nbsp;</td>
        <td style="border-left:1px solid #e2e2e2;" colspan="3">&nbsp;<input <?php if("CMS_VALUE[15]"==true){echo "checked=\"checked\"";}?> type="checkbox" name="CMS_VAR[15]" value="true" />&nbsp;</td>
    </tr>
    <tr>
        <td align="right" style="background:#f1f1f1;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;">&nbsp;Speichern&nbsp;</td>
        <td colspan="3" style="background:#f1f1f1;border-left:1px solid #e2e2e2;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;">&nbsp;<?php echo $sSubmitLink;?>&nbsp;</td>
    </tr>
</table>
<?php

Outut:

Code: Alles auswählen

<?php
/***********************************************
* Dynamisches CMS_HTML und CMS_HTMLHEAD jQuery Accordion
* 
* Outputbereich
*
* Author      :     Ralf Fleischer
* Copyright   :     Werbung R. Fleischer.de	
* Mail        :     werbung@ralf-fleischer.de
* Created     :     01-06-2010
* Version     :     0.0.1
************************************************/

########################################################            
################## Benötigte Variablen #################
########################################################    

$fValueOut="CMS_VALUE[10]";
$fValueStartId="CMS_VALUE[11]";
$fActive="CMS_VALUE[12]";
$fBounceslide="CMS_VALUE[13]";
$fAutoHeight="CMS_VALUE[14]";
$fEvent="CMS_VALUE[15]";

if($fValueOut==""){$fValueOut=1;}
if($fValueStartId==""){$fValueStartId=2;}
if($fActive==""){$fActive=1;}
if($fBounceslide==true){$fBounceslide="bounceslide";}else{$fBounceslide="slide";}
if($fAutoHeight==true){$fAutoHeight="true";}else{$fAutoHeight="false";}
if($fEvent==true){$fEvent="mouseover";}else{$fEvent="click";}

########################################################            
################## Contenido Includes ##################
########################################################    

cInclude("includes", "functions.general.php");
cInclude("includes", "functions.lang.php");
cInclude("classes", "class.htmlelements.php");

################################################            
################## Funktionen ##################
################################################    

   // Container erstellen
if (!function_exists('make_cms_type')) {
   function make_cms_type( $container_type, $container_id ) {       
       global $a_content, $idartlang, $idart, $idcat, $lang, $db, $edit, $sess, $client, $cfg, $cfgClient;
      
       $sql = "SELECT * FROM ".$cfg["tab"]["type"]." WHERE type = '$container_type'";
       $db->query($sql);
  
       $db->next_record();
       $cms_code = $db->f("code");
       $cms_idtype = $db->f("idtype");
  
       if( !$edit ) {
           $db2 = new DB_Contenido;
           $sql = "SELECT * FROM ".$cfg["tab"]["content"]." AS A, ".$cfg["tab"]["art_lang"]." AS B, ".$cfg["tab"]["type"]." AS C
                   WHERE A.idtype = C.idtype AND A.idartlang = B.idartlang AND B.idart = '".Contenido_Security::toInteger($idart)."' AND B.idlang = '".Contenido_Security::escapeDB($lang, $db)."' AND
                         A.idtype = '".$cms_idtype."' AND A.typeid = '".$container_id."'";
           $db2->query($sql);
           $db2->next_record();
           $a_content[$db2->f("type")][$db2->f("typeid")] = $db2->f("value");
       }
  
       $val = $container_id;
      
       eval($cms_code);
       $tmp_output = str_replace('\\\"','"',$tmp);
       $tmp_output = stripslashes($tmp_output);
      
       return $tmp_output;
   }
}

################################################
################## Javascript ##################
################################################

if(!$contenido){
 ?>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
  $(document).ready(function() {
    $("#accordion").accordion({
		active: <?php echo $fActive; ?>,
		animated: '<?php echo $fBounceslide; ?>',
		autoHeight: <?php echo $fAutoHeight; ?>,
		event: '<?php echo $fEvent; ?>'
    });
  });
</script>
<?php

$LinkStart="<a href=\"#\">";
$LinkEnde="</a>";
}

####################################################
################## Ausgabe Felder ##################
####################################################

?>

<div id="accordion">
<?php
for($i=1;$i<=$fValueOut;$i++){	?>
    <h3><?php echo $LinkStart.make_cms_type("CMS_HTMLHEAD",$fValueStartId+$i).$LinkEnde; ?></h3>
    <div><?php echo make_cms_type("CMS_HTML",$fValueStartId+$i); ?></div>
<?php
}
?>
</div>

Schöne Grüße von Usedom
Ralf

motion pixels · Beitrag von **motion pixels** » Do 16. Aug 2012, 09:32

Klasse Modul! Funktioniert reibungslos.

Wäre es auch möglich, ein Modul, wie z.B. ein Kontaktformular, im Accordeon darzustellen?

Seelauer · Beitrag von **Seelauer** » Do 16. Aug 2012, 10:28

Hallo,
da würde ich z. B. das hier nehmen:
http://plugins.learningjquery.com/expander/index.html

yodatortenboxer · Beitrag von **yodatortenboxer** » Do 16. Aug 2012, 14:33

Hallo,

Wäre es auch möglich, ein Modul, wie z.B. ein Kontaktformular, im Accordeon darzustellen?

Warum nicht?

Am Anfang des Modules im Moduloutput erst ein:

Code: Alles auswählen

<form id="form1" name="form1" method="post" action="HierDieUrlZumVerarbeiten">

und am Ende ein

Code: Alles auswählen

</form>

Danach für zum Beispiel 5 Formularfelder einfach 5x als Bereich auswählen und dann bei jeden einzelnen Bereich Zum Beispiel als Überschrift Name oder Vorname (usw.) und im Textbereich das dementsprechende Formularfeld (Imput-Tag) per HTML-Code oder Editor eintragen.

Alternativ könnte auch in jeden einzelnen Accordionbereich ein Formular hinterlegt werden.
Im Textbereich sind "fast" alle HTML-Tag möglich.
"Fast" bedeutet nur, das eventuell noch über die Mandanteneinstellungen dem Editor noch zusätzliche Tags erlaubt werden müssten.

Gruß Ralf

Spider IT · Beitrag von **Spider IT** » Do 16. Aug 2012, 15:15

Hallo Ralf,

die Frage war: "Wäre es auch möglich, ein Modul, wie z.B. ein Kontaktformular, im Accordeon darzustellen?"
Die Antwort darauf wird wohl "nein" sein, oder?

Gruß
René

yodatortenboxer · Beitrag von **yodatortenboxer** » Do 16. Aug 2012, 15:26

Hallo Renė'

Was doch so ein kleines Wort alles ändern kann

Ohne weitere Anpassungen, nein.

Gruss Ralf

Horst1234 · Beitrag von **Horst1234** » Mi 15. Jan 2014, 00:35

Hallo Ralf,

hast du schon mal versucht, das Modul für 4.9 anzupassen,
da wär ich ja sehr dran interessiert

Grüße aus Bremen,
Horst

Faar · Beitrag von **Faar** » Mi 15. Jan 2014, 11:58

Hallo Horst,

ich würde da das simple News Modul nehmen und das Template so umbauen, dass es

Code: Alles auswählen

<h3>
<div>
oder 
<h3>
<p>

auswirft und dann jQuery Accordion von Hand ins Layout einbauen.

Und wenn man den Aufbau von Hand macht, kann man sicher auch ein Kontaktformular in das Accordion einbauen, wie hier mal angefragt wurde.
Man müsste dann aber schauen, dass man irgendwie das jQuery Script so gesteuert bekommt, dass nach dem Senden das richtige Accordion Fenster offen steht.
Oder man gibt den Bestätigungstext woanders aus.

Horst1234 · Beitrag von **Horst1234** » Mi 15. Jan 2014, 12:39

Hallo Faar,
ein News-Modul ist ja im Beispielemandanten con 4.9.2 nicht enthalten,
meinst du das alte 4.8'er Modul?
Grüße aus Bremen,
Horst

Faar · Beitrag von **Faar** » Mi 15. Jan 2014, 16:12

Hallo Horst,

ja, dann das alte Modul.
Es braucht einfach eine Möglichkeit, Inhalte aufzulisten und dabei das HTML im Griff zu haben.
Die Article List Advanced halte ich für ewas zu komplex für diese Aufgabe.
Accordion benötigt halt den Aufbau von h3 und div Folgen.
http://jqueryui.com/accordion/

Eingebaut im Layout ist das Script schnell und hochgeladen auch (ich würde es immer hochladen und nicht von Google oder jQuery beziehen, weil Besucher mit Request-Blocker dann nichts sehen).
Und was für Inhalte dann im Accordion sind, wird als erstes durch dieses News-Modul und der Vorschaufunktion beschränkt.
Für kleine Accordions reicht es auch aus, eine Abfolge von h3-Überschriften und div-boxen ins Layout/Template einzubauen.
Im Layout müsste dann halt ein umschließendes <div id="accordion"> für diesem Bereiche berücksichtigt werden.
Dafür hat man dann aber freie Wahl, was man nun für Module in diese Container einfügt, zumindest aber welche Inhalte.

CONTENIDO Forum

wrf_jQueryDynAccordion

wrf_jQueryDynAccordion

Re: wrf_jQueryDynAccordion

Re: wrf_jQueryDynAccordion

Re: wrf_jQueryDynAccordion

Re: wrf_jQueryDynAccordion

Re: wrf_jQueryDynAccordion

Re: wrf_jQueryDynAccordion

Re: wrf_jQueryDynAccordion

Re: wrf_jQueryDynAccordion

Re: wrf_jQueryDynAccordion