Dropdown Box

Alles rund um Module und Plugins in CONTENIDO 4.9.
Antworten
Skyjacker
Beiträge: 11
Registriert: Do 10. Jan 2013, 12:42
Kontaktdaten:

Dropdown Box

Beitrag von Skyjacker » Fr 11. Jan 2013, 17:01

Hey Leute!

Ich hätte da mal ne Frage bzgl. eines Moduls was ich gern hätte. Und zwar geht es dabei um dropdown boxen die aufklappbar sind und wenn man auf eine überschrift klickt auf und zu gehen. Habe das ganze mal kurz skizziert und wollte euch um eure meinung fragen wie es umzusetzen ist oder ob es vielleicht schon so ein fertiges Modul gibt.
Bildschirmfoto 2013-01-11 um 16.06.34.png
Bildschirmfoto 2013-01-11 um 16.06.34.png (30.35 KiB) 4861 mal betrachtet
LG

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Dropdown Box

Beitrag von Spider IT » Fr 11. Jan 2013, 17:39

Hallo Skyjacker,

meinst du sowas wie hier?
Das ist ein Modul, welches Kategorien mit ihre Startartikel gleich mitlädt und per Slider einblendet (der obere Punkt ist für diese Seite speziell aufbereitet damit der Text unten erscheint).
Einzig die Höhe der Bereiche ist per CSS fest vorgegeben.
Bei Interesse bitte eine PN.

Gruß
René

xmurrix
Beiträge: 3143
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Dropdown Box

Beitrag von xmurrix » Fr 11. Jan 2013, 18:03

Hallo Skyjacker,

damit auch andere CONTENIDO User es wissen, wie man das machen kann, hier ein einfaches Beispiel...

CONTENIDO verwendet jQuery im Backend, daher liegt es nahe, dass man auch im Frontend jQuery einsetzt.

jQuery UI bietet das, was du brauchst, schau dir mal das Beispiel an:
http://jqueryui.com/accordion/

Das ist einfach in ein Layout zu übernehmen, du kannst es sogar mit der Artikelliste verbinden, wichtig ist, dass du das Element angibst, dass als Accordion die anderen Elemente enthält, also die ID.

Code: Alles auswählen

<div id="accordion">
...
</div>
Willst du den Inhalt vom div per Editor bearbeiten, also dort keine Artikelliste generieren, dann musst du dafür sorgen, dass das Accordion im Backend beim Editieren, nicht aktiv wird. Da kannst du z. B. die id einfach auslassen, dann wird jQuery Accordion nicht initialisiert:

Code: Alles auswählen

<?php
$id = ($contenido && $edit) ? "accordion" : "";
?>
<div id="<?php echo $id ?>">

..,. hier kannst du dann deine CMS_HEADER und CMS_HTML ausgeben ...

</div>
Das ist nur ein einfaches Beispiel, eventuell musst du ein paar Anpassungen machen, und du must die Art und Weise, wie jQuery oder Accordion initialisiert wird etwas anpassen, da mehrere eingebundene jQuery Versionen (eine im Backend und eine im Frontend) sich nicht vertragen.

Gruß
xmurrix
CONTENIDO Downloads: CONTENIDO 4.10.1
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Dropdown Box

Beitrag von McHubi » Sa 12. Jan 2013, 13:47

Hallo Skyjacker,

noch eine Alternative für Dich: http://www.seamless-design.de/2/spots/index.html

Einfach das Modul erstellen, in Template einbinden und die CSS-Klassen in Dein stylesheet integrieren. Bis zu zehn Boxen sind möglich (bei Anpassung des Codes auch mehr), Reihenfolge nachträglich änderbar, Höhe passt sich dem Inhalt automatisch an, Geschwindigkeit des Ein-/ Ausfahrens usw. ist auch anpassbar. Zur Erfassung von Inhalten kannst Du ganz normal den tinymce nutzen.

Viel Spaß damit! :D

INPUT

Code: Alles auswählen

