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.
LG
Dropdown Box
Re: Dropdown Box
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é
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é
Re: Dropdown Box
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.
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:
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
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>
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>
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.
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.
Re: Dropdown Box
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!
INPUT
OUTPUT
CSS
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!
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
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>
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)
"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)
Re: Dropdown Box
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
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
Re: Dropdown Box
Hey! Super danke euch schonmal für die antworten und da ist ja echt alles brauchbar von
Danke eich schonmal recht herzlich ich denke jetzt komm ich auf jedenfall weiter!!!
Danke eich schonmal recht herzlich ich denke jetzt komm ich auf jedenfall weiter!!!