/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname   :     accordion_sd
* Author(s)   :     Seamless-Design Markus Hübner
* Copyright   :     Seamless-Design Markus Hübner
* Created     :     17.05.2012
************************************************/
?>
<table cellspacing="0" cellpadding="10" border="0">
    <tr>
        <td>Reihenfolge von max. 10 Containern:<br/>(1#2#5#4#3)</td>
        <td valign="top"><input type="text" name="CMS_VAR[10]" value="CMS_VALUE[10]"/></td>
    </tr>
    </tr>
</table>
<?php   
OUTPUT

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     accordion_sd
* Author(s)   :     Seamless-Design Markus Hübner
* Copyright   :     Seamless-Design Markus Hübner
* Created     :     17.05.2012
************************************************/
?>


<div id="results">
 <div id="accordion">
	<dl class="accordion" id="slider">

<script language="JavaScript" type="text/javascript">

var var_width_dd=document.getElementById('slider').offsetWidth;
document.write('<style type="text/css">.accordion dd {overflow:hidden;width: 100%;margin-left: 0px;width:'+var_width_dd+'px;}</style>');

var accordion=function()
  {
	var tm=sp=10; //speed of slide-effect
	function slider(n)
	  {
/* 1 */
//alert('function slider');
	  this.nm=n; this.arr=[]
	  }
	slider.prototype.init=function(t,c,k)
	  {
/* 2 */
//alert('slider.prototype.init');
		var a,h,s,l,i;
		a=document.getElementById(t);
		this.sl=k?k:'';
		h=a.getElementsByTagName('dt');
		s=a.getElementsByTagName('dd');
		this.l=h.length;
		for(i=0;i<this.l;i++)
		  {
		  var d=h[i];
//alert('2 d: '+d);
		  this.arr[i]=d;
		  d.onclick=new Function(this.nm+'.pro(this)');
		  if(c==i)
		    {
		    d.className=this.sl
		    }
		  }
		l=s.length;
//alert('2 l: '+l);
		for(i=0;i<l;i++)
		  {
		  var d=s[i];
      //d.mh=d.offsetHeight; // read note at the top!
      d.mh=d.offsetHeight;
//alert('2 d.mh: '+d.mh)
		  if(c!=i)
		    {
		    d.style.height=0;
		    d.style.display='none'
		    }
		  }
	  }
	  
	slider.prototype.pro=function(d)
	  {
/* 3 */
//alert('slider.prototype.pro');
	  //alert(this.l); // Anzahl der Elemente die aufgeslidet werden können
		for(var i=0;i<this.l;i++)
		  {
			var h=this.arr[i], s=h.nextSibling;
			s=s.nodeType!=1?s.nextSibling:s;
			clearInterval(s.tm);
			if(h==d&&s.style.display=='none')
			  {
			  s.style.display='';
			  su(s,1);
			  h.className=this.sl
			  }
			  else if(s.style.display=='')
			    {
			    su(s,-1);
			    h.className=''
			    }
		  }
	  }

	function su(c,f)
	  {
/* 4 */
//alert('function su');
	  c.tm=setInterval(function(){sl(c,f)},tm)
	  }

	function sl(c,f)
	  {
/* 5 */
//läuft in Schleife
//alert('function sl');
		var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h;
		c.style.height=h+(Math.ceil(d/sp)*f)+'px';
/*
alert('c: '+c); //html object
alert('f: '+f); //1 wert bleibt gleich
alert('h: '+h); //height of container erhöht sich
alert('d: '+d); //height of container erhöht sich
alert('m: '+m); //height of container wert bleibt gleich
alert('c.style.height: '+c.style.height); //height of container wert bleibt gleich
*/
//alert(c.style.height);
		c.style.opacity=h/m;
		c.style.filter='alpha(opacity='+h*100/m+')';
		if(f==1&&h>=m)
		  {
		  clearInterval(c.tm)
		  }
		  else if(f!=1&&h==1)
		    {
		    c.style.display='none';
		    clearInterval(c.tm)
		    }
    }

	return{slider:slider}
  }();

</script>



	
<?php

$order_of_appearance="CMS_VALUE[10]";
$array_order_of_appearance=explode("#",$order_of_appearance);

$CMS_TYPE = array(
    array("head" => "CMS_HTMLHEAD[101]","html" => "CMS_HTML[101]"),
    array("head" => "CMS_HTMLHEAD[102]","html" => "CMS_HTML[102]"),
    array("head" => "CMS_HTMLHEAD[103]","html" => "CMS_HTML[103]"),
    array("head" => "CMS_HTMLHEAD[104]","html" => "CMS_HTML[104]"),
    array("head" => "CMS_HTMLHEAD[105]","html" => "CMS_HTML[105]"),
    array("head" => "CMS_HTMLHEAD[106]","html" => "CMS_HTML[106]"),
    array("head" => "CMS_HTMLHEAD[107]","html" => "CMS_HTML[107]"),
    array("head" => "CMS_HTMLHEAD[108]","html" => "CMS_HTML[108]"),
    array("head" => "CMS_HTMLHEAD[109]","html" => "CMS_HTML[109]"),
    array("head" => "CMS_HTMLHEAD[110]","html" => "CMS_HTML[110]")
);

foreach($array_order_of_appearance AS $element)
  {
  if($edit) echo '<br/><strong>'.mi18n("Element").': '.$element.'</strong>';
  $element=$element-1; // numbering in configuration does not start with 0 but 1, so adressing the array has to be corrected
  if ($CMS_TYPE[$element]["head"] != "")
    {
    if($edit) echo '<div style="border: 2px solid #999999; font-weight: 900;">'.$CMS_TYPE[$element]["head"].'</div>';
      else echo '<dt>'.$CMS_TYPE[$element]["head"].'</dt>';
    }
  if ($CMS_TYPE[$element]["html"] != "")
    {
    if($edit) echo '<div>'.$CMS_TYPE[$element]["html"].'</div>';
      else echo '<dd>'.$CMS_TYPE[$element]["html"].'</dd>';
    }
  }

?>
	</dl>
</div>
</div>

<script type="text/javascript">
var slider1=new accordion.slider("slider1");
slider1.init("slider");
</script>
CSS

Code: Alles auswählen

.accordion dt {
border: 1px solid #cccccc;
padding: 5px;
cursor: pointer;
font-size: 1.2em;
font-weight: 900;
color:#666666;
text-decoration:none;
transition:opacity 2s;
-moz-transition:opacity 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:opacity 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:opacity 2s, -o-transform 2s; /* Opera */
opacity: 0.5;
}
.accordion dt:hover {
color:#ffffff;
text-shadow: 2px 0 2px #333333, -2px 0 2px #333333;
opacity: 1;
transition:opacity 2s;
-moz-transition:opacity 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:opacity 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:opacity 2s, -o-transform 2s; /* Opera */
}
.accordion dd {
margin-left: 0px;
padding: 5px;
}
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Dropdown Box

Beitrag von Spider IT » Sa 12. Jan 2013, 19:31

So, mein Modul ermittelt jetzt auch die tatsächliche Höhe des jeweiligen Contents.
Zusätzlich kann in der Konfiguration die maximale Höhe der Bereiche vorgegeben werden (wie im Beispiel, siehe Impressum).
Außerdem kann die Slide-Geschwindigkeit per Mandanteneinstellung geändert werden (Standardwert, wie im Beispiel, ist 500 ms).
Dank Spry Framework gibt es keine Kompatibilitätsprobleme mit andere Frameworks (auch nicht im Backend von Contenido).
Und da es Kategorien mit ihre Startartikel auflistet, ist es in der Anzahl unbegrenzt und über die Kategorieliste sortierbar.
Es berücksichtigt sogar die Berechtigungen, kann also für eingelogte User mehr anzeigen.

Zu haben auf Anfrage per PN.

Gruß
René

PS: Eine Version als Artikelliste (alle nicht-Start-Artikel aus der gleichen Kategorie) ist geplant ;)

Skyjacker
Beiträge: 11
Registriert: Do 10. Jan 2013, 12:42
Kontaktdaten:

Re: Dropdown Box

Beitrag von Skyjacker » Mo 14. Jan 2013, 22:23

Hey! Super danke euch schonmal für die antworten und da ist ja echt alles brauchbar von :D

Danke eich schonmal recht herzlich ich denke jetzt komm ich auf jedenfall weiter!!!

Antworten